@eui/showcase 21.4.2-snapshot-1787737932680 → 22.0.0-alpha.2
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 +550 -741
- package/fesm2022/eui-showcase.mjs.map +1 -1
- package/package.json +10 -10
- package/types/eui-showcase.d.ts +228 -226
- package/types/eui-showcase.d.ts.map +1 -1
|
@@ -1,42 +1,41 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, Injectable,
|
|
3
|
-
import * as
|
|
2
|
+
import { signal, Injectable, input, Component, inject, ChangeDetectorRef, afterNextRender, ViewEncapsulation, ElementRef, Renderer2, effect, Directive, booleanAttribute, model, contentChildren, forwardRef, viewChild, NgZone, DestroyRef, Injector, ViewChild, ContentChildren, HostListener, contentChild } from '@angular/core';
|
|
3
|
+
import * as i1 from '@eui/components/eui-icon';
|
|
4
4
|
import { EUI_ICON } from '@eui/components/eui-icon';
|
|
5
|
-
import * as i2
|
|
5
|
+
import * as i2 from '@eui/components/eui-button';
|
|
6
6
|
import { EUI_BUTTON } from '@eui/components/eui-button';
|
|
7
7
|
import { HttpClient } from '@angular/common/http';
|
|
8
8
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
9
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
9
10
|
import { take, map, switchMap, catchError } from 'rxjs/operators';
|
|
10
|
-
import * as i2$
|
|
11
|
+
import * as i2$1 from 'ngx-markdown';
|
|
11
12
|
import { MarkdownService, MarkdownModule } from 'ngx-markdown';
|
|
12
|
-
import * as
|
|
13
|
+
import * as i3 from '@eui/components/eui-page';
|
|
13
14
|
import { EUI_PAGE } from '@eui/components/eui-page';
|
|
14
|
-
import
|
|
15
|
-
import { NgClass, CommonModule, Location } from '@angular/common';
|
|
15
|
+
import { NgClass, Location } from '@angular/common';
|
|
16
16
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
17
17
|
import { Clipboard } from '@angular/cdk/clipboard';
|
|
18
18
|
import { lastValueFrom, forkJoin, Observable } from 'rxjs';
|
|
19
19
|
import { EuiAppShellService, EuiGrowlService } from '@eui/core';
|
|
20
|
-
import * as
|
|
20
|
+
import * as i2$2 from '@eui/components/eui-tabs';
|
|
21
21
|
import { EUI_TABS } from '@eui/components/eui-tabs';
|
|
22
22
|
import sdk from '@stackblitz/sdk';
|
|
23
|
-
import * as
|
|
23
|
+
import * as i2$3 from '@eui/components/eui-label';
|
|
24
24
|
import { EUI_LABEL } from '@eui/components/eui-label';
|
|
25
|
-
import * as
|
|
25
|
+
import * as i3$1 from '@eui/components/eui-card';
|
|
26
26
|
import { EUI_CARD } from '@eui/components/eui-card';
|
|
27
|
-
import * as
|
|
27
|
+
import * as i1$1 from '@eui/components/eui-alert';
|
|
28
28
|
import { EUI_ALERT } from '@eui/components/eui-alert';
|
|
29
|
-
import * as
|
|
29
|
+
import * as i4 from '@eui/components/eui-chip';
|
|
30
30
|
import { EUI_CHIP } from '@eui/components/eui-chip';
|
|
31
|
-
import * as
|
|
32
|
-
import { EUI_BLOCK_CONTENT } from '@eui/components/eui-block-content';
|
|
33
|
-
import * as i3$2 from '@eui/components/eui-dialog';
|
|
31
|
+
import * as i2$4 from '@eui/components/eui-dialog';
|
|
34
32
|
import { EUI_DIALOG } from '@eui/components/eui-dialog';
|
|
35
|
-
import
|
|
36
|
-
import * as i6 from '@eui/components/eui-badge';
|
|
33
|
+
import * as i5 from '@eui/components/eui-badge';
|
|
37
34
|
import { EUI_BADGE } from '@eui/components/eui-badge';
|
|
38
|
-
import * as
|
|
35
|
+
import * as i5$1 from '@eui/components/eui-avatar';
|
|
39
36
|
import { EUI_AVATAR } from '@eui/components/eui-avatar';
|
|
37
|
+
import * as i1$2 from '@eui/components/eui-block-content';
|
|
38
|
+
import { EUI_BLOCK_CONTENT } from '@eui/components/eui-block-content';
|
|
40
39
|
|
|
41
40
|
/**
|
|
42
41
|
* A service to update and configure the Showcase module state.
|
|
@@ -49,7 +48,8 @@ class ConfigurationService {
|
|
|
49
48
|
*
|
|
50
49
|
* Default value for renderPlayground will be true.
|
|
51
50
|
*/
|
|
52
|
-
this.state = signal({ renderPlayground: true },
|
|
51
|
+
this.state = signal({ renderPlayground: true }, /* @ts-ignore */
|
|
52
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
53
53
|
}
|
|
54
54
|
/**
|
|
55
55
|
* Update the state of configuration. Deep merge is not available thus if
|
|
@@ -72,10 +72,10 @@ class ConfigurationService {
|
|
|
72
72
|
get configuration() {
|
|
73
73
|
return this.state.asReadonly();
|
|
74
74
|
}
|
|
75
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
76
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
75
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
76
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ConfigurationService, providedIn: 'root' }); }
|
|
77
77
|
}
|
|
78
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ConfigurationService, decorators: [{
|
|
79
79
|
type: Injectable,
|
|
80
80
|
args: [{
|
|
81
81
|
providedIn: 'root',
|
|
@@ -84,98 +84,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
84
84
|
|
|
85
85
|
class DocPageCodeComponent {
|
|
86
86
|
constructor() {
|
|
87
|
-
this.codeFolder = ''
|
|
88
|
-
|
|
87
|
+
this.codeFolder = input('', /* @ts-ignore */
|
|
88
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
89
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
90
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
89
91
|
}
|
|
90
92
|
onOpenCode() {
|
|
91
93
|
// eslint-disable-next-line max-len
|
|
92
|
-
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase}/-/blob/master/src/app/`;
|
|
93
|
-
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
94
|
+
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase()}/-/blob/master/src/app/`;
|
|
95
|
+
window.open(sourceRootPath + this.codeFolder(), '_blank');
|
|
94
96
|
}
|
|
95
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
96
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
97
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
98
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: DocPageCodeComponent, isStandalone: true, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" euiButton euiCTAButton (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n", dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
97
99
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageCodeComponent, decorators: [{
|
|
99
101
|
type: Component,
|
|
100
102
|
args: [{ selector: 'eui-showcase-doc-page-code', imports: [
|
|
101
103
|
...EUI_ICON,
|
|
102
104
|
...EUI_BUTTON,
|
|
103
105
|
], template: "<button type=\"button\" euiButton euiCTAButton (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n" }]
|
|
104
|
-
}], propDecorators: { codeFolder: [{
|
|
105
|
-
type: Input
|
|
106
|
-
}], showcase: [{
|
|
107
|
-
type: Input
|
|
108
|
-
}] } });
|
|
106
|
+
}], propDecorators: { codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }] } });
|
|
109
107
|
|
|
110
108
|
class DocPageDevGuideComponent {
|
|
111
109
|
constructor() {
|
|
112
|
-
this.
|
|
113
|
-
|
|
114
|
-
this.showcaseName = 'showcase-dev-guide'
|
|
110
|
+
this.rootDocsFolder = input('docs', /* @ts-ignore */
|
|
111
|
+
...(ngDevMode ? [{ debugName: "rootDocsFolder" }] : /* istanbul ignore next */ []));
|
|
112
|
+
this.showcaseName = input('showcase-dev-guide', /* @ts-ignore */
|
|
113
|
+
...(ngDevMode ? [{ debugName: "showcaseName" }] : /* istanbul ignore next */ []));
|
|
115
114
|
this.headers = [];
|
|
116
115
|
this.markdownService = inject(MarkdownService);
|
|
117
116
|
this.http = inject(HttpClient);
|
|
118
117
|
this.router = inject(Router);
|
|
119
118
|
this.route = inject(ActivatedRoute);
|
|
120
|
-
this.cdRef = inject(
|
|
119
|
+
this.cdRef = inject(ChangeDetectorRef);
|
|
120
|
+
this.route.url.pipe(takeUntilDestroyed()).subscribe((u) => {
|
|
121
|
+
this._loadMdContent(`/${this.rootDocsFolder()}/` + u.join('/'));
|
|
122
|
+
});
|
|
123
|
+
this.route.fragment.pipe(take(1), takeUntilDestroyed()).subscribe((fragment) => {
|
|
124
|
+
if (fragment) {
|
|
125
|
+
this.fragmentId = fragment;
|
|
126
|
+
afterNextRender(() => {
|
|
127
|
+
this.cdRef.detectChanges();
|
|
128
|
+
const fgm = document.getElementById(fragment);
|
|
129
|
+
fgm?.scrollIntoView();
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
});
|
|
121
133
|
}
|
|
122
134
|
ngOnInit() {
|
|
123
|
-
this.subscription = this.route.url.subscribe((u) => {
|
|
124
|
-
this._loadMdContent(`/${this.rootDocsFolder}/` + u.join('/'));
|
|
125
|
-
});
|
|
126
135
|
/**
|
|
127
136
|
* callback for heading renderer. It will be called for each heading in the markdown.
|
|
128
|
-
*
|
|
129
|
-
* @param text the encoded heading text
|
|
130
|
-
* @param level the heading level
|
|
131
|
-
* @param raw the raw heading text (decoded)
|
|
132
137
|
*/
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
// const newHeader = `<h${depth} id="${raw}">${text}</h${depth}>`;
|
|
137
|
-
// if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
|
|
138
|
-
// this.headers.push({ id: raw, label: raw, level: depth });
|
|
139
|
-
// }
|
|
140
|
-
// return newHeader;
|
|
141
|
-
// }
|
|
142
|
-
// return `<h${depth}>${text}</h${depth}>`;
|
|
143
|
-
// };
|
|
144
|
-
this.markdownService.renderer.heading = (text, level, raw) => {
|
|
145
|
-
if (level === 2 || level === 3) {
|
|
146
|
-
const newHeader = `<h${level} id="${raw}">${text}</h${level}>`;
|
|
138
|
+
this.markdownService.renderer.heading = ({ raw, text, depth }) => {
|
|
139
|
+
if (depth === 2 || depth === 3) {
|
|
140
|
+
const newHeader = `<h${depth} id="${raw}">${text}</h${depth}>`;
|
|
147
141
|
if (text.indexOf('<a ') === -1 && text.indexOf('<em>') === -1) {
|
|
148
|
-
this.headers.push({ id: raw, label: raw, level:
|
|
142
|
+
this.headers.push({ id: raw, label: raw, level: depth });
|
|
149
143
|
}
|
|
150
144
|
return newHeader;
|
|
151
145
|
}
|
|
152
|
-
return `<h${
|
|
146
|
+
return `<h${depth}>${text}</h${depth}>`;
|
|
153
147
|
};
|
|
154
|
-
// this.markdownService.renderer.heading = ({ text, level, raw }: Tokens.Heading) => {
|
|
155
|
-
// const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
|
|
156
|
-
// return '<h' + level + '>' +
|
|
157
|
-
// '<a name="' + escapedText + '" class="anchor" href="#' + escapedText + '">' +
|
|
158
|
-
// '<span class="header-link"></span>' +
|
|
159
|
-
// '</a>' + text +
|
|
160
|
-
// '</h' + level + '>';
|
|
161
|
-
// };
|
|
162
148
|
}
|
|
163
149
|
ngAfterViewInit() {
|
|
164
|
-
|
|
165
|
-
if (fragment) {
|
|
166
|
-
setTimeout(() => {
|
|
167
|
-
this.fragmentId = fragment;
|
|
168
|
-
this.cdRef.detectChanges();
|
|
169
|
-
const fgm = document.getElementById(fragment);
|
|
170
|
-
fgm?.scrollIntoView();
|
|
171
|
-
}, 1);
|
|
172
|
-
}
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
ngOnDestroy() {
|
|
176
|
-
if (this.subscription) {
|
|
177
|
-
this.subscription.unsubscribe();
|
|
178
|
-
}
|
|
150
|
+
// Fragment scrolling is handled in constructor via afterNextRender
|
|
179
151
|
}
|
|
180
152
|
onNavClick(fragmentId) {
|
|
181
153
|
this._scrollToFragment(fragmentId);
|
|
@@ -186,25 +158,24 @@ class DocPageDevGuideComponent {
|
|
|
186
158
|
const pathNameArray = currentUrl.pathname.split('/');
|
|
187
159
|
this.headers = [];
|
|
188
160
|
if (url) {
|
|
189
|
-
mdPath = url.
|
|
161
|
+
mdPath = url.substring(1);
|
|
190
162
|
}
|
|
191
163
|
else {
|
|
192
164
|
mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
|
|
193
165
|
}
|
|
194
166
|
contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
|
|
195
|
-
if (pathNameArray[1] !== this.showcaseName) {
|
|
167
|
+
if (pathNameArray[1] !== this.showcaseName()) {
|
|
196
168
|
contextRoot += `/${pathNameArray[1]}`;
|
|
197
169
|
}
|
|
198
170
|
const filePath = `${contextRoot}/assets/${mdPath}.md`;
|
|
199
|
-
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder}`))).subscribe((md) => {
|
|
171
|
+
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder()}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder()}`))).subscribe((md) => {
|
|
200
172
|
this.markdown = md;
|
|
201
173
|
this.cdRef.detectChanges();
|
|
202
174
|
const top = document.getElementById('top');
|
|
203
|
-
top
|
|
175
|
+
top?.scrollIntoView();
|
|
204
176
|
});
|
|
205
177
|
}
|
|
206
178
|
_scrollToFragment(fragmentId) {
|
|
207
|
-
// forcing reload when deep link with fragment
|
|
208
179
|
this.router.onSameUrlNavigation = 'reload';
|
|
209
180
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
|
|
210
181
|
if (fragmentId) {
|
|
@@ -216,24 +187,17 @@ class DocPageDevGuideComponent {
|
|
|
216
187
|
});
|
|
217
188
|
}
|
|
218
189
|
}
|
|
219
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
220
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageDevGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageDevGuideComponent, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide", inputs: { rootDocsFolder: { classPropertyName: "rootDocsFolder", publicName: "rootDocsFolder", isSignal: true, isRequired: false, transformFunction: null }, showcaseName: { classPropertyName: "showcaseName", publicName: "showcaseName", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-doc-page" }, ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\" />\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i2$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
221
192
|
}
|
|
222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
|
|
223
194
|
type: Component,
|
|
224
|
-
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, imports: [
|
|
195
|
+
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
225
196
|
NgClass,
|
|
226
197
|
...EUI_PAGE,
|
|
227
|
-
MarkdownModule,
|
|
228
|
-
], 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\"
|
|
229
|
-
}], propDecorators: {
|
|
230
|
-
type: HostBinding,
|
|
231
|
-
args: ['class']
|
|
232
|
-
}], rootDocsFolder: [{
|
|
233
|
-
type: Input
|
|
234
|
-
}], showcaseName: [{
|
|
235
|
-
type: Input
|
|
236
|
-
}] } });
|
|
198
|
+
MarkdownModule,
|
|
199
|
+
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\" />\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
200
|
+
}], ctorParameters: () => [], propDecorators: { rootDocsFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootDocsFolder", required: false }] }], showcaseName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcaseName", required: false }] }] } });
|
|
237
201
|
|
|
238
202
|
const polyfillsFile = 'import \'zone.js\';';
|
|
239
203
|
const mainFile = (moduleName, componentName) => `
|
|
@@ -244,7 +208,7 @@ import { BrowserModule${!moduleName ? ', bootstrapApplication' : ''} } from '@an
|
|
|
244
208
|
import { InjectionToken, ${!moduleName ? 'importProvidersFrom' : 'NgModule'} } from '@angular/core';
|
|
245
209
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
246
210
|
import { reducers as coreReducers, CoreModule, EUI_CONFIG_TOKEN } from '@eui/core';
|
|
247
|
-
import {
|
|
211
|
+
import { provideTranslateService, TranslatePipe } from '@ngx-translate/core';
|
|
248
212
|
|
|
249
213
|
${moduleName ? `import { ${componentName}, ${moduleName} } from './component';` : `import { ${componentName} } from './component';`}
|
|
250
214
|
|
|
@@ -255,10 +219,10 @@ ${moduleName ? `
|
|
|
255
219
|
imports: [
|
|
256
220
|
BrowserModule,
|
|
257
221
|
CoreModule.forRoot(),
|
|
258
|
-
TranslateModule.forRoot(),
|
|
259
222
|
${moduleName},
|
|
260
223
|
],
|
|
261
224
|
providers: [
|
|
225
|
+
provideTranslateService(),
|
|
262
226
|
provideHttpClient(withInterceptorsFromDi()),
|
|
263
227
|
{
|
|
264
228
|
provide: REDUCER_TOKEN,
|
|
@@ -313,8 +277,8 @@ bootstrapApplication(${componentName}, {
|
|
|
313
277
|
BrowserAnimationsModule,
|
|
314
278
|
BrowserModule,
|
|
315
279
|
CoreModule.forRoot(),
|
|
316
|
-
TranslateModule.forRoot(),
|
|
317
280
|
),
|
|
281
|
+
provideTranslateService(),
|
|
318
282
|
],
|
|
319
283
|
});
|
|
320
284
|
`}
|
|
@@ -326,7 +290,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
|
326
290
|
import { RouterModule } from '@angular/router';
|
|
327
291
|
import { APP_BASE_HREF } from '@angular/common';
|
|
328
292
|
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
|
329
|
-
import {
|
|
293
|
+
import { provideTranslateService, TranslatePipe } from '@ngx-translate/core';
|
|
330
294
|
import { FormsModule } from '@angular/forms';
|
|
331
295
|
import { CommonModule } from '@angular/common';
|
|
332
296
|
import { EuiAllModule } from '@eui/components';
|
|
@@ -355,13 +319,13 @@ export const REDUCER_TOKEN = new InjectionToken<any>('Registered Reducers');
|
|
|
355
319
|
RouterModule.forRoot([]),
|
|
356
320
|
EuiCoreModule.forRoot(),
|
|
357
321
|
EffectsModule.forRoot([...CoreModuleEffects]),
|
|
358
|
-
TranslateModule.forRoot(translateConfig),
|
|
359
322
|
` +
|
|
360
323
|
m.map((i) => `${i.name},`).join('') +
|
|
361
324
|
`
|
|
362
325
|
],
|
|
363
326
|
declarations: [${componentName}],
|
|
364
327
|
providers: [
|
|
328
|
+
provideTranslateService(translateConfig),
|
|
365
329
|
provideHttpClient(withInterceptorsFromDi()),
|
|
366
330
|
{
|
|
367
331
|
provide: REDUCER_TOKEN,
|
|
@@ -713,10 +677,10 @@ class StackblitzService {
|
|
|
713
677
|
getCurrentShowcaseEuiVersion() {
|
|
714
678
|
return lastValueFrom(this.http.get('assets/app-metadata.json', { responseType: 'json' })).then((res) => res?.appVersion || 'latest');
|
|
715
679
|
}
|
|
716
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
717
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
680
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: StackblitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
681
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: StackblitzService, providedIn: 'root' }); }
|
|
718
682
|
}
|
|
719
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
683
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: StackblitzService, decorators: [{
|
|
720
684
|
type: Injectable,
|
|
721
685
|
args: [{
|
|
722
686
|
providedIn: 'root',
|
|
@@ -725,7 +689,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
725
689
|
|
|
726
690
|
class EuiCodeHighlighterDirective {
|
|
727
691
|
constructor() {
|
|
728
|
-
this.code = input(
|
|
692
|
+
this.code = input(/* @ts-ignore */
|
|
693
|
+
...(ngDevMode ? [undefined, { debugName: "code" }] : /* istanbul ignore next */ []));
|
|
729
694
|
this.el = inject(ElementRef);
|
|
730
695
|
this.renderer = inject(Renderer2);
|
|
731
696
|
effect(() => {
|
|
@@ -744,10 +709,10 @@ class EuiCodeHighlighterDirective {
|
|
|
744
709
|
window['Prism'].highlightElement(this.el.nativeElement);
|
|
745
710
|
}
|
|
746
711
|
}
|
|
747
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
748
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
712
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
713
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EuiCodeHighlighterDirective, isStandalone: true, selector: "[euiCode]", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
749
714
|
}
|
|
750
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
715
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
|
|
751
716
|
type: Directive,
|
|
752
717
|
args: [{
|
|
753
718
|
selector: '[euiCode]',
|
|
@@ -756,13 +721,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
756
721
|
|
|
757
722
|
class DocSampleComponent {
|
|
758
723
|
constructor() {
|
|
759
|
-
this.id = ''
|
|
760
|
-
|
|
761
|
-
this.
|
|
762
|
-
|
|
763
|
-
this.
|
|
764
|
-
|
|
765
|
-
this.
|
|
724
|
+
this.id = input('', /* @ts-ignore */
|
|
725
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
726
|
+
this.label = input('', /* @ts-ignore */
|
|
727
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
728
|
+
this.category = input(undefined, /* @ts-ignore */
|
|
729
|
+
...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
|
|
730
|
+
this.description = input(undefined, /* @ts-ignore */
|
|
731
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
732
|
+
this.defaultValue = input(undefined, /* @ts-ignore */
|
|
733
|
+
...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
|
|
734
|
+
this.styleClass = input('', /* @ts-ignore */
|
|
735
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
736
|
+
this.renderPlayground = input(null, { ...(ngDevMode ? { debugName: "renderPlayground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
737
|
+
this.isCodeButtonVisible = input(true, { ...(ngDevMode ? { debugName: "isCodeButtonVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
738
|
+
this.isInnerSection = input(false, { ...(ngDevMode ? { debugName: "isInnerSection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
766
739
|
this.isCodeLoaded = false;
|
|
767
740
|
this.isCodeLoading = false;
|
|
768
741
|
this.isCodeExpanded = false;
|
|
@@ -777,11 +750,6 @@ class DocSampleComponent {
|
|
|
777
750
|
this.clipboard = inject(Clipboard);
|
|
778
751
|
this.router = inject(Router);
|
|
779
752
|
}
|
|
780
|
-
ngAfterContentInit() {
|
|
781
|
-
if (!this.label) {
|
|
782
|
-
this.label = this.id;
|
|
783
|
-
}
|
|
784
|
-
}
|
|
785
753
|
copyCurrentUrlToClipboard(id) {
|
|
786
754
|
try {
|
|
787
755
|
const baseDomain = window?.location?.origin;
|
|
@@ -843,15 +811,16 @@ class DocSampleComponent {
|
|
|
843
811
|
*/
|
|
844
812
|
onStackblitzOpen() {
|
|
845
813
|
this.loadCodeFiles().subscribe(() => {
|
|
846
|
-
this.sb.openStackBlitzWithFiles(this.sampleFiles.map(f => ({ name: f.name, content: f.content })), 'eUI Playground', this.id);
|
|
814
|
+
this.sb.openStackBlitzWithFiles(this.sampleFiles.map(f => ({ name: f.name, content: f.content })), 'eUI Playground', this.id());
|
|
847
815
|
});
|
|
848
816
|
}
|
|
849
817
|
/**
|
|
850
818
|
* returns whenever playground should render. Input has precedence over Configuration service
|
|
851
819
|
*/
|
|
852
820
|
shouldRenderPlayground() {
|
|
853
|
-
|
|
854
|
-
|
|
821
|
+
const renderPlayground = this.renderPlayground();
|
|
822
|
+
return renderPlayground === undefined || renderPlayground === null ?
|
|
823
|
+
this.conf.configuration().renderPlayground : renderPlayground;
|
|
855
824
|
}
|
|
856
825
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
857
826
|
_getComponent(id) {
|
|
@@ -927,7 +896,7 @@ class DocSampleComponent {
|
|
|
927
896
|
}
|
|
928
897
|
samplePathArray = samplePathArray.reverse();
|
|
929
898
|
samplePathArray.push('samples');
|
|
930
|
-
samplePathArray.push(this.id);
|
|
899
|
+
samplePathArray.push(this.id());
|
|
931
900
|
return `assets/samples/${samplePathArray.join('/')}`;
|
|
932
901
|
}
|
|
933
902
|
getFileLabel(name, type) {
|
|
@@ -941,9 +910,7 @@ class DocSampleComponent {
|
|
|
941
910
|
return languages[type] || 'language-markup';
|
|
942
911
|
}
|
|
943
912
|
/**
|
|
944
|
-
* filter out the content between the pattern below in both html and ts files.
|
|
945
|
-
* exclude some part of the code from being rendered in the code sample or stackblitz but we still want to keep
|
|
946
|
-
* it in the actual file for other purposes (e.g. for testing, or for rendering in the playground but not in the code sample)
|
|
913
|
+
* filter out the content between the pattern below in both html and ts files.
|
|
947
914
|
* @param content the content of the file to filter out the exclude content
|
|
948
915
|
*/
|
|
949
916
|
filterOutExcludeContent(content) {
|
|
@@ -951,95 +918,99 @@ class DocSampleComponent {
|
|
|
951
918
|
const patternTS = /\n?\/\/\s*EXCLUDE_START[\s\S]*?\/\/\s*EXCLUDE_END\n?/g;
|
|
952
919
|
return content.replace(patternHtml, '').replace(patternTS, '');
|
|
953
920
|
}
|
|
954
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
955
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
921
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocSampleComponent, isStandalone: true, selector: "eui-showcase-doc-sample", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, renderPlayground: { classPropertyName: "renderPlayground", publicName: "renderPlayground", isSignal: true, isRequired: false, transformFunction: null }, isCodeButtonVisible: { classPropertyName: "isCodeButtonVisible", publicName: "isCodeButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, isInnerSection: { classPropertyName: "isInnerSection", publicName: "isInnerSection", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-sample" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection()\">\n {{ label() || id() }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n aria-label=\"Click to copy link url to keyboard\"\n (click)=\"copyCurrentUrlToClipboard(id())\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n </button>\n </div>\n @if (shouldRenderPlayground()) {\n <div class=\"doc-sample-title__items eui-u-mr-s\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"eui-flash\" />\n </button>\n }\n </div>\n }\n <div class=\"doc-sample-title__items\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n @if (isCodeLoading) {\n <eui-icon-svg isLoading />\n }\n @if (!isCodeExpanded) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded) {\n <span euiLabel>Hide Code</span>\n }\n <eui-icon-svg icon=\"eui-code\" />\n </button>\n }\n </div>\n</div>\n\n@if(isCodeExpanded) {\n <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n <eui-card-content>\n <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n @for (file of sampleFiles; track file.name) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>{{ file.label }}</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code [class]=\"getCodeLanguage(file.type)\" euiCode>{{ file.type === 'typescript' ? filterOutModuleAndImports(file.content) : file.content }}</code></pre>\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n}\n\n<ng-content />\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-5xl);margin-top:var(--eui-s-10xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-divider)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;font:var(--eui-f-xl-semi-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-text-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;margin:var(--eui-s-9xl) 0 var(--eui-s-xs) 0;width:auto;display:table;color:var(--eui-c-info);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);font:var(--eui-f)!important}\n"], dependencies: [{ kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i2$3.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
956
923
|
}
|
|
957
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSampleComponent, decorators: [{
|
|
958
925
|
type: Component,
|
|
959
|
-
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, imports: [
|
|
960
|
-
CommonModule,
|
|
926
|
+
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, host: { class: 'eui-showcase-doc-sample' }, imports: [
|
|
961
927
|
...EUI_TABS,
|
|
962
928
|
...EUI_LABEL,
|
|
963
929
|
...EUI_CARD,
|
|
964
930
|
...EUI_ICON,
|
|
965
931
|
...EUI_BUTTON,
|
|
966
932
|
EuiCodeHighlighterDirective,
|
|
967
|
-
], template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n {{ label }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n aria-label=\"Click to copy link url to keyboard\"\n (click)=\"copyCurrentUrlToClipboard(id)\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n </button>\n </div>\n
|
|
968
|
-
}], propDecorators: { id: [{
|
|
969
|
-
type: Input
|
|
970
|
-
}], label: [{
|
|
971
|
-
type: Input
|
|
972
|
-
}], category: [{
|
|
973
|
-
type: Input
|
|
974
|
-
}], description: [{
|
|
975
|
-
type: Input
|
|
976
|
-
}], defaultValue: [{
|
|
977
|
-
type: Input
|
|
978
|
-
}], styleClass: [{
|
|
979
|
-
type: Input
|
|
980
|
-
}], renderPlayground: [{
|
|
981
|
-
type: Input,
|
|
982
|
-
args: [{ transform: booleanAttribute }]
|
|
983
|
-
}], isCodeButtonVisible: [{
|
|
984
|
-
type: Input,
|
|
985
|
-
args: [{ transform: booleanAttribute }]
|
|
986
|
-
}], isInnerSection: [{
|
|
987
|
-
type: Input,
|
|
988
|
-
args: [{ transform: booleanAttribute }]
|
|
989
|
-
}], classes: [{
|
|
990
|
-
type: HostBinding,
|
|
991
|
-
args: ['class']
|
|
992
|
-
}] } });
|
|
933
|
+
], template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection()\">\n {{ label() || id() }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n aria-label=\"Click to copy link url to keyboard\"\n (click)=\"copyCurrentUrlToClipboard(id())\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n </button>\n </div>\n @if (shouldRenderPlayground()) {\n <div class=\"doc-sample-title__items eui-u-mr-s\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"eui-flash\" />\n </button>\n }\n </div>\n }\n <div class=\"doc-sample-title__items\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n @if (isCodeLoading) {\n <eui-icon-svg isLoading />\n }\n @if (!isCodeExpanded) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded) {\n <span euiLabel>Hide Code</span>\n }\n <eui-icon-svg icon=\"eui-code\" />\n </button>\n }\n </div>\n</div>\n\n@if(isCodeExpanded) {\n <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n <eui-card-content>\n <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n @for (file of sampleFiles; track file.name) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>{{ file.label }}</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code [class]=\"getCodeLanguage(file.type)\" euiCode>{{ file.type === 'typescript' ? filterOutModuleAndImports(file.content) : file.content }}</code></pre>\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n}\n\n<ng-content />\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-5xl);margin-top:var(--eui-s-10xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-divider)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;font:var(--eui-f-xl-semi-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-text-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;margin:var(--eui-s-9xl) 0 var(--eui-s-xs) 0;width:auto;display:table;color:var(--eui-c-info);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);font:var(--eui-f)!important}\n"] }]
|
|
934
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], renderPlayground: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderPlayground", required: false }] }], isCodeButtonVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCodeButtonVisible", required: false }] }], isInnerSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInnerSection", required: false }] }] } });
|
|
993
935
|
|
|
994
936
|
class DocSectionComponent {
|
|
995
937
|
constructor() {
|
|
996
|
-
this.
|
|
997
|
-
|
|
998
|
-
this.label = ''
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
}
|
|
1006
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1007
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: DocSectionComponent, isStandalone: true, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div id=\"sections\" class=\"doc-section-title\">{{label}}</div>\n<!-- <h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3\">{{ label }}</h4> -->\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-7xl);padding:var(--eui-s-m)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-divider-light);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-divider);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
938
|
+
this.id = input('', /* @ts-ignore */
|
|
939
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
940
|
+
this.label = input('', /* @ts-ignore */
|
|
941
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
942
|
+
this.styleClass = input('', /* @ts-ignore */
|
|
943
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
944
|
+
}
|
|
945
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
946
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: DocSectionComponent, isStandalone: true, selector: "eui-showcase-doc-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-section" }, ngImport: i0, template: "<div id=\"sections\" class=\"doc-section-title\">{{label() || id()}}</div>\n\n<ng-content />\n", styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-7xl);padding:var(--eui-s-m)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-divider-light);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-divider);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1008
947
|
}
|
|
1009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionComponent, decorators: [{
|
|
1010
949
|
type: Component,
|
|
1011
|
-
args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None,
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
}], id: [{
|
|
1016
|
-
type: Input
|
|
1017
|
-
}], label: [{
|
|
1018
|
-
type: Input
|
|
1019
|
-
}], styleClass: [{
|
|
1020
|
-
type: Input
|
|
1021
|
-
}] } });
|
|
950
|
+
args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None, host: {
|
|
951
|
+
class: 'eui-showcase-doc-section',
|
|
952
|
+
}, template: "<div id=\"sections\" class=\"doc-section-title\">{{label() || id()}}</div>\n\n<ng-content />\n", styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-7xl);padding:var(--eui-s-m)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-divider-light);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-divider);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"] }]
|
|
953
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
|
|
1022
954
|
|
|
1023
955
|
class DocPageComponent {
|
|
1024
956
|
constructor() {
|
|
1025
|
-
this.
|
|
1026
|
-
|
|
1027
|
-
this.
|
|
1028
|
-
|
|
1029
|
-
this.
|
|
1030
|
-
|
|
1031
|
-
this.
|
|
1032
|
-
this.
|
|
1033
|
-
this.
|
|
1034
|
-
this.
|
|
957
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
958
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
959
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
960
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
961
|
+
this.subLabel = input(undefined, /* @ts-ignore */
|
|
962
|
+
...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
|
|
963
|
+
this.isNotReadyInput = input(false, { ...(ngDevMode ? { debugName: "isNotReadyInput" } : /* istanbul ignore next */ {}), alias: 'isNotReady' });
|
|
964
|
+
this.isDeprecatedInput = input(false, { ...(ngDevMode ? { debugName: "isDeprecatedInput" } : /* istanbul ignore next */ {}), alias: 'isDeprecated' });
|
|
965
|
+
this.isLegacyInput = input(false, { ...(ngDevMode ? { debugName: "isLegacyInput" } : /* istanbul ignore next */ {}), alias: 'isLegacy' });
|
|
966
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
967
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
968
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
969
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
970
|
+
this.isNavigationVisible = model(true, /* @ts-ignore */
|
|
971
|
+
...(ngDevMode ? [{ debugName: "isNavigationVisible" }] : /* istanbul ignore next */ []));
|
|
972
|
+
this.hasApi = input(true, /* @ts-ignore */
|
|
973
|
+
...(ngDevMode ? [{ debugName: "hasApi" }] : /* istanbul ignore next */ []));
|
|
974
|
+
this.hasA11y = input(true, /* @ts-ignore */
|
|
975
|
+
...(ngDevMode ? [{ debugName: "hasA11y" }] : /* istanbul ignore next */ []));
|
|
976
|
+
this.customApiUrl = input(null, /* @ts-ignore */
|
|
977
|
+
...(ngDevMode ? [{ debugName: "customApiUrl" }] : /* istanbul ignore next */ []));
|
|
978
|
+
// Writable signals for properties that are both input-driven and internally mutated
|
|
979
|
+
this.isNotReady = signal(false, /* @ts-ignore */
|
|
980
|
+
...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
|
|
981
|
+
this.isDeprecated = signal(false, /* @ts-ignore */
|
|
982
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
983
|
+
this.isLegacy = signal(false, /* @ts-ignore */
|
|
984
|
+
...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
|
|
1035
985
|
this.isLoading = true;
|
|
1036
986
|
this.isNavClicked = true;
|
|
1037
987
|
this.hasCategories = false;
|
|
1038
988
|
this.categories = [];
|
|
1039
|
-
this.scrollObserver = null;
|
|
1040
989
|
this.scrollHandler = null;
|
|
1041
990
|
this.scrollContainer = null;
|
|
991
|
+
this.isDestroyed = false;
|
|
992
|
+
this.samples = contentChildren(DocSampleComponent, { ...(ngDevMode ? { debugName: "samples" } : /* istanbul ignore next */ {}), descendants: true });
|
|
993
|
+
this.sections = contentChildren(DocSectionComponent, { ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), descendants: true });
|
|
994
|
+
this.pageOverviewContent = contentChildren(forwardRef(() => DocPageOverviewContentDirective), /* @ts-ignore */
|
|
995
|
+
...(ngDevMode ? [{ debugName: "pageOverviewContent" }] : /* istanbul ignore next */ []));
|
|
996
|
+
this.pageOverviewDefaultContent = contentChildren(forwardRef(() => DocPageOverviewDefaultContentDirective), /* @ts-ignore */
|
|
997
|
+
...(ngDevMode ? [{ debugName: "pageOverviewDefaultContent" }] : /* istanbul ignore next */ []));
|
|
998
|
+
this.pageSamplesContent = contentChildren(forwardRef(() => DocPageSamplesContentDirective), /* @ts-ignore */
|
|
999
|
+
...(ngDevMode ? [{ debugName: "pageSamplesContent" }] : /* istanbul ignore next */ []));
|
|
1000
|
+
this.pageSectionsContent = contentChildren(forwardRef(() => DocPageSectionsContentDirective), /* @ts-ignore */
|
|
1001
|
+
...(ngDevMode ? [{ debugName: "pageSectionsContent" }] : /* istanbul ignore next */ []));
|
|
1002
|
+
this.pageInteractiveContent = contentChildren(forwardRef(() => DocPageInteractiveContentDirective), /* @ts-ignore */
|
|
1003
|
+
...(ngDevMode ? [{ debugName: "pageInteractiveContent" }] : /* istanbul ignore next */ []));
|
|
1004
|
+
this.pageAccessibilityContent = contentChildren(forwardRef(() => DocPageAccessibilityContentDirective), /* @ts-ignore */
|
|
1005
|
+
...(ngDevMode ? [{ debugName: "pageAccessibilityContent" }] : /* istanbul ignore next */ []));
|
|
1006
|
+
this.pageApiContent = contentChildren(forwardRef(() => DocPageApiContentDirective), /* @ts-ignore */
|
|
1007
|
+
...(ngDevMode ? [{ debugName: "pageApiContent" }] : /* istanbul ignore next */ []));
|
|
1008
|
+
this.pageThemingContent = contentChildren(forwardRef(() => DocPageThemingContentDirective), /* @ts-ignore */
|
|
1009
|
+
...(ngDevMode ? [{ debugName: "pageThemingContent" }] : /* istanbul ignore next */ []));
|
|
1010
|
+
this.tabsContent = viewChild('tabsContent', /* @ts-ignore */
|
|
1011
|
+
...(ngDevMode ? [{ debugName: "tabsContent" }] : /* istanbul ignore next */ []));
|
|
1042
1012
|
this.sanitizer = inject(DomSanitizer);
|
|
1013
|
+
this.scrollObserver = null;
|
|
1043
1014
|
this.CATEGORIES_DEF = [
|
|
1044
1015
|
{ index: 0, id: 'Base' },
|
|
1045
1016
|
{ index: 10, id: 'Variants' },
|
|
@@ -1057,35 +1028,47 @@ class DocPageComponent {
|
|
|
1057
1028
|
this.asService = inject(EuiAppShellService);
|
|
1058
1029
|
this.cdr = inject(ChangeDetectorRef);
|
|
1059
1030
|
this.ngZone = inject(NgZone);
|
|
1031
|
+
this.destroyRef = inject(DestroyRef);
|
|
1032
|
+
this.injector = inject(Injector);
|
|
1060
1033
|
}
|
|
1061
1034
|
ngOnInit() {
|
|
1062
|
-
|
|
1035
|
+
// Sync input signals to writable signals
|
|
1036
|
+
if (this.isNotReadyInput())
|
|
1037
|
+
this.isNotReady.set(true);
|
|
1038
|
+
if (this.isDeprecatedInput())
|
|
1039
|
+
this.isDeprecated.set(true);
|
|
1040
|
+
if (this.isLegacyInput())
|
|
1041
|
+
this.isLegacy.set(true);
|
|
1042
|
+
this.destroyRef.onDestroy(() => this.isDestroyed = true);
|
|
1043
|
+
afterNextRender(() => {
|
|
1063
1044
|
this.asService.isBlockDocumentActive = true;
|
|
1064
|
-
});
|
|
1045
|
+
}, { injector: this.injector });
|
|
1065
1046
|
this.appMetadata = this.asService.state.appMetadata;
|
|
1066
|
-
|
|
1067
|
-
|
|
1047
|
+
const id = this.id();
|
|
1048
|
+
if (id && !this.label()) {
|
|
1049
|
+
// label is a signal, but it's an input - we can't mutate it.
|
|
1050
|
+
// The template already handles id() as fallback via label() || id()
|
|
1068
1051
|
}
|
|
1069
1052
|
this.fragmentId = this.route.snapshot.fragment;
|
|
1070
1053
|
}
|
|
1071
1054
|
ngAfterViewInit() {
|
|
1072
|
-
//
|
|
1055
|
+
// Getting API url
|
|
1073
1056
|
try {
|
|
1074
1057
|
this.apiUrl = this._getApiUrl();
|
|
1075
|
-
|
|
1058
|
+
afterNextRender(() => {
|
|
1076
1059
|
this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
|
|
1077
|
-
});
|
|
1060
|
+
}, { injector: this.injector });
|
|
1078
1061
|
}
|
|
1079
1062
|
catch (e) {
|
|
1080
|
-
|
|
1063
|
+
// API URL construction failed - non-critical
|
|
1081
1064
|
}
|
|
1082
|
-
|
|
1065
|
+
afterNextRender(() => {
|
|
1083
1066
|
let tab;
|
|
1084
1067
|
let tabIndex;
|
|
1085
1068
|
const sampleTabIndex = 0;
|
|
1086
|
-
if (this.tabsContent) {
|
|
1087
|
-
this.tabsContent
|
|
1088
|
-
if (tabInstance.id === this.fragmentId) {
|
|
1069
|
+
if (this.tabsContent()) {
|
|
1070
|
+
this.tabsContent()?._tabs().forEach((tabInstance, index) => {
|
|
1071
|
+
if (tabInstance.id() === this.fragmentId) {
|
|
1089
1072
|
tabIndex = index;
|
|
1090
1073
|
tab = tabInstance;
|
|
1091
1074
|
}
|
|
@@ -1096,9 +1079,11 @@ class DocPageComponent {
|
|
|
1096
1079
|
}
|
|
1097
1080
|
// constructing categories, if at least one set, if not backward compat with old display
|
|
1098
1081
|
const categoriesJson = {};
|
|
1099
|
-
this.samples.forEach((s) => {
|
|
1082
|
+
this.samples().forEach((s) => {
|
|
1100
1083
|
// "Default" or "_default" sample are always put first in the nav list
|
|
1101
|
-
|
|
1084
|
+
const id = s.id();
|
|
1085
|
+
const category = s.category();
|
|
1086
|
+
if (!category && id !== '_default' && id !== 'Default' && id !== 'default') {
|
|
1102
1087
|
if (!categoriesJson['others']) {
|
|
1103
1088
|
categoriesJson['others'] = [];
|
|
1104
1089
|
categoriesJson['others'].push(s);
|
|
@@ -1108,7 +1093,7 @@ class DocPageComponent {
|
|
|
1108
1093
|
}
|
|
1109
1094
|
}
|
|
1110
1095
|
else {
|
|
1111
|
-
if (
|
|
1096
|
+
if (id === '_default' || id === 'Default' || id === 'default') {
|
|
1112
1097
|
if (!categoriesJson['Base']) {
|
|
1113
1098
|
categoriesJson['Base'] = [];
|
|
1114
1099
|
categoriesJson['Base'].push(s);
|
|
@@ -1119,12 +1104,12 @@ class DocPageComponent {
|
|
|
1119
1104
|
}
|
|
1120
1105
|
else {
|
|
1121
1106
|
this.hasCategories = true;
|
|
1122
|
-
if (!categoriesJson[
|
|
1123
|
-
categoriesJson[
|
|
1124
|
-
categoriesJson[
|
|
1107
|
+
if (!categoriesJson[category]) {
|
|
1108
|
+
categoriesJson[category] = [];
|
|
1109
|
+
categoriesJson[category].push(s);
|
|
1125
1110
|
}
|
|
1126
1111
|
else {
|
|
1127
|
-
categoriesJson[
|
|
1112
|
+
categoriesJson[category].push(s);
|
|
1128
1113
|
}
|
|
1129
1114
|
}
|
|
1130
1115
|
}
|
|
@@ -1136,14 +1121,14 @@ class DocPageComponent {
|
|
|
1136
1121
|
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1137
1122
|
if (existingCategory) {
|
|
1138
1123
|
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => {
|
|
1139
|
-
return a.label.localeCompare(b.label);
|
|
1124
|
+
return a.label().localeCompare(b.label());
|
|
1140
1125
|
});
|
|
1141
1126
|
}
|
|
1142
1127
|
else {
|
|
1143
1128
|
this.categories.push({
|
|
1144
1129
|
name: c,
|
|
1145
1130
|
samples: categoriesJson[c].sort((a, b) => {
|
|
1146
|
-
return a.label.localeCompare(b.label);
|
|
1131
|
+
return a.label().localeCompare(b.label());
|
|
1147
1132
|
}),
|
|
1148
1133
|
});
|
|
1149
1134
|
}
|
|
@@ -1158,9 +1143,9 @@ class DocPageComponent {
|
|
|
1158
1143
|
this.asService.isBlockDocumentActive = false;
|
|
1159
1144
|
this.isLoading = false;
|
|
1160
1145
|
this.isNavClicked = false;
|
|
1161
|
-
// setTimeout(() => this.setupScrollSpy(), 500);
|
|
1146
|
+
// setTimeout(() => this.setupScrollSpy(), 500);
|
|
1162
1147
|
}, 1);
|
|
1163
|
-
});
|
|
1148
|
+
}, { injector: this.injector });
|
|
1164
1149
|
}
|
|
1165
1150
|
getCategoryIndex(name) {
|
|
1166
1151
|
const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
|
|
@@ -1175,53 +1160,10 @@ class DocPageComponent {
|
|
|
1175
1160
|
this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
|
|
1176
1161
|
}
|
|
1177
1162
|
}
|
|
1178
|
-
// disabled as it needs sub samples in correct order on the page according to the sorting we do here
|
|
1179
|
-
// private setupScrollSpy(): void {
|
|
1180
|
-
// // The scroll container is the .eui-page-column__body div inside the first eui-page-column
|
|
1181
|
-
// const hostEl = document.querySelector('.eui-doc-page');
|
|
1182
|
-
// if (!hostEl) return;
|
|
1183
|
-
// const scrollEl = hostEl.querySelector('.eui-page-column__body') as HTMLElement;
|
|
1184
|
-
// if (!scrollEl) return;
|
|
1185
|
-
// this.scrollContainer = scrollEl;
|
|
1186
|
-
// this.scrollHandler = () => {
|
|
1187
|
-
// if (this.isNavClicked) return;
|
|
1188
|
-
// const ids: string[] = [];
|
|
1189
|
-
// ['overview', 'samples', 'accessibility', 'theming', 'interactive'].forEach(id => {
|
|
1190
|
-
// if (document.getElementById(id)) ids.push(id);
|
|
1191
|
-
// });
|
|
1192
|
-
// this.samples?.forEach((s) => {
|
|
1193
|
-
// if (s.id && document.getElementById(s.id)) ids.push(s.id);
|
|
1194
|
-
// });
|
|
1195
|
-
// this.sections?.forEach((s) => {
|
|
1196
|
-
// if (s.id && document.getElementById(s.id)) ids.push(s.id);
|
|
1197
|
-
// });
|
|
1198
|
-
// // Find the section whose top is closest to (but above) the scroll container top
|
|
1199
|
-
// const containerRect = scrollEl.getBoundingClientRect();
|
|
1200
|
-
// let activeId: string | null = null;
|
|
1201
|
-
// let bestDistance = -Infinity;
|
|
1202
|
-
// for (const id of ids) {
|
|
1203
|
-
// const el = document.getElementById(id);
|
|
1204
|
-
// if (!el) continue;
|
|
1205
|
-
// const elTop = el.getBoundingClientRect().top - containerRect.top;
|
|
1206
|
-
// // Pick the last section that scrolled past the top (within 150px offset)
|
|
1207
|
-
// if (elTop <= 150 && elTop > bestDistance) {
|
|
1208
|
-
// bestDistance = elTop;
|
|
1209
|
-
// activeId = id;
|
|
1210
|
-
// }
|
|
1211
|
-
// }
|
|
1212
|
-
// if (activeId && activeId !== this.fragmentId) {
|
|
1213
|
-
// this.ngZone.run(() => {
|
|
1214
|
-
// this.fragmentId = activeId;
|
|
1215
|
-
// this.cdr.markForCheck();
|
|
1216
|
-
// });
|
|
1217
|
-
// }
|
|
1218
|
-
// };
|
|
1219
|
-
// scrollEl.addEventListener('scroll', this.scrollHandler, { passive: true });
|
|
1220
|
-
// }
|
|
1221
1163
|
onTabNavClick(tabId) {
|
|
1222
1164
|
let tabIndex;
|
|
1223
|
-
this.tabsContent
|
|
1224
|
-
if (tabInstance.id === tabId) {
|
|
1165
|
+
this.tabsContent()?._tabs().forEach((tabInstance, index) => {
|
|
1166
|
+
if (tabInstance.id() === tabId) {
|
|
1225
1167
|
tabIndex = index;
|
|
1226
1168
|
}
|
|
1227
1169
|
});
|
|
@@ -1233,29 +1175,65 @@ class DocPageComponent {
|
|
|
1233
1175
|
this.fragmentId = fragmentId;
|
|
1234
1176
|
this.isNavClicked = true;
|
|
1235
1177
|
this._scrollToFragment(this.fragmentId, tabIndex, false, true);
|
|
1236
|
-
// Re-enable scroll spy after navigation settles
|
|
1237
|
-
// setTimeout(() => { this.isNavClicked = false; }, 800);
|
|
1238
1178
|
}
|
|
1239
1179
|
onTabActivate(event) {
|
|
1240
1180
|
if (!this.isLoading && !this.isNavClicked) {
|
|
1241
1181
|
const tabId = event.tab.id;
|
|
1242
|
-
this._scrollToFragment(tabId, event.index, false, false);
|
|
1182
|
+
this._scrollToFragment(tabId(), event.index, false, false);
|
|
1243
1183
|
}
|
|
1244
1184
|
this.isNavClicked = false;
|
|
1245
1185
|
this._scrollNavToSelectedItem();
|
|
1246
1186
|
}
|
|
1187
|
+
_buildCategories() {
|
|
1188
|
+
const categoriesJson = {};
|
|
1189
|
+
this.samples().forEach((s) => {
|
|
1190
|
+
const id = s.id();
|
|
1191
|
+
const category = s.category();
|
|
1192
|
+
const isDefault = id === '_default' || id === 'Default' || id === 'default';
|
|
1193
|
+
if (isDefault) {
|
|
1194
|
+
(categoriesJson['Base'] ??= []).push(s);
|
|
1195
|
+
}
|
|
1196
|
+
else if (category) {
|
|
1197
|
+
this.hasCategories = true;
|
|
1198
|
+
(categoriesJson[category] ??= []).push(s);
|
|
1199
|
+
}
|
|
1200
|
+
else {
|
|
1201
|
+
(categoriesJson['others'] ??= []).push(s);
|
|
1202
|
+
}
|
|
1203
|
+
});
|
|
1204
|
+
Object.keys(categoriesJson).forEach((c) => {
|
|
1205
|
+
const normalizedKey = c.toLowerCase();
|
|
1206
|
+
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1207
|
+
if (existingCategory) {
|
|
1208
|
+
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => a.label().localeCompare(b.label()));
|
|
1209
|
+
}
|
|
1210
|
+
else {
|
|
1211
|
+
this.categories.push({
|
|
1212
|
+
name: c,
|
|
1213
|
+
samples: categoriesJson[c].sort((a, b) => a.label().localeCompare(b.label())),
|
|
1214
|
+
});
|
|
1215
|
+
}
|
|
1216
|
+
});
|
|
1217
|
+
this.categories.sort((a, b) => this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name));
|
|
1218
|
+
const othersIndex = this.categories.findIndex(v => v.name === 'others');
|
|
1219
|
+
if (othersIndex > -1) {
|
|
1220
|
+
this.categories.push(this.categories.splice(othersIndex, 1)[0]);
|
|
1221
|
+
}
|
|
1222
|
+
}
|
|
1247
1223
|
_scrollToFragment(fragmentId, tabIndex, init, changeTab) {
|
|
1248
1224
|
if (init) {
|
|
1249
|
-
|
|
1250
|
-
|
|
1225
|
+
const tabsContent = this.tabsContent();
|
|
1226
|
+
if (tabsContent) {
|
|
1227
|
+
tabsContent.activateTab(tabIndex);
|
|
1251
1228
|
}
|
|
1252
1229
|
}
|
|
1253
1230
|
else {
|
|
1254
1231
|
if (changeTab) {
|
|
1255
1232
|
this.router.onSameUrlNavigation = 'reload';
|
|
1256
1233
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId }).then(() => {
|
|
1257
|
-
|
|
1258
|
-
|
|
1234
|
+
const tabsContent = this.tabsContent();
|
|
1235
|
+
if (tabsContent) {
|
|
1236
|
+
tabsContent.activateTab(tabIndex);
|
|
1259
1237
|
}
|
|
1260
1238
|
});
|
|
1261
1239
|
}
|
|
@@ -1329,21 +1307,9 @@ class DocPageComponent {
|
|
|
1329
1307
|
], [])
|
|
1330
1308
|
: [];
|
|
1331
1309
|
const flatLinks = flatten(this.asService.state.sidebarLinks);
|
|
1332
|
-
|
|
1333
|
-
// console.log('from get component status');
|
|
1334
|
-
// console.log(id);
|
|
1335
|
-
// console.log(flatLinks);
|
|
1336
|
-
// console.log(idBasedCmp);
|
|
1337
|
-
if (idBasedCmp) {
|
|
1338
|
-
return idBasedCmp;
|
|
1339
|
-
}
|
|
1340
|
-
else {
|
|
1341
|
-
const alternateIdBasedCmp = flatLinks.filter((item) => item.alternateId === id)[0];
|
|
1342
|
-
return alternateIdBasedCmp;
|
|
1343
|
-
}
|
|
1310
|
+
return flatLinks.find((item) => item.id === id) ?? flatLinks.find((item) => item.alternateId === id);
|
|
1344
1311
|
}
|
|
1345
1312
|
_getApiUrl() {
|
|
1346
|
-
// console.log('getApiUrl');
|
|
1347
1313
|
const url = window.location;
|
|
1348
1314
|
const protocol = url.protocol;
|
|
1349
1315
|
const host = url.host;
|
|
@@ -1353,7 +1319,7 @@ class DocPageComponent {
|
|
|
1353
1319
|
let category = pathNameArray[pathNameArray.length - 2];
|
|
1354
1320
|
let protocolGen = protocol;
|
|
1355
1321
|
let hostGen = host;
|
|
1356
|
-
|
|
1322
|
+
const cmpType = pathNameArray[pathNameArray.length - 1];
|
|
1357
1323
|
if (host.indexOf('localhost') > -1) {
|
|
1358
1324
|
protocolGen = 'https:';
|
|
1359
1325
|
hostGen = 'euidev.ecdevops.eu';
|
|
@@ -1378,7 +1344,6 @@ class DocPageComponent {
|
|
|
1378
1344
|
if (this.cmp && this.cmp.alternateApiCategory) {
|
|
1379
1345
|
category = this.cmp.alternateApiCategory;
|
|
1380
1346
|
}
|
|
1381
|
-
// console.log(this.cmp);
|
|
1382
1347
|
if (this.cmp) {
|
|
1383
1348
|
switch (this.cmp.status) {
|
|
1384
1349
|
case 'success':
|
|
@@ -1388,20 +1353,19 @@ class DocPageComponent {
|
|
|
1388
1353
|
case 'warning':
|
|
1389
1354
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1390
1355
|
this.stateTypeClass = 'warning';
|
|
1391
|
-
this.isDeprecated
|
|
1356
|
+
this.isDeprecated.set(true);
|
|
1392
1357
|
break;
|
|
1393
1358
|
case 'danger':
|
|
1394
|
-
this.stateLabel = '
|
|
1359
|
+
this.stateLabel = 'will be removed in eUI 21';
|
|
1395
1360
|
this.stateTypeClass = 'danger';
|
|
1396
|
-
this.
|
|
1361
|
+
this.isLegacy.set(true);
|
|
1397
1362
|
break;
|
|
1398
1363
|
case 'info':
|
|
1399
1364
|
this.stateLabel = 'NOT READY';
|
|
1400
1365
|
this.stateTypeClass = 'accent';
|
|
1401
|
-
this.isNotReady
|
|
1366
|
+
this.isNotReady.set(true);
|
|
1402
1367
|
break;
|
|
1403
1368
|
}
|
|
1404
|
-
// construct cmp module import string
|
|
1405
1369
|
if (this.cmp.metadata?.moduleName) {
|
|
1406
1370
|
this.cmpImportModule = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
|
|
1407
1371
|
}
|
|
@@ -1412,39 +1376,33 @@ class DocPageComponent {
|
|
|
1412
1376
|
}
|
|
1413
1377
|
}
|
|
1414
1378
|
catch (e) {
|
|
1415
|
-
|
|
1379
|
+
// Component status resolution failed - non-critical
|
|
1416
1380
|
}
|
|
1417
1381
|
});
|
|
1418
1382
|
const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
|
|
1419
|
-
|
|
1383
|
+
const customApiUrl = this.customApiUrl();
|
|
1384
|
+
return customApiUrl ? `${protocolGen}//${hostGen}/${docTypeRoot}/${customApiUrl}.html` : `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
|
|
1420
1385
|
}
|
|
1421
|
-
_camelCaseString(
|
|
1422
|
-
const stringArray =
|
|
1386
|
+
_camelCaseString(str, separator, first) {
|
|
1387
|
+
const stringArray = str.split(separator);
|
|
1423
1388
|
let result = '';
|
|
1424
|
-
let s;
|
|
1425
1389
|
for (let i = 0; i < stringArray.length; i++) {
|
|
1426
|
-
s = stringArray[i];
|
|
1390
|
+
const s = stringArray[i];
|
|
1427
1391
|
if (i === 0) {
|
|
1428
|
-
|
|
1429
|
-
result += s.substring(0, 1).toUpperCase() + s.substr(1);
|
|
1430
|
-
}
|
|
1431
|
-
else {
|
|
1432
|
-
result += s;
|
|
1433
|
-
}
|
|
1392
|
+
result += first ? s.substring(0, 1).toUpperCase() + s.substring(1) : s;
|
|
1434
1393
|
}
|
|
1435
1394
|
else {
|
|
1436
|
-
result += s.substring(0, 1).toUpperCase() + s.
|
|
1395
|
+
result += s.substring(0, 1).toUpperCase() + s.substring(1);
|
|
1437
1396
|
}
|
|
1438
1397
|
}
|
|
1439
1398
|
return result;
|
|
1440
1399
|
}
|
|
1441
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1442
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isDemoComponentOnly: "isDemoComponentOnly", 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: "pageVisualSpecsContent", predicate: i0.forwardRef(() => DocPageVisualSpecsContentDirective) }, { propertyName: "pagePlaygroundContent", predicate: i0.forwardRef(() => DocPagePlaygroundContentDirective) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label }}\" 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 euiOutline\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isDemoComponentOnly\">\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 <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isDemoComponentOnly\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated || isDemoComponentOnly) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <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 *ngIf=\"pageOverviewContent.length > 0\">\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\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 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\" id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <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=\"pageAccessibilityContent.length !== 0\" id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Accessibility</div>\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 </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageVisualSpecsContent.length > 0\" id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab> \n\n <eui-tab *ngIf=\"pagePlaygroundContent.length > 0\" id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\" id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div 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\" id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent.first.title }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div 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\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li> \n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <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; let i = index\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</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; let i = index\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"pageAccessibilityContent.length !== 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n \n <!-- OPTIONAL TABS-->\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onTabNavClick('theming')\">\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)=\"onTabNavClick('advanced')\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n <li\n *ngIf=\"pageVisualSpecsContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n <li\n *ngIf=\"pagePlaygroundContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li> \n </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; let i = index\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i2$3.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i2$3.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabHeaderLabelComponent, selector: "eui-tab-header-label" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i4.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i4.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i4.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i4.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i4.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i4.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1400
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReadyInput: { classPropertyName: "isNotReadyInput", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecatedInput: { classPropertyName: "isDeprecatedInput", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isLegacyInput: { classPropertyName: "isLegacyInput", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isNavigationVisible: "isNavigationVisibleChange" }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }, { propertyName: "pageVisualSpecsContent", predicate: i0.forwardRef(() => DocPageVisualSpecsContentDirective) }, { propertyName: "pagePlaygroundContent", predicate: i0.forwardRef(() => DocPagePlaygroundContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of samples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabHeaderLabelComponent, selector: "eui-tab-header-label" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1443
1402
|
}
|
|
1444
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageComponent, decorators: [{
|
|
1445
1404
|
type: Component,
|
|
1446
|
-
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, imports: [
|
|
1447
|
-
CommonModule,
|
|
1405
|
+
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
1448
1406
|
DocPageCodeComponent,
|
|
1449
1407
|
EuiCodeHighlighterDirective,
|
|
1450
1408
|
...EUI_ALERT,
|
|
@@ -1452,269 +1410,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
|
|
|
1452
1410
|
...EUI_PAGE,
|
|
1453
1411
|
...EUI_LABEL,
|
|
1454
1412
|
...EUI_CHIP,
|
|
1455
|
-
...EUI_BLOCK_CONTENT,
|
|
1456
|
-
], 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 euiOutline\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isDemoComponentOnly\">\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 <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isDemoComponentOnly\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated || isDemoComponentOnly) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <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 *ngIf=\"pageOverviewContent.length > 0\">\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\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 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\" id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <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=\"pageAccessibilityContent.length !== 0\" id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Accessibility</div>\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 </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageVisualSpecsContent.length > 0\" id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab> \n\n <eui-tab *ngIf=\"pagePlaygroundContent.length > 0\" id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\" id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div 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\" id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent.first.title }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div 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\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li> \n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <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; let i = index\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</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; let i = index\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"pageAccessibilityContent.length !== 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n \n <!-- OPTIONAL TABS-->\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onTabNavClick('theming')\">\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)=\"onTabNavClick('advanced')\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n <li\n *ngIf=\"pageVisualSpecsContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n <li\n *ngIf=\"pagePlaygroundContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li> \n </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; let i = index\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
1457
|
-
}], propDecorators: { cssClass: [{
|
|
1458
|
-
type: HostBinding,
|
|
1459
|
-
args: ['class']
|
|
1460
|
-
}], id: [{
|
|
1461
|
-
type: Input
|
|
1462
|
-
}], label: [{
|
|
1463
|
-
type: Input
|
|
1464
|
-
}], subLabel: [{
|
|
1465
|
-
type: Input
|
|
1466
|
-
}], isNotReady: [{
|
|
1467
|
-
type: Input
|
|
1468
|
-
}], isDeprecated: [{
|
|
1469
|
-
type: Input
|
|
1470
|
-
}], isDemoComponentOnly: [{
|
|
1471
|
-
type: Input
|
|
1472
|
-
}], isLegacy: [{
|
|
1473
|
-
type: Input
|
|
1474
|
-
}], codeFolder: [{
|
|
1475
|
-
type: Input
|
|
1476
|
-
}], showcase: [{
|
|
1477
|
-
type: Input
|
|
1478
|
-
}], isNavigationVisible: [{
|
|
1479
|
-
type: Input
|
|
1480
|
-
}], hasApi: [{
|
|
1481
|
-
type: Input
|
|
1482
|
-
}], hasA11y: [{
|
|
1483
|
-
type: Input
|
|
1484
|
-
}], customApiUrl: [{
|
|
1485
|
-
type: Input
|
|
1486
|
-
}], samples: [{
|
|
1487
|
-
type: ContentChildren,
|
|
1488
|
-
args: [DocSampleComponent, { descendants: true }]
|
|
1489
|
-
}], sections: [{
|
|
1490
|
-
type: ContentChildren,
|
|
1491
|
-
args: [DocSectionComponent, { descendants: true }]
|
|
1492
|
-
}], pageOverviewContent: [{
|
|
1493
|
-
type: ContentChildren,
|
|
1494
|
-
args: [forwardRef(() => DocPageOverviewContentDirective)]
|
|
1495
|
-
}], pageOverviewDefaultContent: [{
|
|
1496
|
-
type: ContentChildren,
|
|
1497
|
-
args: [forwardRef(() => DocPageOverviewDefaultContentDirective)]
|
|
1498
|
-
}], pageSamplesContent: [{
|
|
1499
|
-
type: ContentChildren,
|
|
1500
|
-
args: [forwardRef(() => DocPageSamplesContentDirective)]
|
|
1501
|
-
}], pageSectionsContent: [{
|
|
1502
|
-
type: ContentChildren,
|
|
1503
|
-
args: [forwardRef(() => DocPageSectionsContentDirective)]
|
|
1504
|
-
}], pageInteractiveContent: [{
|
|
1505
|
-
type: ContentChildren,
|
|
1506
|
-
args: [forwardRef(() => DocPageInteractiveContentDirective)]
|
|
1507
|
-
}], pageAccessibilityContent: [{
|
|
1508
|
-
type: ContentChildren,
|
|
1509
|
-
args: [forwardRef(() => DocPageAccessibilityContentDirective)]
|
|
1510
|
-
}], pageApiContent: [{
|
|
1511
|
-
type: ContentChildren,
|
|
1512
|
-
args: [forwardRef(() => DocPageApiContentDirective)]
|
|
1513
|
-
}], pageVisualSpecsContent: [{
|
|
1413
|
+
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of samples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
1414
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReadyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecatedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isLegacyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }, { type: i0.Output, args: ["isNavigationVisibleChange"] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirective), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirective), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirective), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirective), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirective), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirective), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirective), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirective), { isSignal: true }] }], pageVisualSpecsContent: [{
|
|
1514
1415
|
type: ContentChildren,
|
|
1515
1416
|
args: [forwardRef(() => DocPageVisualSpecsContentDirective)]
|
|
1516
1417
|
}], pagePlaygroundContent: [{
|
|
1517
1418
|
type: ContentChildren,
|
|
1518
1419
|
args: [forwardRef(() => DocPagePlaygroundContentDirective)]
|
|
1519
|
-
}],
|
|
1520
|
-
type: ContentChildren,
|
|
1521
|
-
args: [forwardRef(() => DocPageThemingContentDirective)]
|
|
1522
|
-
}], tabsContent: [{
|
|
1523
|
-
type: ViewChild,
|
|
1524
|
-
args: ['tabsContent']
|
|
1525
|
-
}], navContent: [{
|
|
1420
|
+
}], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }], navContent: [{
|
|
1526
1421
|
type: ViewChild,
|
|
1527
1422
|
args: ['navContent']
|
|
1528
1423
|
}] } });
|
|
1529
1424
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1530
1425
|
class DocPageOverviewContentDirective {
|
|
1531
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1532
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1426
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1427
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageOverviewContentDirective, isStandalone: true, selector: "docPageOverview", ngImport: i0 }); }
|
|
1533
1428
|
}
|
|
1534
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
|
|
1535
1430
|
type: Directive,
|
|
1536
1431
|
args: [{ selector: 'docPageOverview' }]
|
|
1537
1432
|
}] });
|
|
1538
1433
|
class DocPageOverviewDefaultContentDirective {
|
|
1539
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1540
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1434
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageOverviewDefaultContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1435
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageOverviewDefaultContentDirective, isStandalone: true, selector: "docPageOverviewDefault", ngImport: i0 }); }
|
|
1541
1436
|
}
|
|
1542
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageOverviewDefaultContentDirective, decorators: [{
|
|
1543
1438
|
type: Directive,
|
|
1544
1439
|
args: [{ selector: 'docPageOverviewDefault' }]
|
|
1545
1440
|
}] });
|
|
1546
1441
|
class DocPageInteractiveContentDirective {
|
|
1547
1442
|
constructor() {
|
|
1548
|
-
this.title = 'ADVANCED EXAMPLES'
|
|
1549
|
-
|
|
1443
|
+
this.title = input('ADVANCED EXAMPLES', /* @ts-ignore */
|
|
1444
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1445
|
+
this.subTitle = input('Advanced use cases', /* @ts-ignore */
|
|
1446
|
+
...(ngDevMode ? [{ debugName: "subTitle" }] : /* istanbul ignore next */ []));
|
|
1550
1447
|
}
|
|
1551
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1552
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1448
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1449
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: DocPageInteractiveContentDirective, isStandalone: true, selector: "docPageInteractive", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1553
1450
|
}
|
|
1554
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
|
|
1555
1452
|
type: Directive,
|
|
1556
1453
|
args: [{ selector: 'docPageInteractive' }]
|
|
1557
|
-
}], propDecorators: { title: [{
|
|
1558
|
-
type: Input
|
|
1559
|
-
}], subTitle: [{
|
|
1560
|
-
type: Input
|
|
1561
|
-
}] } });
|
|
1454
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }] } });
|
|
1562
1455
|
class DocPageSamplesContentDirective {
|
|
1563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1564
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1456
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1457
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageSamplesContentDirective, isStandalone: true, selector: "docPageSamples", ngImport: i0 }); }
|
|
1565
1458
|
}
|
|
1566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
|
|
1567
1460
|
type: Directive,
|
|
1568
1461
|
args: [{ selector: 'docPageSamples' }]
|
|
1569
1462
|
}] });
|
|
1570
1463
|
class DocPageSectionsContentDirective {
|
|
1571
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1572
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1464
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1465
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageSectionsContentDirective, isStandalone: true, selector: "docPageSections", ngImport: i0 }); }
|
|
1573
1466
|
}
|
|
1574
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
|
|
1575
1468
|
type: Directive,
|
|
1576
1469
|
args: [{ selector: 'docPageSections' }]
|
|
1577
1470
|
}] });
|
|
1578
1471
|
class DocPageAccessibilityContentDirective {
|
|
1579
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1580
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1472
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1473
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageAccessibilityContentDirective, isStandalone: true, selector: "docPageAccessibility", ngImport: i0 }); }
|
|
1581
1474
|
}
|
|
1582
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1475
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
|
|
1583
1476
|
type: Directive,
|
|
1584
1477
|
args: [{ selector: 'docPageAccessibility' }]
|
|
1585
1478
|
}] });
|
|
1586
1479
|
class DocPageApiContentDirective {
|
|
1587
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1588
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1480
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1481
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageApiContentDirective, isStandalone: true, selector: "docPageApi", ngImport: i0 }); }
|
|
1589
1482
|
}
|
|
1590
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
|
|
1591
1484
|
type: Directive,
|
|
1592
1485
|
args: [{ selector: 'docPageApi' }]
|
|
1593
1486
|
}] });
|
|
1594
1487
|
class DocPageVisualSpecsContentDirective {
|
|
1595
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1596
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1488
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageVisualSpecsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1489
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageVisualSpecsContentDirective, isStandalone: true, selector: "docPageVisualSpecs", ngImport: i0 }); }
|
|
1597
1490
|
}
|
|
1598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageVisualSpecsContentDirective, decorators: [{
|
|
1599
1492
|
type: Directive,
|
|
1600
1493
|
args: [{ selector: 'docPageVisualSpecs' }]
|
|
1601
1494
|
}] });
|
|
1602
1495
|
class DocPagePlaygroundContentDirective {
|
|
1603
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1604
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1496
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePlaygroundContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1497
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPagePlaygroundContentDirective, isStandalone: true, selector: "docPagePlayground", ngImport: i0 }); }
|
|
1605
1498
|
}
|
|
1606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePlaygroundContentDirective, decorators: [{
|
|
1607
1500
|
type: Directive,
|
|
1608
1501
|
args: [{ selector: 'docPagePlayground' }]
|
|
1609
1502
|
}] });
|
|
1610
1503
|
class DocPageThemingContentDirective {
|
|
1611
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1612
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1504
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1505
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPageThemingContentDirective, isStandalone: true, selector: "docPageTheming", ngImport: i0 }); }
|
|
1613
1506
|
}
|
|
1614
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
|
|
1615
1508
|
type: Directive,
|
|
1616
1509
|
args: [{ selector: 'docPageTheming' }]
|
|
1617
1510
|
}] });
|
|
1618
1511
|
|
|
1619
1512
|
class DocPageCodeFabComponent {
|
|
1620
1513
|
constructor() {
|
|
1621
|
-
this.codeFolder = ''
|
|
1622
|
-
|
|
1623
|
-
this.
|
|
1514
|
+
this.codeFolder = input('', /* @ts-ignore */
|
|
1515
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1516
|
+
this.showcase = input('design-patterns', /* @ts-ignore */
|
|
1517
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
1518
|
+
this.hasContentDialog = input(true, /* @ts-ignore */
|
|
1519
|
+
...(ngDevMode ? [{ debugName: "hasContentDialog" }] : /* istanbul ignore next */ []));
|
|
1520
|
+
this.dialog = viewChild('dialog', /* @ts-ignore */
|
|
1521
|
+
...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
|
|
1624
1522
|
this.asService = inject(EuiAppShellService);
|
|
1625
1523
|
}
|
|
1626
1524
|
toggleCode() {
|
|
1627
|
-
this.dialog
|
|
1525
|
+
this.dialog()?.openDialog();
|
|
1628
1526
|
}
|
|
1629
1527
|
onClose() {
|
|
1630
|
-
this.dialog
|
|
1528
|
+
this.dialog()?.closeDialog();
|
|
1631
1529
|
}
|
|
1632
1530
|
onOpenCode() {
|
|
1633
|
-
// eslint-disable-next-line max-len
|
|
1634
1531
|
const showcaseRoot = 'https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-ux-components/-/blob/master/src/app/features';
|
|
1635
|
-
const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase}/`;
|
|
1636
|
-
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
1532
|
+
const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase()}/`;
|
|
1533
|
+
window.open(sourceRootPath + this.codeFolder(), '_blank');
|
|
1637
1534
|
}
|
|
1638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1639
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1535
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageCodeFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1536
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageCodeFabComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, hasContentDialog: { classPropertyName: "hasContentDialog", publicName: "hasContentDialog", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasContentDialog()) {\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\" />\n </div>\n </div>\n\n <eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n @if (codeFolder()) {\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\" /> VIEW SOURCES\n </button>\n }\n <ng-content />\n <p class=\"eui-u-text-paragraph\">Use the <kbd class=\"eui-u-text-kbd\">View sources</kbd> button to access the code source of the page.</p>\n </eui-dialog>\n\n} @else {\n\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <button class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\" (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" />\n </button>\n </div>\n\n}\n\n", dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$4.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
1640
1537
|
}
|
|
1641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
|
|
1642
1539
|
type: Component,
|
|
1643
1540
|
args: [{ selector: 'eui-showcase-doc-page-code-fab', imports: [
|
|
1644
|
-
CommonModule,
|
|
1645
|
-
EuiTooltipDirective,
|
|
1646
1541
|
...EUI_ICON,
|
|
1647
1542
|
...EUI_DIALOG,
|
|
1648
|
-
...EUI_BUTTON
|
|
1649
|
-
], template: "@if (hasContentDialog) {\n<div class=\"eui-button-fixed eui-u-mb-6xl\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\">\n
|
|
1650
|
-
}], propDecorators: { codeFolder: [{
|
|
1651
|
-
type: Input
|
|
1652
|
-
}], showcase: [{
|
|
1653
|
-
type: Input
|
|
1654
|
-
}], hasContentDialog: [{
|
|
1655
|
-
type: Input
|
|
1656
|
-
}], dialog: [{
|
|
1657
|
-
type: ViewChild,
|
|
1658
|
-
args: ['dialog']
|
|
1659
|
-
}] } });
|
|
1543
|
+
...EUI_BUTTON
|
|
1544
|
+
], template: "@if (hasContentDialog()) {\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\" />\n </div>\n </div>\n\n <eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n @if (codeFolder()) {\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\" /> VIEW SOURCES\n </button>\n }\n <ng-content />\n <p class=\"eui-u-text-paragraph\">Use the <kbd class=\"eui-u-text-kbd\">View sources</kbd> button to access the code source of the page.</p>\n </eui-dialog>\n\n} @else {\n\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <button class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\" (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" />\n </button>\n </div>\n\n}\n\n" }]
|
|
1545
|
+
}], propDecorators: { codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], hasContentDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasContentDialog", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
|
|
1660
1546
|
|
|
1661
1547
|
class DocPageCodeModalComponent {
|
|
1662
1548
|
constructor() {
|
|
1663
|
-
this.width = '95vw'
|
|
1549
|
+
this.width = input('95vw', /* @ts-ignore */
|
|
1550
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
1551
|
+
this.dialog = viewChild('dialog', /* @ts-ignore */
|
|
1552
|
+
...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
|
|
1664
1553
|
this.asService = inject(EuiAppShellService);
|
|
1665
1554
|
}
|
|
1666
1555
|
toggleCode() {
|
|
1667
|
-
this.dialog
|
|
1556
|
+
this.dialog()?.openDialog();
|
|
1668
1557
|
}
|
|
1669
1558
|
onClose() {
|
|
1670
|
-
this.dialog
|
|
1559
|
+
this.dialog()?.closeDialog();
|
|
1671
1560
|
}
|
|
1672
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1673
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1561
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageCodeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1562
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: DocPageCodeModalComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-modal", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiCTAButton (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width()\">\n <ng-content />\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$4.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
|
|
1674
1563
|
}
|
|
1675
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageCodeModalComponent, decorators: [{
|
|
1676
1565
|
type: Component,
|
|
1677
1566
|
args: [{ selector: 'eui-showcase-doc-page-code-modal', imports: [
|
|
1678
|
-
CommonModule,
|
|
1679
1567
|
...EUI_DIALOG,
|
|
1680
1568
|
...EUI_ICON,
|
|
1681
|
-
], template: "<button type=\"button\" euiButton euiCTAButton (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n <ng-content
|
|
1682
|
-
}], propDecorators: { width: [{
|
|
1683
|
-
type: Input
|
|
1684
|
-
}], dialog: [{
|
|
1685
|
-
type: ViewChild,
|
|
1686
|
-
args: ['dialog']
|
|
1687
|
-
}] } });
|
|
1569
|
+
], template: "<button type=\"button\" euiButton euiCTAButton (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width()\">\n <ng-content />\n</eui-dialog>\n" }]
|
|
1570
|
+
}], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
|
|
1688
1571
|
|
|
1689
|
-
/* eslint-disable max-len */
|
|
1690
1572
|
/* eslint-disable */
|
|
1691
1573
|
class DocPagePatternSampleDirective {
|
|
1692
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1693
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1574
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1575
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPagePatternSampleDirective, isStandalone: true, selector: "docPagePatternSample", ngImport: i0 }); }
|
|
1694
1576
|
}
|
|
1695
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1577
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
|
|
1696
1578
|
type: Directive,
|
|
1697
1579
|
args: [{ selector: 'docPagePatternSample' }]
|
|
1698
1580
|
}] });
|
|
1699
1581
|
class DocPagePatternDocDirective {
|
|
1700
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1701
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1582
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1583
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPagePatternDocDirective, isStandalone: true, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
1702
1584
|
}
|
|
1703
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
|
|
1704
1586
|
type: Directive,
|
|
1705
1587
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
1706
1588
|
}] });
|
|
1707
1589
|
class DocPagePatternComponent {
|
|
1708
1590
|
constructor() {
|
|
1709
|
-
this.
|
|
1710
|
-
|
|
1711
|
-
this.
|
|
1591
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1592
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1593
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1594
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1595
|
+
this.anatomyImage = input(undefined, /* @ts-ignore */
|
|
1596
|
+
...(ngDevMode ? [{ debugName: "anatomyImage" }] : /* istanbul ignore next */ []));
|
|
1597
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1598
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1599
|
+
this.dos = input([], /* @ts-ignore */
|
|
1600
|
+
...(ngDevMode ? [{ debugName: "dos" }] : /* istanbul ignore next */ []));
|
|
1601
|
+
this.donts = input([], /* @ts-ignore */
|
|
1602
|
+
...(ngDevMode ? [{ debugName: "donts" }] : /* istanbul ignore next */ []));
|
|
1603
|
+
this.sourceUrl = input(undefined, /* @ts-ignore */
|
|
1604
|
+
...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
1605
|
+
this.figmaUrl = input(undefined, /* @ts-ignore */
|
|
1606
|
+
...(ngDevMode ? [{ debugName: "figmaUrl" }] : /* istanbul ignore next */ []));
|
|
1607
|
+
this.figmaEmbedSrc = input(undefined, /* @ts-ignore */
|
|
1608
|
+
...(ngDevMode ? [{ debugName: "figmaEmbedSrc" }] : /* istanbul ignore next */ []));
|
|
1712
1609
|
this.topPosToStartShowing = 100;
|
|
1713
1610
|
this.tabSelectedIndex = 0;
|
|
1714
1611
|
this.sanitizer = inject(DomSanitizer);
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1612
|
+
effect(() => {
|
|
1613
|
+
const figmaEmbedSrc = this.figmaEmbedSrc();
|
|
1614
|
+
if (figmaEmbedSrc) {
|
|
1615
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(figmaEmbedSrc);
|
|
1616
|
+
}
|
|
1617
|
+
});
|
|
1718
1618
|
}
|
|
1719
1619
|
checkScroll() {
|
|
1720
1620
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
@@ -1725,17 +1625,10 @@ class DocPagePatternComponent {
|
|
|
1725
1625
|
this.isShowGoTop = false;
|
|
1726
1626
|
}
|
|
1727
1627
|
}
|
|
1728
|
-
|
|
1729
|
-
if (this.figmaEmbedSrc) {
|
|
1730
|
-
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
|
|
1731
|
-
const iFrame = document.getElementById('iframe-figma');
|
|
1732
|
-
}
|
|
1733
|
-
}
|
|
1734
|
-
onNavigateToCode(event) {
|
|
1735
|
-
// eslint-disable-next-line max-len
|
|
1628
|
+
onNavigateToCode() {
|
|
1736
1629
|
const showcase = 'ux-patterns';
|
|
1737
1630
|
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${showcase}/-/blob/master/src/app/features/`;
|
|
1738
|
-
window.open(sourceRootPath + this.sourceUrl, '_blank');
|
|
1631
|
+
window.open(sourceRootPath + this.sourceUrl(), '_blank');
|
|
1739
1632
|
}
|
|
1740
1633
|
onTabActivate(event) {
|
|
1741
1634
|
this.tabSelectedIndex = event.index;
|
|
@@ -1747,172 +1640,139 @@ class DocPagePatternComponent {
|
|
|
1747
1640
|
behavior: 'smooth',
|
|
1748
1641
|
});
|
|
1749
1642
|
}
|
|
1750
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1751
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i0, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i4$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { 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", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i6.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { 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 }); }
|
|
1643
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1644
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, ngImport: i0, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label() }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\" />\n\n @if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n } @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n }\n\n @if (docEntries().length !== 0) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </h6>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </h6>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n }\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n @if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n } @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n }\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\" />\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode()\">\n <eui-icon-svg icon=\"eui-code\" />\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i3$1.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "ariaLabel", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i2$3.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1752
1645
|
}
|
|
1753
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternComponent, decorators: [{
|
|
1754
1647
|
type: Component,
|
|
1755
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, imports: [
|
|
1756
|
-
CommonModule,
|
|
1648
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, host: { class: 'doc-page-pattern' }, imports: [
|
|
1757
1649
|
...EUI_ICON,
|
|
1758
1650
|
...EUI_TABS,
|
|
1759
1651
|
...EUI_CARD,
|
|
1760
1652
|
...EUI_CHIP,
|
|
1761
1653
|
...EUI_BADGE,
|
|
1762
1654
|
...EUI_LABEL,
|
|
1763
|
-
], template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"] }]
|
|
1764
|
-
}], propDecorators: {
|
|
1765
|
-
type: HostBinding,
|
|
1766
|
-
args: ['class']
|
|
1767
|
-
}], sampleContent: [{
|
|
1768
|
-
type: ContentChild,
|
|
1769
|
-
args: [forwardRef(() => DocPagePatternSampleDirective)]
|
|
1770
|
-
}], docContent: [{
|
|
1771
|
-
type: ContentChild,
|
|
1772
|
-
args: [forwardRef(() => DocPagePatternDocDirective)]
|
|
1773
|
-
}], id: [{
|
|
1774
|
-
type: Input
|
|
1775
|
-
}], label: [{
|
|
1776
|
-
type: Input
|
|
1777
|
-
}], anatomyImage: [{
|
|
1778
|
-
type: Input
|
|
1779
|
-
}], docEntries: [{
|
|
1780
|
-
type: Input
|
|
1781
|
-
}], dos: [{
|
|
1782
|
-
type: Input
|
|
1783
|
-
}], donts: [{
|
|
1784
|
-
type: Input
|
|
1785
|
-
}], sourceUrl: [{
|
|
1786
|
-
type: Input
|
|
1787
|
-
}], figmaUrl: [{
|
|
1788
|
-
type: Input
|
|
1789
|
-
}], figmaEmbedSrc: [{
|
|
1790
|
-
type: Input
|
|
1791
|
-
}], checkScroll: [{
|
|
1655
|
+
], template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label() }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\" />\n\n @if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n } @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n }\n\n @if (docEntries().length !== 0) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </h6>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </h6>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n }\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n @if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n } @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n }\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\" />\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode()\">\n <eui-icon-svg icon=\"eui-code\" />\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"] }]
|
|
1656
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], anatomyImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "anatomyImage", required: false }] }], docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], dos: [{ type: i0.Input, args: [{ isSignal: true, alias: "dos", required: false }] }], donts: [{ type: i0.Input, args: [{ isSignal: true, alias: "donts", required: false }] }], sourceUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceUrl", required: false }] }], figmaUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaUrl", required: false }] }], figmaEmbedSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaEmbedSrc", required: false }] }], checkScroll: [{
|
|
1792
1657
|
type: HostListener,
|
|
1793
1658
|
args: ['window:scroll']
|
|
1794
1659
|
}] } });
|
|
1795
1660
|
|
|
1796
1661
|
class DocPagePatternSampleRefsComponent {
|
|
1797
1662
|
constructor() {
|
|
1798
|
-
this.
|
|
1799
|
-
|
|
1663
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1664
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1665
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
1666
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1800
1667
|
}
|
|
1801
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1802
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1668
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSampleRefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPagePatternSampleRefsComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-refs", inputs: { docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-page-pattern-sample-refs" }, ngImport: i0, template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n @for (ref of docEntries(); track ref) {\n <div class=\"col-md-6 eui-u-mb-3xl\">\n <eui-card class=\"eui-u-height-100\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-f-l\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content class=\"eui-u-display-flex eui-u-flex-column eui-u-flex-gap-s\">\n <div class=\"eui-u-f-bold\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"eui-u-f-bold\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"eui-u-f-bold\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row eui-u-mt-l\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"eui-u-c-bg-success eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-success eui-u-f-bold eui-u-mt-s eui-u-mb-xs\">Do's</div>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"eui-u-c-bg-danger eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-danger eui-u-mt-s eui-u-mb-xs eui-u-f-bold\">Dont's</div>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </div>\n }\n</div>\n\n\n", styles: [":host{display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-l-bold)}\n"], dependencies: [{ kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "ariaLabel", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }] }); }
|
|
1803
1670
|
}
|
|
1804
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSampleRefsComponent, decorators: [{
|
|
1805
1672
|
type: Component,
|
|
1806
|
-
args: [{ selector: 'eui-showcase-doc-pattern-sample-refs', imports: [
|
|
1807
|
-
CommonModule,
|
|
1673
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample-refs', host: { class: 'eui-showcase-doc-page-pattern-sample-refs' }, imports: [
|
|
1808
1674
|
...EUI_CHIP,
|
|
1809
1675
|
...EUI_CARD,
|
|
1810
1676
|
...EUI_BADGE,
|
|
1811
|
-
], 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\"
|
|
1812
|
-
}], propDecorators: {
|
|
1813
|
-
type: HostBinding,
|
|
1814
|
-
args: ['class']
|
|
1815
|
-
}], docEntries: [{
|
|
1816
|
-
type: Input
|
|
1817
|
-
}], codeFolder: [{
|
|
1818
|
-
type: Input
|
|
1819
|
-
}] } });
|
|
1677
|
+
], template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n @for (ref of docEntries(); track ref) {\n <div class=\"col-md-6 eui-u-mb-3xl\">\n <eui-card class=\"eui-u-height-100\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-f-l\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content class=\"eui-u-display-flex eui-u-flex-column eui-u-flex-gap-s\">\n <div class=\"eui-u-f-bold\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"eui-u-f-bold\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"eui-u-f-bold\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row eui-u-mt-l\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"eui-u-c-bg-success eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-success eui-u-f-bold eui-u-mt-s eui-u-mb-xs\">Do's</div>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"eui-u-c-bg-danger eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-danger eui-u-mt-s eui-u-mb-xs eui-u-f-bold\">Dont's</div>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </div>\n }\n</div>\n\n\n", styles: [":host{display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-l-bold)}\n"] }]
|
|
1678
|
+
}], propDecorators: { docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }] } });
|
|
1820
1679
|
|
|
1821
1680
|
/* eslint-disable */
|
|
1822
1681
|
class DocPagePatternSampleDocDirective {
|
|
1823
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1824
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1682
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSampleDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1683
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPagePatternSampleDocDirective, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-doc", ngImport: i0 }); }
|
|
1825
1684
|
}
|
|
1826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1685
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSampleDocDirective, decorators: [{
|
|
1827
1686
|
type: Directive,
|
|
1828
1687
|
args: [{ selector: 'eui-showcase-doc-pattern-sample-doc' }]
|
|
1829
1688
|
}] });
|
|
1830
1689
|
class DocPagePatternSampleComponent {
|
|
1831
1690
|
constructor() {
|
|
1832
|
-
this.
|
|
1833
|
-
|
|
1834
|
-
this.
|
|
1835
|
-
|
|
1836
|
-
this.
|
|
1837
|
-
|
|
1838
|
-
this.
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1691
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1692
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1693
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1694
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1695
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
1696
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1697
|
+
this.refsImage = input(undefined, /* @ts-ignore */
|
|
1698
|
+
...(ngDevMode ? [{ debugName: "refsImage" }] : /* istanbul ignore next */ []));
|
|
1699
|
+
this.refsImage2 = input(undefined, /* @ts-ignore */
|
|
1700
|
+
...(ngDevMode ? [{ debugName: "refsImage2" }] : /* istanbul ignore next */ []));
|
|
1701
|
+
this.figmaLink = input(undefined, /* @ts-ignore */
|
|
1702
|
+
...(ngDevMode ? [{ debugName: "figmaLink" }] : /* istanbul ignore next */ []));
|
|
1703
|
+
this.aiLink = input(undefined, /* @ts-ignore */
|
|
1704
|
+
...(ngDevMode ? [{ debugName: "aiLink" }] : /* istanbul ignore next */ []));
|
|
1705
|
+
this.isSmall = input(false, /* @ts-ignore */
|
|
1706
|
+
...(ngDevMode ? [{ debugName: "isSmall" }] : /* istanbul ignore next */ []));
|
|
1707
|
+
this.isTiny = input(false, /* @ts-ignore */
|
|
1708
|
+
...(ngDevMode ? [{ debugName: "isTiny" }] : /* istanbul ignore next */ []));
|
|
1709
|
+
this.isMedium = input(false, /* @ts-ignore */
|
|
1710
|
+
...(ngDevMode ? [{ debugName: "isMedium" }] : /* istanbul ignore next */ []));
|
|
1711
|
+
this.isLarge = input(false, /* @ts-ignore */
|
|
1712
|
+
...(ngDevMode ? [{ debugName: "isLarge" }] : /* istanbul ignore next */ []));
|
|
1713
|
+
this.isExtraLarge = input(false, /* @ts-ignore */
|
|
1714
|
+
...(ngDevMode ? [{ debugName: "isExtraLarge" }] : /* istanbul ignore next */ []));
|
|
1715
|
+
this.hasAutoHeight = input(false, /* @ts-ignore */
|
|
1716
|
+
...(ngDevMode ? [{ debugName: "hasAutoHeight" }] : /* istanbul ignore next */ []));
|
|
1717
|
+
this.docContent = contentChild(forwardRef(() => DocPagePatternSampleDocDirective), /* @ts-ignore */
|
|
1718
|
+
...(ngDevMode ? [{ debugName: "docContent" }] : /* istanbul ignore next */ []));
|
|
1845
1719
|
}
|
|
1846
1720
|
openCode() {
|
|
1847
|
-
// eslint-disable-next-line max-len
|
|
1848
1721
|
const showcaseRoot = 'https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-ux-components/-/blob/master/src/app/features/showcase-design-patterns/';
|
|
1849
|
-
window.open(showcaseRoot + this.codeFolder, '_blank');
|
|
1722
|
+
window.open(showcaseRoot + this.codeFolder(), '_blank');
|
|
1850
1723
|
}
|
|
1851
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1852
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1724
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPagePatternSampleComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, refsImage: { classPropertyName: "refsImage", publicName: "refsImage", isSignal: true, isRequired: false, transformFunction: null }, refsImage2: { classPropertyName: "refsImage2", publicName: "refsImage2", isSignal: true, isRequired: false, transformFunction: null }, figmaLink: { classPropertyName: "figmaLink", publicName: "figmaLink", isSignal: true, isRequired: false, transformFunction: null }, aiLink: { classPropertyName: "aiLink", publicName: "aiLink", isSignal: true, isRequired: false, transformFunction: null }, isSmall: { classPropertyName: "isSmall", publicName: "isSmall", isSignal: true, isRequired: false, transformFunction: null }, isTiny: { classPropertyName: "isTiny", publicName: "isTiny", isSignal: true, isRequired: false, transformFunction: null }, isMedium: { classPropertyName: "isMedium", publicName: "isMedium", isSignal: true, isRequired: false, transformFunction: null }, isLarge: { classPropertyName: "isLarge", publicName: "isLarge", isSignal: true, isRequired: false, transformFunction: null }, isExtraLarge: { classPropertyName: "isExtraLarge", publicName: "isExtraLarge", isSignal: true, isRequired: false, transformFunction: null }, hasAutoHeight: { classPropertyName: "hasAutoHeight", publicName: "hasAutoHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.no-code": "!codeFolder()" }, classAttribute: "eui-showcase-doc-page-pattern-sample" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n<div class=\"row\">\n@if (figmaLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">Figma reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{figmaLink()}}\" class=\"eui-u-text-link-external\" target=\"_blank\">\n <svg viewBox=\"0 0 38 57\" style=\"height: 36px; width: 36px;\"><path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"></path><path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"></path><path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"></path><path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"></path><path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"></path></svg>\n Link to Figma page pattern\n </a>\n </span>\n </div>\n}\n@if (aiLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">AI reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{aiLink()}}\" class=\"eui-u-text-link\">\n <svg viewBox=\"0 0 24 24\" style=\"height: 48px; width: 48px;\" xmlns=\"http://www.w3.org/2000/svg\"><title>Kiro</title><path d=\"M18.8 0H5.2A5.2 5.2 0 000 5.2v13.6A5.2 5.2 0 005.2 24h13.6a5.2 5.2 0 005.2-5.2V5.2A5.2 5.2 0 0018.8 0z\" fill=\"#9046FF\"></path><path d=\"M7.97 16.376c-1.644 3.642 1.86 4.556 4.443 2.424.76 2.39 3.608.607 4.631-1.247 2.251-4.084 1.342-8.249 1.108-9.108-1.6-5.859-9.6-5.869-10.976.03-.323 1.033-.328 2.206-.507 3.423-.09.617-.16 1.009-.393 1.655-.139.373-.323.7-.62 1.257-.458.865-.264 2.53 2.101 1.665l.224-.1h-.01l-.001.001z\" fill=\"#fff\"></path><path d=\"M12.722 10.985c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.218-.97a.61.61 0 01.537-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005zm2.703 0c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.219-.97a.61.61 0 01.536-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005z\" fill=\"#000\"></path></svg>\n View AI generated page pattern\n </a>\n </span>\n </div>\n}\n</div>\n\n@if (docContent()) {\n <h4 class=\"eui-u-text-h4\">Information</h4>\n <ng-content select=\"eui-showcase-doc-pattern-sample-doc\" />\n}\n\n\n<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n\n<div class=\"content-wrapper\">\n <div class=\"content\"\n [class.small]=\"isSmall()\" [class.medium]=\"isMedium()\"\n [class.large]=\"isLarge()\" [class.extra-large]=\"isExtraLarge()\" [class.tiny]=\"isTiny()\" [class.auto-height]=\"hasAutoHeight()\">\n @for (ref of docEntries(); track ref) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiSecondary]=\"ref.outsidePattern\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-p-absolute\" [style]=\"ref.position\">\n {{ref.id}}\n </eui-badge>\n }\n <div class=\"sample-wrapper\">\n <ng-content />\n </div>\n </div>\n\n @if (codeFolder()) {\n <div class=\"eui-u-flex eui-u-flex-justify-content-center eui-u-mt-l\">\n <button euiButton euiCTAButton euiSizeS (click)=\"openCode()\">Check the code</button>\n </div>\n }\n</div>\n\n\n\n@if (refsImage()) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage() }}\"\n alt=\"Design anatomy image\"/>\n}\n\n@if (refsImage2()) {\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage2() }}\"\n alt=\"Design anatomy image\"/>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .content-wrapper{display:flex;height:100%;width:100%;padding:2rem 4rem;background-color:var(--eui-c-bg);position:relative;flex-direction:column}:host .content{display:flex;height:40rem;width:100%;position:relative;background-color:var(--eui-c-bg);box-shadow:var(--eui-sh-2)}:host .content.tiny{height:8rem}:host .content.small{height:10rem}:host .content.medium{height:20rem}:host .content.large{height:50rem}:host .content.extra-large{height:75rem}:host .content.auto-height{height:auto}:host .sample-wrapper{display:block;width:100%}:host .sample-wrapper ::ng-deep .sample{display:flex;width:100%}:host .sample-wrapper ::ng-deep eui-header{height:90px}:host img.refs-image{width:fit-content;margin-bottom:var(--eui-s-7xl)}:host.no-code .content-wrapper{padding:2rem}\n"], dependencies: [{ kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "ariaLabel", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
1853
1726
|
}
|
|
1854
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSampleComponent, decorators: [{
|
|
1855
1728
|
type: Component,
|
|
1856
|
-
args: [{ selector: 'eui-showcase-doc-pattern-sample', imports: [
|
|
1857
|
-
CommonModule,
|
|
1729
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample', host: { class: 'eui-showcase-doc-page-pattern-sample', '[class.no-code]': '!codeFolder()' }, imports: [
|
|
1858
1730
|
...EUI_BADGE,
|
|
1859
1731
|
...EUI_BUTTON,
|
|
1860
|
-
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label }}</div>\n\n<div class=\"row\">\n
|
|
1861
|
-
}], propDecorators: {
|
|
1862
|
-
type: HostBinding,
|
|
1863
|
-
args: ['class']
|
|
1864
|
-
}], label: [{
|
|
1865
|
-
type: Input
|
|
1866
|
-
}], docEntries: [{
|
|
1867
|
-
type: Input
|
|
1868
|
-
}], codeFolder: [{
|
|
1869
|
-
type: Input
|
|
1870
|
-
}], refsImage: [{
|
|
1871
|
-
type: Input
|
|
1872
|
-
}], refsImage2: [{
|
|
1873
|
-
type: Input
|
|
1874
|
-
}], figmaLink: [{
|
|
1875
|
-
type: Input
|
|
1876
|
-
}], aiLink: [{
|
|
1877
|
-
type: Input
|
|
1878
|
-
}], isSmall: [{
|
|
1879
|
-
type: Input
|
|
1880
|
-
}], isTiny: [{
|
|
1881
|
-
type: Input
|
|
1882
|
-
}], isMedium: [{
|
|
1883
|
-
type: Input
|
|
1884
|
-
}], isLarge: [{
|
|
1885
|
-
type: Input
|
|
1886
|
-
}], isExtraLarge: [{
|
|
1887
|
-
type: Input
|
|
1888
|
-
}], hasAutoHeight: [{
|
|
1889
|
-
type: Input
|
|
1890
|
-
}], docContent: [{
|
|
1891
|
-
type: ContentChild,
|
|
1892
|
-
args: [forwardRef(() => DocPagePatternSampleDocDirective)]
|
|
1893
|
-
}] } });
|
|
1732
|
+
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n<div class=\"row\">\n@if (figmaLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">Figma reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{figmaLink()}}\" class=\"eui-u-text-link-external\" target=\"_blank\">\n <svg viewBox=\"0 0 38 57\" style=\"height: 36px; width: 36px;\"><path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"></path><path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"></path><path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"></path><path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"></path><path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"></path></svg>\n Link to Figma page pattern\n </a>\n </span>\n </div>\n}\n@if (aiLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">AI reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{aiLink()}}\" class=\"eui-u-text-link\">\n <svg viewBox=\"0 0 24 24\" style=\"height: 48px; width: 48px;\" xmlns=\"http://www.w3.org/2000/svg\"><title>Kiro</title><path d=\"M18.8 0H5.2A5.2 5.2 0 000 5.2v13.6A5.2 5.2 0 005.2 24h13.6a5.2 5.2 0 005.2-5.2V5.2A5.2 5.2 0 0018.8 0z\" fill=\"#9046FF\"></path><path d=\"M7.97 16.376c-1.644 3.642 1.86 4.556 4.443 2.424.76 2.39 3.608.607 4.631-1.247 2.251-4.084 1.342-8.249 1.108-9.108-1.6-5.859-9.6-5.869-10.976.03-.323 1.033-.328 2.206-.507 3.423-.09.617-.16 1.009-.393 1.655-.139.373-.323.7-.62 1.257-.458.865-.264 2.53 2.101 1.665l.224-.1h-.01l-.001.001z\" fill=\"#fff\"></path><path d=\"M12.722 10.985c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.218-.97a.61.61 0 01.537-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005zm2.703 0c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.219-.97a.61.61 0 01.536-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005z\" fill=\"#000\"></path></svg>\n View AI generated page pattern\n </a>\n </span>\n </div>\n}\n</div>\n\n@if (docContent()) {\n <h4 class=\"eui-u-text-h4\">Information</h4>\n <ng-content select=\"eui-showcase-doc-pattern-sample-doc\" />\n}\n\n\n<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n\n<div class=\"content-wrapper\">\n <div class=\"content\"\n [class.small]=\"isSmall()\" [class.medium]=\"isMedium()\"\n [class.large]=\"isLarge()\" [class.extra-large]=\"isExtraLarge()\" [class.tiny]=\"isTiny()\" [class.auto-height]=\"hasAutoHeight()\">\n @for (ref of docEntries(); track ref) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiSecondary]=\"ref.outsidePattern\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-p-absolute\" [style]=\"ref.position\">\n {{ref.id}}\n </eui-badge>\n }\n <div class=\"sample-wrapper\">\n <ng-content />\n </div>\n </div>\n\n @if (codeFolder()) {\n <div class=\"eui-u-flex eui-u-flex-justify-content-center eui-u-mt-l\">\n <button euiButton euiCTAButton euiSizeS (click)=\"openCode()\">Check the code</button>\n </div>\n }\n</div>\n\n\n\n@if (refsImage()) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage() }}\"\n alt=\"Design anatomy image\"/>\n}\n\n@if (refsImage2()) {\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage2() }}\"\n alt=\"Design anatomy image\"/>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .content-wrapper{display:flex;height:100%;width:100%;padding:2rem 4rem;background-color:var(--eui-c-bg);position:relative;flex-direction:column}:host .content{display:flex;height:40rem;width:100%;position:relative;background-color:var(--eui-c-bg);box-shadow:var(--eui-sh-2)}:host .content.tiny{height:8rem}:host .content.small{height:10rem}:host .content.medium{height:20rem}:host .content.large{height:50rem}:host .content.extra-large{height:75rem}:host .content.auto-height{height:auto}:host .sample-wrapper{display:block;width:100%}:host .sample-wrapper ::ng-deep .sample{display:flex;width:100%}:host .sample-wrapper ::ng-deep eui-header{height:90px}:host img.refs-image{width:fit-content;margin-bottom:var(--eui-s-7xl)}:host.no-code .content-wrapper{padding:2rem}\n"] }]
|
|
1733
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], refsImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "refsImage", required: false }] }], refsImage2: [{ type: i0.Input, args: [{ isSignal: true, alias: "refsImage2", required: false }] }], figmaLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaLink", required: false }] }], aiLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiLink", required: false }] }], isSmall: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSmall", required: false }] }], isTiny: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTiny", required: false }] }], isMedium: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMedium", required: false }] }], isLarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLarge", required: false }] }], isExtraLarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExtraLarge", required: false }] }], hasAutoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasAutoHeight", required: false }] }], docContent: [{ type: i0.ContentChild, args: [forwardRef(() => DocPagePatternSampleDocDirective), { isSignal: true }] }] } });
|
|
1894
1734
|
|
|
1895
|
-
/* eslint-disable max-len */
|
|
1896
1735
|
/* eslint-disable */
|
|
1897
1736
|
class DocPagePatternSimpleDocDirective {
|
|
1898
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1899
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1737
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSimpleDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1738
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocPagePatternSimpleDocDirective, isStandalone: true, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
1900
1739
|
}
|
|
1901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1740
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSimpleDocDirective, decorators: [{
|
|
1902
1741
|
type: Directive,
|
|
1903
1742
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
1904
1743
|
}] });
|
|
1744
|
+
const REPOSITORY_URL = (showcase) => `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${showcase}/-/blob/master/src/app/features/`;
|
|
1905
1745
|
class DocPagePatternSimpleComponent {
|
|
1906
1746
|
constructor() {
|
|
1907
|
-
this.
|
|
1908
|
-
|
|
1909
|
-
this.
|
|
1747
|
+
this.docContent = contentChild(forwardRef(() => DocPagePatternSimpleDocDirective), /* @ts-ignore */
|
|
1748
|
+
...(ngDevMode ? [{ debugName: "docContent" }] : /* istanbul ignore next */ []));
|
|
1749
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1750
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1751
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1752
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1753
|
+
this.anatomyImage = input(undefined, /* @ts-ignore */
|
|
1754
|
+
...(ngDevMode ? [{ debugName: "anatomyImage" }] : /* istanbul ignore next */ []));
|
|
1755
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1756
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1757
|
+
this.dos = input([], /* @ts-ignore */
|
|
1758
|
+
...(ngDevMode ? [{ debugName: "dos" }] : /* istanbul ignore next */ []));
|
|
1759
|
+
this.donts = input([], /* @ts-ignore */
|
|
1760
|
+
...(ngDevMode ? [{ debugName: "donts" }] : /* istanbul ignore next */ []));
|
|
1761
|
+
this.sourceUrl = input(undefined, /* @ts-ignore */
|
|
1762
|
+
...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
1763
|
+
this.figmaUrl = input(undefined, /* @ts-ignore */
|
|
1764
|
+
...(ngDevMode ? [{ debugName: "figmaUrl" }] : /* istanbul ignore next */ []));
|
|
1765
|
+
this.figmaEmbedSrc = input(undefined, /* @ts-ignore */
|
|
1766
|
+
...(ngDevMode ? [{ debugName: "figmaEmbedSrc" }] : /* istanbul ignore next */ []));
|
|
1910
1767
|
this.topPosToStartShowing = 100;
|
|
1911
1768
|
this.tabSelectedIndex = 0;
|
|
1912
1769
|
this.sanitizer = inject(DomSanitizer);
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1770
|
+
effect(() => {
|
|
1771
|
+
const figmaEmbedSrc = this.figmaEmbedSrc();
|
|
1772
|
+
if (figmaEmbedSrc) {
|
|
1773
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(figmaEmbedSrc);
|
|
1774
|
+
}
|
|
1775
|
+
});
|
|
1916
1776
|
}
|
|
1917
1777
|
checkScroll() {
|
|
1918
1778
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
@@ -1923,17 +1783,10 @@ class DocPagePatternSimpleComponent {
|
|
|
1923
1783
|
this.isShowGoTop = false;
|
|
1924
1784
|
}
|
|
1925
1785
|
}
|
|
1926
|
-
|
|
1927
|
-
if (this.figmaEmbedSrc) {
|
|
1928
|
-
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
|
|
1929
|
-
const iFrame = document.getElementById('iframe-figma');
|
|
1930
|
-
}
|
|
1931
|
-
}
|
|
1932
|
-
onNavigateToCode(event) {
|
|
1933
|
-
// eslint-disable-next-line max-len
|
|
1786
|
+
onNavigateToCode() {
|
|
1934
1787
|
const showcase = 'ux-patterns';
|
|
1935
|
-
const sourceRootPath =
|
|
1936
|
-
window.open(sourceRootPath + this.sourceUrl, '_blank');
|
|
1788
|
+
const sourceRootPath = REPOSITORY_URL(showcase);
|
|
1789
|
+
window.open(sourceRootPath + this.sourceUrl(), '_blank');
|
|
1937
1790
|
}
|
|
1938
1791
|
onTabSelect(event) {
|
|
1939
1792
|
this.tabSelectedIndex = event.index;
|
|
@@ -1945,209 +1798,180 @@ class DocPagePatternSimpleComponent {
|
|
|
1945
1798
|
behavior: 'smooth',
|
|
1946
1799
|
});
|
|
1947
1800
|
}
|
|
1948
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1949
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", 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-3xl-bold)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { 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", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i6$1.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i6$1.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1801
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1802
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPagePatternSimpleComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern-simple", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSimpleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\" />\n\n@if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n} @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"60%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n}\n\n@if (docEntries().length !== 0) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-avatar euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n }\n <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content>\n <div class=\"doc-page-section-title\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"doc-page-section-title\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"doc-page-section-title\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-success\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </div>\n @for (do of ref.dos; track do) {\n <li class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-danger\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </div>\n @for (dont of ref.donts; track dont) {\n <li class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n}\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n@if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n} @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n}\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}\n"], dependencies: [{ kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5$1.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "ariaLabel", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i5$1.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1950
1803
|
}
|
|
1951
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPagePatternSimpleComponent, decorators: [{
|
|
1952
1805
|
type: Component,
|
|
1953
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None, imports: [
|
|
1954
|
-
CommonModule,
|
|
1806
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None, host: { class: 'doc-page-pattern' }, imports: [
|
|
1955
1807
|
...EUI_BUTTON,
|
|
1956
|
-
...EUI_TABS,
|
|
1957
1808
|
...EUI_ICON,
|
|
1958
1809
|
...EUI_CARD,
|
|
1959
1810
|
...EUI_CHIP,
|
|
1960
1811
|
...EUI_AVATAR,
|
|
1961
|
-
], 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\"
|
|
1962
|
-
}], propDecorators: {
|
|
1963
|
-
type: HostBinding,
|
|
1964
|
-
args: ['class']
|
|
1965
|
-
}], docContent: [{
|
|
1966
|
-
type: ContentChild,
|
|
1967
|
-
args: [forwardRef(() => DocPagePatternSimpleDocDirective)]
|
|
1968
|
-
}], id: [{
|
|
1969
|
-
type: Input
|
|
1970
|
-
}], label: [{
|
|
1971
|
-
type: Input
|
|
1972
|
-
}], anatomyImage: [{
|
|
1973
|
-
type: Input
|
|
1974
|
-
}], docEntries: [{
|
|
1975
|
-
type: Input
|
|
1976
|
-
}], dos: [{
|
|
1977
|
-
type: Input
|
|
1978
|
-
}], donts: [{
|
|
1979
|
-
type: Input
|
|
1980
|
-
}], sourceUrl: [{
|
|
1981
|
-
type: Input
|
|
1982
|
-
}], figmaUrl: [{
|
|
1983
|
-
type: Input
|
|
1984
|
-
}], figmaEmbedSrc: [{
|
|
1985
|
-
type: Input
|
|
1986
|
-
}], checkScroll: [{
|
|
1812
|
+
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\" />\n\n@if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n} @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"60%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n}\n\n@if (docEntries().length !== 0) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-avatar euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n }\n <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content>\n <div class=\"doc-page-section-title\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"doc-page-section-title\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"doc-page-section-title\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-success\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </div>\n @for (do of ref.dos; track do) {\n <li class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-danger\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </div>\n @for (dont of ref.donts; track dont) {\n <li class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n}\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n@if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n} @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n}\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}\n"] }]
|
|
1813
|
+
}], ctorParameters: () => [], propDecorators: { docContent: [{ type: i0.ContentChild, args: [forwardRef(() => DocPagePatternSimpleDocDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], anatomyImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "anatomyImage", required: false }] }], docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], dos: [{ type: i0.Input, args: [{ isSignal: true, alias: "dos", required: false }] }], donts: [{ type: i0.Input, args: [{ isSignal: true, alias: "donts", required: false }] }], sourceUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceUrl", required: false }] }], figmaUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaUrl", required: false }] }], figmaEmbedSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "figmaEmbedSrc", required: false }] }], checkScroll: [{
|
|
1987
1814
|
type: HostListener,
|
|
1988
1815
|
args: ['window:scroll']
|
|
1989
1816
|
}] } });
|
|
1990
1817
|
|
|
1991
1818
|
class DocSampleApiComponent {
|
|
1992
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1993
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1819
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1820
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: DocSampleApiComponent, isStandalone: true, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" }); }
|
|
1994
1821
|
}
|
|
1995
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1822
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSampleApiComponent, decorators: [{
|
|
1996
1823
|
type: Component,
|
|
1997
1824
|
args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
|
|
1998
1825
|
}] });
|
|
1999
1826
|
|
|
2000
1827
|
class DocSectionCodeComponent {
|
|
2001
1828
|
constructor() {
|
|
2002
|
-
this.
|
|
2003
|
-
|
|
1829
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1830
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1831
|
+
this.content = input(undefined, /* @ts-ignore */
|
|
1832
|
+
...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
1833
|
+
this.styleClass = input(undefined, /* @ts-ignore */
|
|
1834
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
1835
|
+
this.versionLabel = input(undefined, /* @ts-ignore */
|
|
1836
|
+
...(ngDevMode ? [{ debugName: "versionLabel" }] : /* istanbul ignore next */ []));
|
|
1837
|
+
this.isDeprecated = input(false, /* @ts-ignore */
|
|
1838
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
1839
|
+
this.isCodeExpanded = signal(false, /* @ts-ignore */
|
|
1840
|
+
...(ngDevMode ? [{ debugName: "isCodeExpanded" }] : /* istanbul ignore next */ []));
|
|
1841
|
+
this.sectionDescription = contentChild(forwardRef(() => DocSectionCodeDescriptionTagDirective), /* @ts-ignore */
|
|
1842
|
+
...(ngDevMode ? [{ debugName: "sectionDescription" }] : /* istanbul ignore next */ []));
|
|
1843
|
+
this.sectionCodeHTML = contentChild(forwardRef(() => DocSectionCodeHtmlTagDirective), /* @ts-ignore */
|
|
1844
|
+
...(ngDevMode ? [{ debugName: "sectionCodeHTML" }] : /* istanbul ignore next */ []));
|
|
1845
|
+
this.sectionCodeTS = contentChild(forwardRef(() => DocSectionCodeTsTagDirective), /* @ts-ignore */
|
|
1846
|
+
...(ngDevMode ? [{ debugName: "sectionCodeTS" }] : /* istanbul ignore next */ []));
|
|
1847
|
+
this.sectionCodeSERVICE = contentChild(forwardRef(() => DocSectionCodeServiceTagDirective), /* @ts-ignore */
|
|
1848
|
+
...(ngDevMode ? [{ debugName: "sectionCodeSERVICE" }] : /* istanbul ignore next */ []));
|
|
1849
|
+
this.sectionCodeCSS = contentChild(forwardRef(() => DocSectionCodeCssTagDirective), /* @ts-ignore */
|
|
1850
|
+
...(ngDevMode ? [{ debugName: "sectionCodeCSS" }] : /* istanbul ignore next */ []));
|
|
1851
|
+
this.sectionCodeDOC = contentChild(forwardRef(() => DocSectionCodeDocTagDirective), /* @ts-ignore */
|
|
1852
|
+
...(ngDevMode ? [{ debugName: "sectionCodeDOC" }] : /* istanbul ignore next */ []));
|
|
2004
1853
|
}
|
|
2005
1854
|
toggleCode() {
|
|
2006
|
-
this.isCodeExpanded
|
|
1855
|
+
this.isCodeExpanded.update(v => !v);
|
|
2007
1856
|
}
|
|
2008
1857
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2009
1858
|
isDefined(object) {
|
|
2010
1859
|
return object;
|
|
2011
1860
|
}
|
|
2012
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2013
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocSectionCodeComponent, isStandalone: true, selector: "eui-showcase-doc-section-code", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, versionLabel: { classPropertyName: "versionLabel", publicName: "versionLabel", isSignal: true, isRequired: false, transformFunction: null }, isDeprecated: { classPropertyName: "isDeprecated", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<h5 class=\"section-title {{ styleClass() }}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated()\">\n {{ label() }}\n </div>\n <div class=\"ml-auto\">\n @if (versionLabel()) {\n <span class=\"eui-u-color-danger\">{{ versionLabel() }}</span>\n }\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded()\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n @if (!isCodeExpanded()) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded()) {\n <span euiLabel>Hide Code</span>\n }\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n @if (isDeprecated()) {\n <div>\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n }\n</h5>\n\n@if (sectionDescription()) {\n <div class=\"eui-u-mv\">\n <ng-content select=\"sectionDescription\" />\n </div>\n}\n\n@if (isCodeExpanded()) {\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML())\">\n <eui-tab-header>\n <eui-label>HTML</eui-label>\n <eui-label euiSublabel>HyperText Markup Language</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS())\">\n <eui-tab-header>\n <eui-label>TS</eui-label>\n <eui-label euiSublabel>Typescript</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE())\">\n <eui-tab-header>\n <eui-label>Service</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS())\">\n <eui-tab-header>\n <eui-label>CSS</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC())\">\n <eui-tab-header>\n <eui-label>DOC</eui-label>\n <eui-label euiSublabel>Documentation</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"language-doc\">\n <ng-content select=\"sectionCodeDOC\" />\n </div>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n @if (!sectionCodeHTML() && !sectionCodeTS() && !sectionCodeCSS()) {\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content /></code></pre>\n }\n}\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "component", type: i2$3.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
2014
1863
|
}
|
|
2015
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
|
|
2016
1865
|
type: Component,
|
|
2017
1866
|
args: [{ selector: 'eui-showcase-doc-section-code', imports: [
|
|
2018
|
-
CommonModule,
|
|
2019
1867
|
...EUI_LABEL,
|
|
2020
1868
|
...EUI_TABS,
|
|
2021
1869
|
...EUI_BUTTON,
|
|
2022
|
-
], 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
|
|
2023
|
-
}], propDecorators: { label: [{
|
|
2024
|
-
type: Input
|
|
2025
|
-
}], content: [{
|
|
2026
|
-
type: Input
|
|
2027
|
-
}], styleClass: [{
|
|
2028
|
-
type: Input
|
|
2029
|
-
}], versionLabel: [{
|
|
2030
|
-
type: Input
|
|
2031
|
-
}], isDeprecated: [{
|
|
2032
|
-
type: Input
|
|
2033
|
-
}], isCodeExpanded: [{
|
|
2034
|
-
type: Input
|
|
2035
|
-
}], sectionDescription: [{
|
|
2036
|
-
type: ContentChild,
|
|
2037
|
-
args: [forwardRef(() => DocSectionCodeDescriptionTagDirective)]
|
|
2038
|
-
}], sectionCodeHTML: [{
|
|
2039
|
-
type: ContentChild,
|
|
2040
|
-
args: [forwardRef(() => DocSectionCodeHtmlTagDirective)]
|
|
2041
|
-
}], sectionCodeTS: [{
|
|
2042
|
-
type: ContentChild,
|
|
2043
|
-
args: [forwardRef(() => DocSectionCodeTsTagDirective)]
|
|
2044
|
-
}], sectionCodeSERVICE: [{
|
|
2045
|
-
type: ContentChild,
|
|
2046
|
-
args: [forwardRef(() => DocSectionCodeServiceTagDirective)]
|
|
2047
|
-
}], sectionCodeCSS: [{
|
|
2048
|
-
type: ContentChild,
|
|
2049
|
-
args: [forwardRef(() => DocSectionCodeCssTagDirective)]
|
|
2050
|
-
}], sectionCodeDOC: [{
|
|
2051
|
-
type: ContentChild,
|
|
2052
|
-
args: [forwardRef(() => DocSectionCodeDocTagDirective)]
|
|
2053
|
-
}] } });
|
|
1870
|
+
], template: "<h5 class=\"section-title {{ styleClass() }}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated()\">\n {{ label() }}\n </div>\n <div class=\"ml-auto\">\n @if (versionLabel()) {\n <span class=\"eui-u-color-danger\">{{ versionLabel() }}</span>\n }\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded()\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n @if (!isCodeExpanded()) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded()) {\n <span euiLabel>Hide Code</span>\n }\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n @if (isDeprecated()) {\n <div>\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n }\n</h5>\n\n@if (sectionDescription()) {\n <div class=\"eui-u-mv\">\n <ng-content select=\"sectionDescription\" />\n </div>\n}\n\n@if (isCodeExpanded()) {\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML())\">\n <eui-tab-header>\n <eui-label>HTML</eui-label>\n <eui-label euiSublabel>HyperText Markup Language</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS())\">\n <eui-tab-header>\n <eui-label>TS</eui-label>\n <eui-label euiSublabel>Typescript</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE())\">\n <eui-tab-header>\n <eui-label>Service</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS())\">\n <eui-tab-header>\n <eui-label>CSS</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC())\">\n <eui-tab-header>\n <eui-label>DOC</eui-label>\n <eui-label euiSublabel>Documentation</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"language-doc\">\n <ng-content select=\"sectionCodeDOC\" />\n </div>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n @if (!sectionCodeHTML() && !sectionCodeTS() && !sectionCodeCSS()) {\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content /></code></pre>\n }\n}\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"] }]
|
|
1871
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], versionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "versionLabel", required: false }] }], isDeprecated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], sectionDescription: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeDescriptionTagDirective), { isSignal: true }] }], sectionCodeHTML: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeHtmlTagDirective), { isSignal: true }] }], sectionCodeTS: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeTsTagDirective), { isSignal: true }] }], sectionCodeSERVICE: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeServiceTagDirective), { isSignal: true }] }], sectionCodeCSS: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeCssTagDirective), { isSignal: true }] }], sectionCodeDOC: [{ type: i0.ContentChild, args: [forwardRef(() => DocSectionCodeDocTagDirective), { isSignal: true }] }] } });
|
|
2054
1872
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
2055
1873
|
class DocSectionCodeDescriptionTagDirective {
|
|
2056
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2057
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1874
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1875
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocSectionCodeDescriptionTagDirective, isStandalone: true, selector: "sectionDescription", ngImport: i0 }); }
|
|
2058
1876
|
}
|
|
2059
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
|
|
2060
1878
|
type: Directive,
|
|
2061
1879
|
args: [{ selector: 'sectionDescription' }]
|
|
2062
1880
|
}] });
|
|
2063
1881
|
class DocSectionCodeHtmlTagDirective {
|
|
2064
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2065
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1882
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1883
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocSectionCodeHtmlTagDirective, isStandalone: true, selector: "sectionCodeHTML", ngImport: i0 }); }
|
|
2066
1884
|
}
|
|
2067
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
|
|
2068
1886
|
type: Directive,
|
|
2069
1887
|
args: [{ selector: 'sectionCodeHTML' }]
|
|
2070
1888
|
}] });
|
|
2071
1889
|
class DocSectionCodeTsTagDirective {
|
|
2072
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2073
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1890
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1891
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocSectionCodeTsTagDirective, isStandalone: true, selector: "sectionCodeTS", ngImport: i0 }); }
|
|
2074
1892
|
}
|
|
2075
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
|
|
2076
1894
|
type: Directive,
|
|
2077
1895
|
args: [{ selector: 'sectionCodeTS' }]
|
|
2078
1896
|
}] });
|
|
2079
1897
|
class DocSectionCodeServiceTagDirective {
|
|
2080
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2081
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1898
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1899
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocSectionCodeServiceTagDirective, isStandalone: true, selector: "sectionCodeSERVICE", ngImport: i0 }); }
|
|
2082
1900
|
}
|
|
2083
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
|
|
2084
1902
|
type: Directive,
|
|
2085
1903
|
args: [{ selector: 'sectionCodeSERVICE' }]
|
|
2086
1904
|
}] });
|
|
2087
1905
|
class DocSectionCodeCssTagDirective {
|
|
2088
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2089
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1906
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1907
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocSectionCodeCssTagDirective, isStandalone: true, selector: "sectionCodeCSS", ngImport: i0 }); }
|
|
2090
1908
|
}
|
|
2091
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1909
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
|
|
2092
1910
|
type: Directive,
|
|
2093
1911
|
args: [{ selector: 'sectionCodeCSS' }]
|
|
2094
1912
|
}] });
|
|
2095
1913
|
class DocSectionCodeDocTagDirective {
|
|
2096
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2097
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1914
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1915
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: DocSectionCodeDocTagDirective, isStandalone: true, selector: "sectionCodeDOC", ngImport: i0 }); }
|
|
2098
1916
|
}
|
|
2099
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1917
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
|
|
2100
1918
|
type: Directive,
|
|
2101
1919
|
args: [{ selector: 'sectionCodeDOC' }]
|
|
2102
1920
|
}] });
|
|
2103
1921
|
|
|
2104
1922
|
class LoremIpsumSampleComponent {
|
|
2105
1923
|
constructor() {
|
|
2106
|
-
this.textSize = 'large'
|
|
1924
|
+
this.textSize = input('large', /* @ts-ignore */
|
|
1925
|
+
...(ngDevMode ? [{ debugName: "textSize" }] : /* istanbul ignore next */ []));
|
|
2107
1926
|
}
|
|
2108
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2109
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: LoremIpsumSampleComponent, isStandalone: true, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i0, template: "<div *ngIf=\"textSize === 'small'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1927
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1928
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: LoremIpsumSampleComponent, isStandalone: true, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (textSize() === 'small') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n </div>\n}\n\n@if (textSize() === 'medium') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n </div>\n}\n\n@if (textSize() === 'large') {\n <div>\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n </div>\n}\n" }); }
|
|
2110
1929
|
}
|
|
2111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1930
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
|
|
2112
1931
|
type: Component,
|
|
2113
|
-
args: [{ selector: 'eui-showcase-doc-lorem-ipsum', imports: [
|
|
2114
|
-
|
|
2115
|
-
], 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" }]
|
|
2116
|
-
}], propDecorators: { textSize: [{
|
|
2117
|
-
type: Input
|
|
2118
|
-
}] } });
|
|
1932
|
+
args: [{ selector: 'eui-showcase-doc-lorem-ipsum', imports: [], template: "@if (textSize() === 'small') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n </div>\n}\n\n@if (textSize() === 'medium') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n </div>\n}\n\n@if (textSize() === 'large') {\n <div>\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n </div>\n}\n" }]
|
|
1933
|
+
}], propDecorators: { textSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSize", required: false }] }] } });
|
|
2119
1934
|
|
|
2120
1935
|
class PlaygroundComponent {
|
|
2121
1936
|
constructor() {
|
|
2122
|
-
this.title = 'eUI Playground'
|
|
2123
|
-
|
|
1937
|
+
this.title = input('eUI Playground', /* @ts-ignore */
|
|
1938
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1939
|
+
this.htmlContent = input(undefined, /* @ts-ignore */
|
|
1940
|
+
...(ngDevMode ? [{ debugName: "htmlContent" }] : /* istanbul ignore next */ []));
|
|
1941
|
+
this.sampleId = input(undefined, /* @ts-ignore */
|
|
1942
|
+
...(ngDevMode ? [{ debugName: "sampleId" }] : /* istanbul ignore next */ []));
|
|
1943
|
+
this.typescriptContent = input(undefined, /* @ts-ignore */
|
|
1944
|
+
...(ngDevMode ? [{ debugName: "typescriptContent" }] : /* istanbul ignore next */ []));
|
|
1945
|
+
this.activated = input(false, /* @ts-ignore */
|
|
1946
|
+
...(ngDevMode ? [{ debugName: "activated" }] : /* istanbul ignore next */ []));
|
|
1947
|
+
this.modules = input(undefined, /* @ts-ignore */
|
|
1948
|
+
...(ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []));
|
|
2124
1949
|
this.isLoaded = false;
|
|
1950
|
+
this.stackblitzElWrapper = viewChild('container', { ...(ngDevMode ? { debugName: "stackblitzElWrapper" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
2125
1951
|
this.sb = inject(StackblitzService);
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
if (changes.activated) {
|
|
2129
|
-
if (changes.activated.currentValue) {
|
|
1952
|
+
effect(() => {
|
|
1953
|
+
if (this.activated()) {
|
|
2130
1954
|
this.initStackblitz();
|
|
2131
1955
|
}
|
|
2132
1956
|
else {
|
|
2133
1957
|
this.isLoaded = false;
|
|
2134
1958
|
}
|
|
2135
|
-
}
|
|
1959
|
+
});
|
|
2136
1960
|
}
|
|
2137
1961
|
initStackblitz() {
|
|
2138
1962
|
this.sb.getStackblitzDependencies()
|
|
2139
1963
|
.then((deps) => {
|
|
2140
1964
|
const { dependencies, devDependencies } = deps;
|
|
2141
|
-
const { selector } = this.sb.extractComponentMetadata(this.typescriptContent);
|
|
2142
|
-
const moduleName = this.sb.extractModuleName(this.typescriptContent);
|
|
2143
|
-
const componentName = this.sb.extractComponentName(this.typescriptContent);
|
|
1965
|
+
const { selector } = this.sb.extractComponentMetadata(this.typescriptContent());
|
|
1966
|
+
const moduleName = this.sb.extractModuleName(this.typescriptContent());
|
|
1967
|
+
const componentName = this.sb.extractComponentName(this.typescriptContent());
|
|
2144
1968
|
const project = {
|
|
2145
|
-
title: this.title,
|
|
2146
|
-
description: `An eUI example for the ${this.title}.`,
|
|
1969
|
+
title: this.title(),
|
|
1970
|
+
description: `An eUI example for the ${this.title()}.`,
|
|
2147
1971
|
template: 'angular-cli',
|
|
2148
1972
|
files: {
|
|
2149
|
-
'src/component.html': this.htmlContent,
|
|
2150
|
-
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent) : this.typescriptContent,
|
|
1973
|
+
'src/component.html': this.htmlContent(),
|
|
1974
|
+
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent()) : this.typescriptContent(),
|
|
2151
1975
|
'src/main.ts': mainFile(moduleName, componentName),
|
|
2152
1976
|
'src/polyfills.ts': polyfillsFile,
|
|
2153
1977
|
'src/index.html': indexHtmlFile(selector),
|
|
@@ -2167,7 +1991,7 @@ class PlaygroundComponent {
|
|
|
2167
1991
|
},
|
|
2168
1992
|
dependencies,
|
|
2169
1993
|
};
|
|
2170
|
-
return sdk.embedProject(`stackblitz-${this.sampleId}`, project, {
|
|
1994
|
+
return sdk.embedProject(`stackblitz-${this.sampleId()}`, project, {
|
|
2171
1995
|
height: 500,
|
|
2172
1996
|
openFile: ['src/component.ts', 'src/component.html'],
|
|
2173
1997
|
});
|
|
@@ -2177,30 +2001,15 @@ class PlaygroundComponent {
|
|
|
2177
2001
|
this.isLoaded = true;
|
|
2178
2002
|
});
|
|
2179
2003
|
}
|
|
2180
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2181
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2004
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2005
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: PlaygroundComponent, isStandalone: true, selector: "eui-playground", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, htmlContent: { classPropertyName: "htmlContent", publicName: "htmlContent", isSignal: true, isRequired: false, transformFunction: null }, sampleId: { classPropertyName: "sampleId", publicName: "sampleId", isSignal: true, isRequired: false, transformFunction: null }, typescriptContent: { classPropertyName: "typescriptContent", publicName: "typescriptContent", isSignal: true, isRequired: false, transformFunction: null }, activated: { classPropertyName: "activated", publicName: "activated", isSignal: true, isRequired: false, transformFunction: null }, modules: { classPropertyName: "modules", publicName: "modules", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId()}}\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i1$2.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] }); }
|
|
2182
2006
|
}
|
|
2183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2007
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: PlaygroundComponent, decorators: [{
|
|
2184
2008
|
type: Component,
|
|
2185
2009
|
args: [{ selector: 'eui-playground', imports: [
|
|
2186
2010
|
...EUI_BLOCK_CONTENT,
|
|
2187
|
-
], template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId}}\"></iframe>\n</eui-block-content>\n" }]
|
|
2188
|
-
}], propDecorators: { title: [{
|
|
2189
|
-
type: Input
|
|
2190
|
-
}], htmlContent: [{
|
|
2191
|
-
type: Input
|
|
2192
|
-
}], sampleId: [{
|
|
2193
|
-
type: Input
|
|
2194
|
-
}], typescriptContent: [{
|
|
2195
|
-
type: Input
|
|
2196
|
-
}], activated: [{
|
|
2197
|
-
type: Input
|
|
2198
|
-
}], modules: [{
|
|
2199
|
-
type: Input
|
|
2200
|
-
}], stackblitzElWrapper: [{
|
|
2201
|
-
type: ViewChild,
|
|
2202
|
-
args: ['container', { read: ElementRef, static: true }]
|
|
2203
|
-
}] } });
|
|
2011
|
+
], template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId()}}\"></iframe>\n</eui-block-content>\n" }]
|
|
2012
|
+
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], htmlContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "htmlContent", required: false }] }], sampleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sampleId", required: false }] }], typescriptContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "typescriptContent", required: false }] }], activated: [{ type: i0.Input, args: [{ isSignal: true, alias: "activated", required: false }] }], modules: [{ type: i0.Input, args: [{ isSignal: true, alias: "modules", required: false }] }], stackblitzElWrapper: [{ type: i0.ViewChild, args: ['container', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
2204
2013
|
|
|
2205
2014
|
const EUI_SHOWCASE = [
|
|
2206
2015
|
DocPageAccessibilityContentDirective,
|