@eui/showcase 23.0.0-alpha.5 → 23.0.0-alpha.7
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 +638 -858
- package/fesm2022/eui-showcase.mjs.map +1 -1
- package/package.json +3 -3
- package/types/eui-showcase.d.ts +304 -286
- package/types/eui-showcase.d.ts.map +1 -1
|
@@ -1,44 +1,43 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, Injectable,
|
|
3
|
-
import * as
|
|
2
|
+
import { signal, Injectable, input, Component, inject, ChangeDetectorRef, afterNextRender, ViewEncapsulation, ElementRef, Renderer2, effect, Directive, booleanAttribute, contentChildren, forwardRef, viewChild, DestroyRef, 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
|
|
16
|
-
import * as i4$1 from '@eui/components/eui-page-v2';
|
|
15
|
+
import { NgClass, Location } from '@angular/common';
|
|
16
|
+
import * as i3$1 from '@eui/components/eui-page-v2';
|
|
17
17
|
import { EUI_PAGE as EUI_PAGE$1 } from '@eui/components/eui-page-v2';
|
|
18
18
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
19
19
|
import { Clipboard } from '@angular/cdk/clipboard';
|
|
20
20
|
import { lastValueFrom, forkJoin, Observable } from 'rxjs';
|
|
21
21
|
import { EuiAppShellService, EuiGrowlService } from '@eui/core';
|
|
22
|
-
import * as
|
|
22
|
+
import * as i2$2 from '@eui/components/eui-tabs';
|
|
23
23
|
import { EUI_TABS } from '@eui/components/eui-tabs';
|
|
24
24
|
import sdk from '@stackblitz/sdk';
|
|
25
|
-
import * as
|
|
25
|
+
import * as i4 from '@eui/components/eui-label';
|
|
26
26
|
import { EUI_LABEL } from '@eui/components/eui-label';
|
|
27
|
-
import * as
|
|
27
|
+
import * as i3$2 from '@eui/components/eui-card';
|
|
28
28
|
import { EUI_CARD } from '@eui/components/eui-card';
|
|
29
|
-
import * as
|
|
29
|
+
import * as i1$1 from '@eui/components/eui-alert';
|
|
30
30
|
import { EUI_ALERT } from '@eui/components/eui-alert';
|
|
31
|
-
import * as
|
|
31
|
+
import * as i5 from '@eui/components/eui-chip';
|
|
32
32
|
import { EUI_CHIP } from '@eui/components/eui-chip';
|
|
33
|
-
import * as
|
|
34
|
-
import { EUI_BLOCK_CONTENT } from '@eui/components/eui-block-content';
|
|
35
|
-
import * as i3$1 from '@eui/components/eui-dialog';
|
|
33
|
+
import * as i2$3 from '@eui/components/eui-dialog';
|
|
36
34
|
import { EUI_DIALOG } from '@eui/components/eui-dialog';
|
|
37
|
-
import
|
|
38
|
-
import * as i6$1 from '@eui/components/eui-badge';
|
|
35
|
+
import * as i5$1 from '@eui/components/eui-badge';
|
|
39
36
|
import { EUI_BADGE } from '@eui/components/eui-badge';
|
|
40
|
-
import * as
|
|
37
|
+
import * as i5$2 from '@eui/components/eui-avatar';
|
|
41
38
|
import { EUI_AVATAR } from '@eui/components/eui-avatar';
|
|
39
|
+
import * as i1$2 from '@eui/components/eui-block-content';
|
|
40
|
+
import { EUI_BLOCK_CONTENT } from '@eui/components/eui-block-content';
|
|
42
41
|
|
|
43
42
|
/**
|
|
44
43
|
* A service to update and configure the Showcase module state.
|
|
@@ -87,16 +86,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
87
86
|
|
|
88
87
|
class DocPageCodeComponent {
|
|
89
88
|
constructor() {
|
|
90
|
-
this.codeFolder = ''
|
|
91
|
-
|
|
89
|
+
this.codeFolder = input('', /* @ts-ignore */
|
|
90
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
91
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
92
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
92
93
|
}
|
|
93
94
|
onOpenCode() {
|
|
94
95
|
// eslint-disable-next-line max-len
|
|
95
|
-
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase}/-/blob/master/src/app/`;
|
|
96
|
-
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
96
|
+
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase()}/-/blob/master/src/app/`;
|
|
97
|
+
window.open(sourceRootPath + this.codeFolder(), '_blank');
|
|
97
98
|
}
|
|
98
99
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
99
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
100
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: DocPageCodeComponent, isStandalone: true, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" euiButton euiCTAButton (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n", dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
100
101
|
}
|
|
101
102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeComponent, decorators: [{
|
|
102
103
|
type: Component,
|
|
@@ -104,34 +105,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
104
105
|
...EUI_ICON,
|
|
105
106
|
...EUI_BUTTON,
|
|
106
107
|
], template: "<button type=\"button\" euiButton euiCTAButton (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n" }]
|
|
107
|
-
}], propDecorators: { codeFolder: [{
|
|
108
|
-
type: Input
|
|
109
|
-
}], showcase: [{
|
|
110
|
-
type: Input
|
|
111
|
-
}] } });
|
|
108
|
+
}], propDecorators: { codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }] } });
|
|
112
109
|
|
|
113
110
|
class DocPageDevGuideComponent {
|
|
114
111
|
constructor() {
|
|
115
|
-
this.
|
|
116
|
-
|
|
117
|
-
this.showcaseName = 'showcase-dev-guide'
|
|
112
|
+
this.rootDocsFolder = input('docs', /* @ts-ignore */
|
|
113
|
+
...(ngDevMode ? [{ debugName: "rootDocsFolder" }] : /* istanbul ignore next */ []));
|
|
114
|
+
this.showcaseName = input('showcase-dev-guide', /* @ts-ignore */
|
|
115
|
+
...(ngDevMode ? [{ debugName: "showcaseName" }] : /* istanbul ignore next */ []));
|
|
118
116
|
this.headers = [];
|
|
119
117
|
this.markdownService = inject(MarkdownService);
|
|
120
118
|
this.http = inject(HttpClient);
|
|
121
119
|
this.router = inject(Router);
|
|
122
120
|
this.route = inject(ActivatedRoute);
|
|
123
|
-
this.cdRef = inject(
|
|
121
|
+
this.cdRef = inject(ChangeDetectorRef);
|
|
122
|
+
this.route.url.pipe(takeUntilDestroyed()).subscribe((u) => {
|
|
123
|
+
this._loadMdContent(`/${this.rootDocsFolder()}/` + u.join('/'));
|
|
124
|
+
});
|
|
125
|
+
this.route.fragment.pipe(take(1), takeUntilDestroyed()).subscribe((fragment) => {
|
|
126
|
+
if (fragment) {
|
|
127
|
+
this.fragmentId = fragment;
|
|
128
|
+
afterNextRender(() => {
|
|
129
|
+
this.cdRef.detectChanges();
|
|
130
|
+
const fgm = document.getElementById(fragment);
|
|
131
|
+
fgm?.scrollIntoView();
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
});
|
|
124
135
|
}
|
|
125
136
|
ngOnInit() {
|
|
126
|
-
this.subscription = this.route.url.subscribe((u) => {
|
|
127
|
-
this._loadMdContent(`/${this.rootDocsFolder}/` + u.join('/'));
|
|
128
|
-
});
|
|
129
137
|
/**
|
|
130
138
|
* callback for heading renderer. It will be called for each heading in the markdown.
|
|
131
|
-
*
|
|
132
|
-
* @param tokens the heading tokens
|
|
133
|
-
* @param depth the heading level
|
|
134
|
-
* @param raw the raw heading text
|
|
135
139
|
*/
|
|
136
140
|
this.markdownService.renderer.heading = ({ raw, text, depth }) => {
|
|
137
141
|
if (depth === 2 || depth === 3) {
|
|
@@ -145,21 +149,7 @@ class DocPageDevGuideComponent {
|
|
|
145
149
|
};
|
|
146
150
|
}
|
|
147
151
|
ngAfterViewInit() {
|
|
148
|
-
|
|
149
|
-
if (fragment) {
|
|
150
|
-
setTimeout(() => {
|
|
151
|
-
this.fragmentId = fragment;
|
|
152
|
-
this.cdRef.detectChanges();
|
|
153
|
-
const fgm = document.getElementById(fragment);
|
|
154
|
-
fgm?.scrollIntoView();
|
|
155
|
-
}, 1);
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
}
|
|
159
|
-
ngOnDestroy() {
|
|
160
|
-
if (this.subscription) {
|
|
161
|
-
this.subscription.unsubscribe();
|
|
162
|
-
}
|
|
152
|
+
// Fragment scrolling is handled in constructor via afterNextRender
|
|
163
153
|
}
|
|
164
154
|
onNavClick(fragmentId) {
|
|
165
155
|
this._scrollToFragment(fragmentId);
|
|
@@ -170,25 +160,24 @@ class DocPageDevGuideComponent {
|
|
|
170
160
|
const pathNameArray = currentUrl.pathname.split('/');
|
|
171
161
|
this.headers = [];
|
|
172
162
|
if (url) {
|
|
173
|
-
mdPath = url.
|
|
163
|
+
mdPath = url.substring(1);
|
|
174
164
|
}
|
|
175
165
|
else {
|
|
176
166
|
mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
|
|
177
167
|
}
|
|
178
168
|
contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
|
|
179
|
-
if (pathNameArray[1] !== this.showcaseName) {
|
|
169
|
+
if (pathNameArray[1] !== this.showcaseName()) {
|
|
180
170
|
contextRoot += `/${pathNameArray[1]}`;
|
|
181
171
|
}
|
|
182
172
|
const filePath = `${contextRoot}/assets/${mdPath}.md`;
|
|
183
|
-
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder}`))).subscribe((md) => {
|
|
173
|
+
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder()}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder()}`))).subscribe((md) => {
|
|
184
174
|
this.markdown = md;
|
|
185
175
|
this.cdRef.detectChanges();
|
|
186
176
|
const top = document.getElementById('top');
|
|
187
|
-
top
|
|
177
|
+
top?.scrollIntoView();
|
|
188
178
|
});
|
|
189
179
|
}
|
|
190
180
|
_scrollToFragment(fragmentId) {
|
|
191
|
-
// forcing reload when deep link with fragment
|
|
192
181
|
this.router.onSameUrlNavigation = 'reload';
|
|
193
182
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
|
|
194
183
|
if (fragmentId) {
|
|
@@ -201,45 +190,44 @@ class DocPageDevGuideComponent {
|
|
|
201
190
|
}
|
|
202
191
|
}
|
|
203
192
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
204
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageDevGuideComponent, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide", inputs: { rootDocsFolder: "rootDocsFolder",
|
|
193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageDevGuideComponent, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide", inputs: { rootDocsFolder: { classPropertyName: "rootDocsFolder", publicName: "rootDocsFolder", isSignal: true, isRequired: false, transformFunction: null }, showcaseName: { classPropertyName: "showcaseName", publicName: "showcaseName", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-doc-page" }, ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\" />\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i2$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
205
194
|
}
|
|
206
195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponent, decorators: [{
|
|
207
196
|
type: Component,
|
|
208
|
-
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, imports: [
|
|
197
|
+
args: [{ selector: 'eui-showcase-doc-page-dev-guide', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
209
198
|
NgClass,
|
|
210
199
|
...EUI_PAGE,
|
|
211
|
-
MarkdownModule,
|
|
212
|
-
], 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\"
|
|
213
|
-
}], propDecorators: {
|
|
214
|
-
type: HostBinding,
|
|
215
|
-
args: ['class']
|
|
216
|
-
}], rootDocsFolder: [{
|
|
217
|
-
type: Input
|
|
218
|
-
}], showcaseName: [{
|
|
219
|
-
type: Input
|
|
220
|
-
}] } });
|
|
200
|
+
MarkdownModule,
|
|
201
|
+
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\" />\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
202
|
+
}], ctorParameters: () => [], propDecorators: { rootDocsFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootDocsFolder", required: false }] }], showcaseName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcaseName", required: false }] }] } });
|
|
221
203
|
|
|
222
204
|
class DocPageDevGuideComponentV2 {
|
|
223
205
|
constructor() {
|
|
224
|
-
this.
|
|
225
|
-
|
|
226
|
-
this.showcaseName = 'showcase-dev-guide'
|
|
206
|
+
this.rootDocsFolder = input('docs', /* @ts-ignore */
|
|
207
|
+
...(ngDevMode ? [{ debugName: "rootDocsFolder" }] : /* istanbul ignore next */ []));
|
|
208
|
+
this.showcaseName = input('showcase-dev-guide', /* @ts-ignore */
|
|
209
|
+
...(ngDevMode ? [{ debugName: "showcaseName" }] : /* istanbul ignore next */ []));
|
|
227
210
|
this.headers = [];
|
|
228
211
|
this.markdownService = inject(MarkdownService);
|
|
229
212
|
this.http = inject(HttpClient);
|
|
230
213
|
this.router = inject(Router);
|
|
231
214
|
this.route = inject(ActivatedRoute);
|
|
215
|
+
this.route.url.pipe(takeUntilDestroyed()).subscribe((u) => {
|
|
216
|
+
this._loadMdContent(`/${this.rootDocsFolder()}/` + u.join('/'));
|
|
217
|
+
});
|
|
218
|
+
this.route.fragment.pipe(take(1), takeUntilDestroyed()).subscribe((fragment) => {
|
|
219
|
+
if (fragment) {
|
|
220
|
+
this.fragmentId = fragment;
|
|
221
|
+
afterNextRender(() => {
|
|
222
|
+
const fgm = document.getElementById(fragment);
|
|
223
|
+
fgm?.scrollIntoView();
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
});
|
|
232
227
|
}
|
|
233
228
|
ngOnInit() {
|
|
234
|
-
this.subscription = this.route.url.subscribe((u) => {
|
|
235
|
-
this._loadMdContent(`/${this.rootDocsFolder}/` + u.join('/'));
|
|
236
|
-
});
|
|
237
229
|
/**
|
|
238
230
|
* callback for heading renderer. It will be called for each heading in the markdown.
|
|
239
|
-
*
|
|
240
|
-
* @param tokens the heading tokens
|
|
241
|
-
* @param depth the heading level
|
|
242
|
-
* @param raw the raw heading text
|
|
243
231
|
*/
|
|
244
232
|
this.markdownService.renderer.heading = ({ raw, text, depth }) => {
|
|
245
233
|
if (depth === 2 || depth === 3) {
|
|
@@ -253,20 +241,7 @@ class DocPageDevGuideComponentV2 {
|
|
|
253
241
|
};
|
|
254
242
|
}
|
|
255
243
|
ngAfterViewInit() {
|
|
256
|
-
|
|
257
|
-
if (fragment) {
|
|
258
|
-
setTimeout(() => {
|
|
259
|
-
this.fragmentId = fragment;
|
|
260
|
-
const fgm = document.getElementById(fragment);
|
|
261
|
-
fgm.scrollIntoView();
|
|
262
|
-
}, 1);
|
|
263
|
-
}
|
|
264
|
-
});
|
|
265
|
-
}
|
|
266
|
-
ngOnDestroy() {
|
|
267
|
-
if (this.subscription) {
|
|
268
|
-
this.subscription.unsubscribe();
|
|
269
|
-
}
|
|
244
|
+
// Fragment scrolling is handled in constructor via afterNextRender
|
|
270
245
|
}
|
|
271
246
|
onNavClick(fragmentId) {
|
|
272
247
|
this._scrollToFragment(fragmentId);
|
|
@@ -277,24 +252,23 @@ class DocPageDevGuideComponentV2 {
|
|
|
277
252
|
const pathNameArray = currentUrl.pathname.split('/');
|
|
278
253
|
this.headers = [];
|
|
279
254
|
if (url) {
|
|
280
|
-
mdPath = url.
|
|
255
|
+
mdPath = url.substring(1);
|
|
281
256
|
}
|
|
282
257
|
else {
|
|
283
258
|
mdPath = pathNameArray.slice(pathNameArray.length - 3).join('/');
|
|
284
259
|
}
|
|
285
260
|
contextRoot = `${currentUrl.protocol}//${currentUrl.host}`;
|
|
286
|
-
if (pathNameArray[1] !== this.showcaseName) {
|
|
261
|
+
if (pathNameArray[1] !== this.showcaseName()) {
|
|
287
262
|
contextRoot += `/${pathNameArray[1]}`;
|
|
288
263
|
}
|
|
289
264
|
const filePath = `${contextRoot}/assets/${mdPath}.md`;
|
|
290
|
-
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder}`))).subscribe((md) => {
|
|
265
|
+
this.http.get(filePath, { responseType: 'text' }).pipe(map((md) => md.replace(new RegExp(`assets/${this.rootDocsFolder()}`, 'g'), `${contextRoot}/assets/${this.rootDocsFolder()}`))).subscribe((md) => {
|
|
291
266
|
this.markdown = md;
|
|
292
267
|
const top = document.getElementById('top');
|
|
293
|
-
top
|
|
268
|
+
top?.scrollIntoView();
|
|
294
269
|
});
|
|
295
270
|
}
|
|
296
271
|
_scrollToFragment(fragmentId) {
|
|
297
|
-
// forcing reload when deep link with fragment
|
|
298
272
|
this.router.onSameUrlNavigation = 'reload';
|
|
299
273
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId });
|
|
300
274
|
if (fragmentId) {
|
|
@@ -307,23 +281,16 @@ class DocPageDevGuideComponentV2 {
|
|
|
307
281
|
}
|
|
308
282
|
}
|
|
309
283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponentV2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
310
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageDevGuideComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide-v2", inputs: { rootDocsFolder: "rootDocsFolder",
|
|
284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageDevGuideComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-dev-guide-v2", inputs: { rootDocsFolder: { classPropertyName: "rootDocsFolder", publicName: "rootDocsFolder", isSignal: true, isRequired: false, transformFunction: null }, showcaseName: { classPropertyName: "showcaseName", publicName: "showcaseName", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-doc-page" }, ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\" />\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i3$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i3$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3$1.EuiPageColumn, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "component", type: i3$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { kind: "ngmodule", type: MarkdownModule }, { kind: "component", type: i2$1.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
311
285
|
}
|
|
312
286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageDevGuideComponentV2, decorators: [{
|
|
313
287
|
type: Component,
|
|
314
|
-
args: [{ selector: 'eui-showcase-doc-page-dev-guide-v2', encapsulation: ViewEncapsulation.None, imports: [
|
|
288
|
+
args: [{ selector: 'eui-showcase-doc-page-dev-guide-v2', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
315
289
|
NgClass,
|
|
316
290
|
...EUI_PAGE$1,
|
|
317
|
-
MarkdownModule,
|
|
318
|
-
], 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\"
|
|
319
|
-
}], propDecorators: {
|
|
320
|
-
type: HostBinding,
|
|
321
|
-
args: ['class']
|
|
322
|
-
}], rootDocsFolder: [{
|
|
323
|
-
type: Input
|
|
324
|
-
}], showcaseName: [{
|
|
325
|
-
type: Input
|
|
326
|
-
}] } });
|
|
291
|
+
MarkdownModule,
|
|
292
|
+
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <span id=\"top\"></span>\n <markdown class=\"doc-content\" [data]=\"markdown\" />\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column class=\"eui-u-hidden-mobile\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @for (header of headers; track header.id) {\n <li class=\"doc-page-navigation-item\" (click)=\"onNavClick(header.id)\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === header.id\">\n <span [ngClass]=\"header.level === 3 ? 'eui-u-ml-m eui-u-f-regular': ''\">\n {{header.label}}\n </span>\n </li>\n }\n </ul>\n </div>\n </eui-page-column-body>\n\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
293
|
+
}], ctorParameters: () => [], propDecorators: { rootDocsFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootDocsFolder", required: false }] }], showcaseName: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcaseName", required: false }] }] } });
|
|
327
294
|
|
|
328
295
|
const polyfillsFile = 'import \'zone.js\';';
|
|
329
296
|
const mainFile = (moduleName, componentName) => `
|
|
@@ -847,13 +814,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
847
814
|
|
|
848
815
|
class DocSampleComponent {
|
|
849
816
|
constructor() {
|
|
850
|
-
this.id = ''
|
|
851
|
-
|
|
852
|
-
this.
|
|
853
|
-
|
|
854
|
-
this.
|
|
855
|
-
|
|
856
|
-
this.
|
|
817
|
+
this.id = input('', /* @ts-ignore */
|
|
818
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
819
|
+
this.label = input('', /* @ts-ignore */
|
|
820
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
821
|
+
this.category = input(undefined, /* @ts-ignore */
|
|
822
|
+
...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
|
|
823
|
+
this.description = input(undefined, /* @ts-ignore */
|
|
824
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
825
|
+
this.defaultValue = input(undefined, /* @ts-ignore */
|
|
826
|
+
...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
|
|
827
|
+
this.styleClass = input('', /* @ts-ignore */
|
|
828
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
829
|
+
this.renderPlayground = input(null, { ...(ngDevMode ? { debugName: "renderPlayground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
830
|
+
this.isCodeButtonVisible = input(true, { ...(ngDevMode ? { debugName: "isCodeButtonVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
831
|
+
this.isInnerSection = input(false, { ...(ngDevMode ? { debugName: "isInnerSection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
857
832
|
this.isCodeLoaded = false;
|
|
858
833
|
this.isCodeLoading = false;
|
|
859
834
|
this.isCodeExpanded = false;
|
|
@@ -868,11 +843,6 @@ class DocSampleComponent {
|
|
|
868
843
|
this.clipboard = inject(Clipboard);
|
|
869
844
|
this.router = inject(Router);
|
|
870
845
|
}
|
|
871
|
-
ngAfterContentInit() {
|
|
872
|
-
if (!this.label) {
|
|
873
|
-
this.label = this.id;
|
|
874
|
-
}
|
|
875
|
-
}
|
|
876
846
|
copyCurrentUrlToClipboard(id) {
|
|
877
847
|
try {
|
|
878
848
|
const baseDomain = window?.location?.origin;
|
|
@@ -934,15 +904,16 @@ class DocSampleComponent {
|
|
|
934
904
|
*/
|
|
935
905
|
onStackblitzOpen() {
|
|
936
906
|
this.loadCodeFiles().subscribe(() => {
|
|
937
|
-
this.sb.openStackBlitzWithFiles(this.sampleFiles.map(f => ({ name: f.name, content: f.content })), 'eUI Playground', this.id);
|
|
907
|
+
this.sb.openStackBlitzWithFiles(this.sampleFiles.map(f => ({ name: f.name, content: f.content })), 'eUI Playground', this.id());
|
|
938
908
|
});
|
|
939
909
|
}
|
|
940
910
|
/**
|
|
941
911
|
* returns whenever playground should render. Input has precedence over Configuration service
|
|
942
912
|
*/
|
|
943
913
|
shouldRenderPlayground() {
|
|
944
|
-
|
|
945
|
-
|
|
914
|
+
const renderPlayground = this.renderPlayground();
|
|
915
|
+
return renderPlayground === undefined || renderPlayground === null ?
|
|
916
|
+
this.conf.configuration().renderPlayground : renderPlayground;
|
|
946
917
|
}
|
|
947
918
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
948
919
|
_getComponent(id) {
|
|
@@ -1018,7 +989,7 @@ class DocSampleComponent {
|
|
|
1018
989
|
}
|
|
1019
990
|
samplePathArray = samplePathArray.reverse();
|
|
1020
991
|
samplePathArray.push('samples');
|
|
1021
|
-
samplePathArray.push(this.id);
|
|
992
|
+
samplePathArray.push(this.id());
|
|
1022
993
|
return `assets/samples/${samplePathArray.join('/')}`;
|
|
1023
994
|
}
|
|
1024
995
|
getFileLabel(name, type) {
|
|
@@ -1032,9 +1003,7 @@ class DocSampleComponent {
|
|
|
1032
1003
|
return languages[type] || 'language-markup';
|
|
1033
1004
|
}
|
|
1034
1005
|
/**
|
|
1035
|
-
* filter out the content between the pattern below in both html and ts files.
|
|
1036
|
-
* exclude some part of the code from being rendered in the code sample or stackblitz but we still want to keep
|
|
1037
|
-
* it in the actual file for other purposes (e.g. for testing, or for rendering in the playground but not in the code sample)
|
|
1006
|
+
* filter out the content between the pattern below in both html and ts files.
|
|
1038
1007
|
* @param content the content of the file to filter out the exclude content
|
|
1039
1008
|
*/
|
|
1040
1009
|
filterOutExcludeContent(content) {
|
|
@@ -1043,90 +1012,101 @@ class DocSampleComponent {
|
|
|
1043
1012
|
return content.replace(patternHtml, '').replace(patternTS, '');
|
|
1044
1013
|
}
|
|
1045
1014
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1046
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocSampleComponent, isStandalone: true, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground:
|
|
1015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocSampleComponent, isStandalone: true, selector: "eui-showcase-doc-sample", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, renderPlayground: { classPropertyName: "renderPlayground", publicName: "renderPlayground", isSignal: true, isRequired: false, transformFunction: null }, isCodeButtonVisible: { classPropertyName: "isCodeButtonVisible", publicName: "isCodeButtonVisible", isSignal: true, isRequired: false, transformFunction: null }, isInnerSection: { classPropertyName: "isInnerSection", publicName: "isInnerSection", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-sample" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection()\">\n {{ label() || id() }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n aria-label=\"Click to copy link url to keyboard\"\n (click)=\"copyCurrentUrlToClipboard(id())\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n </button>\n </div>\n @if (shouldRenderPlayground()) {\n <div class=\"doc-sample-title__items eui-u-mr-s\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"eui-flash\" />\n </button>\n }\n </div>\n }\n <div class=\"doc-sample-title__items\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n @if (isCodeLoading) {\n <eui-icon-svg isLoading />\n }\n @if (!isCodeExpanded) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded) {\n <span euiLabel>Hide Code</span>\n }\n <eui-icon-svg icon=\"eui-code\" />\n </button>\n }\n </div>\n</div>\n\n@if(isCodeExpanded) {\n <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n <eui-card-content>\n <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n @for (file of sampleFiles; track file.name) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>{{ file.label }}</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code [class]=\"getCodeLanguage(file.type)\" euiCode>{{ file.type === 'typescript' ? filterOutModuleAndImports(file.content) : file.content }}</code></pre>\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n}\n\n<ng-content />\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-5xl);margin-top:var(--eui-s-10xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-divider)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;font:var(--eui-f-xl-semi-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-text-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;margin:var(--eui-s-9xl) 0 var(--eui-s-xs) 0;width:auto;display:table;color:var(--eui-c-info);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);font:var(--eui-f)!important}\n"], dependencies: [{ kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1047
1016
|
}
|
|
1048
1017
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSampleComponent, decorators: [{
|
|
1049
1018
|
type: Component,
|
|
1050
|
-
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, imports: [
|
|
1051
|
-
CommonModule,
|
|
1019
|
+
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, host: { class: 'eui-showcase-doc-sample' }, imports: [
|
|
1052
1020
|
...EUI_TABS,
|
|
1053
1021
|
...EUI_LABEL,
|
|
1054
1022
|
...EUI_CARD,
|
|
1055
1023
|
...EUI_ICON,
|
|
1056
1024
|
...EUI_BUTTON,
|
|
1057
1025
|
EuiCodeHighlighterDirective,
|
|
1058
|
-
], 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
|
|
1059
|
-
}], propDecorators: { id: [{
|
|
1060
|
-
type: Input
|
|
1061
|
-
}], label: [{
|
|
1062
|
-
type: Input
|
|
1063
|
-
}], category: [{
|
|
1064
|
-
type: Input
|
|
1065
|
-
}], description: [{
|
|
1066
|
-
type: Input
|
|
1067
|
-
}], defaultValue: [{
|
|
1068
|
-
type: Input
|
|
1069
|
-
}], styleClass: [{
|
|
1070
|
-
type: Input
|
|
1071
|
-
}], renderPlayground: [{
|
|
1072
|
-
type: Input,
|
|
1073
|
-
args: [{ transform: booleanAttribute }]
|
|
1074
|
-
}], isCodeButtonVisible: [{
|
|
1075
|
-
type: Input,
|
|
1076
|
-
args: [{ transform: booleanAttribute }]
|
|
1077
|
-
}], isInnerSection: [{
|
|
1078
|
-
type: Input,
|
|
1079
|
-
args: [{ transform: booleanAttribute }]
|
|
1080
|
-
}], classes: [{
|
|
1081
|
-
type: HostBinding,
|
|
1082
|
-
args: ['class']
|
|
1083
|
-
}] } });
|
|
1026
|
+
], template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection()\">\n {{ label() || id() }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n aria-label=\"Click to copy link url to keyboard\"\n (click)=\"copyCurrentUrlToClipboard(id())\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"eui-link\" size=\"l\" fillColor=\"secondary\" />\n </button>\n </div>\n @if (shouldRenderPlayground()) {\n <div class=\"doc-sample-title__items eui-u-mr-s\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"eui-flash\" />\n </button>\n }\n </div>\n }\n <div class=\"doc-sample-title__items\">\n @if (isCodeButtonVisible()) {\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeXS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n @if (isCodeLoading) {\n <eui-icon-svg isLoading />\n }\n @if (!isCodeExpanded) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded) {\n <span euiLabel>Hide Code</span>\n }\n <eui-icon-svg icon=\"eui-code\" />\n </button>\n }\n </div>\n</div>\n\n@if(isCodeExpanded) {\n <eui-card euiNoContentPadding class=\"eui-u-mb-m\">\n <eui-card-content>\n <eui-tabs (tabActivate)=\"onTabActivate($event)\">\n @for (file of sampleFiles; track file.name) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>{{ file.label }}</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code [class]=\"getCodeLanguage(file.type)\" euiCode>{{ file.type === 'typescript' ? filterOutModuleAndImports(file.content) : file.content }}</code></pre>\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n}\n\n<ng-content />\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-5xl);margin-top:var(--eui-s-10xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-divider)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;font:var(--eui-f-xl-semi-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-text-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;margin:var(--eui-s-9xl) 0 var(--eui-s-xs) 0;width:auto;display:table;color:var(--eui-c-info);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary);font:var(--eui-f)!important}\n"] }]
|
|
1027
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], renderPlayground: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderPlayground", required: false }] }], isCodeButtonVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCodeButtonVisible", required: false }] }], isInnerSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInnerSection", required: false }] }] } });
|
|
1084
1028
|
|
|
1085
1029
|
class DocSectionComponent {
|
|
1086
1030
|
constructor() {
|
|
1087
|
-
this.
|
|
1088
|
-
|
|
1089
|
-
this.label = ''
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
if (!this.label) {
|
|
1094
|
-
this.label = this.id;
|
|
1095
|
-
}
|
|
1031
|
+
this.id = input('', /* @ts-ignore */
|
|
1032
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1033
|
+
this.label = input('', /* @ts-ignore */
|
|
1034
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1035
|
+
this.styleClass = input('', /* @ts-ignore */
|
|
1036
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
1096
1037
|
}
|
|
1097
1038
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1098
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: DocSectionComponent, isStandalone: true, selector: "eui-showcase-doc-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-section" }, ngImport: i0, template: "<div id=\"sections\" class=\"doc-section-title\">{{label() || id()}}</div>\n\n<ng-content />\n", styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-7xl);padding:var(--eui-s-m)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-divider-light);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-divider);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1099
1040
|
}
|
|
1100
1041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionComponent, decorators: [{
|
|
1101
1042
|
type: Component,
|
|
1102
|
-
args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None,
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
}], id: [{
|
|
1107
|
-
type: Input
|
|
1108
|
-
}], label: [{
|
|
1109
|
-
type: Input
|
|
1110
|
-
}], styleClass: [{
|
|
1111
|
-
type: Input
|
|
1112
|
-
}] } });
|
|
1043
|
+
args: [{ selector: 'eui-showcase-doc-section', encapsulation: ViewEncapsulation.None, host: {
|
|
1044
|
+
class: 'eui-showcase-doc-section',
|
|
1045
|
+
}, template: "<div id=\"sections\" class=\"doc-section-title\">{{label() || id()}}</div>\n\n<ng-content />\n", styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-s-7xl);padding:var(--eui-s-m)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-xs);border-bottom:1px solid var(--eui-c-divider-light);font:var(--eui-f-xl-bold)}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-divider);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-primary-dark);font:var(--eui-f-l)}.doc-sample-section-title:first-child{margin-top:0}\n"] }]
|
|
1046
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
|
|
1113
1047
|
|
|
1114
1048
|
class DocPageComponent {
|
|
1115
1049
|
constructor() {
|
|
1116
|
-
this.
|
|
1117
|
-
|
|
1118
|
-
this.
|
|
1119
|
-
|
|
1120
|
-
this.
|
|
1121
|
-
|
|
1122
|
-
this.
|
|
1123
|
-
this.
|
|
1124
|
-
this.
|
|
1050
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1051
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1052
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1053
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1054
|
+
this.subLabel = input(undefined, /* @ts-ignore */
|
|
1055
|
+
...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
|
|
1056
|
+
this.isNotReadyInput = input(false, { ...(ngDevMode ? { debugName: "isNotReadyInput" } : /* istanbul ignore next */ {}), alias: 'isNotReady' });
|
|
1057
|
+
this.isDeprecatedInput = input(false, { ...(ngDevMode ? { debugName: "isDeprecatedInput" } : /* istanbul ignore next */ {}), alias: 'isDeprecated' });
|
|
1058
|
+
this.isLegacyInput = input(false, { ...(ngDevMode ? { debugName: "isLegacyInput" } : /* istanbul ignore next */ {}), alias: 'isLegacy' });
|
|
1059
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
1060
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1061
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
1062
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
1063
|
+
this.isNavigationVisible = input(true, /* @ts-ignore */
|
|
1064
|
+
...(ngDevMode ? [{ debugName: "isNavigationVisible" }] : /* istanbul ignore next */ []));
|
|
1065
|
+
this.hasApi = input(true, /* @ts-ignore */
|
|
1066
|
+
...(ngDevMode ? [{ debugName: "hasApi" }] : /* istanbul ignore next */ []));
|
|
1067
|
+
this.hasA11y = input(true, /* @ts-ignore */
|
|
1068
|
+
...(ngDevMode ? [{ debugName: "hasA11y" }] : /* istanbul ignore next */ []));
|
|
1069
|
+
this.customApiUrl = input(null, /* @ts-ignore */
|
|
1070
|
+
...(ngDevMode ? [{ debugName: "customApiUrl" }] : /* istanbul ignore next */ []));
|
|
1071
|
+
// Writable signals for properties that are both input-driven and internally mutated
|
|
1072
|
+
this.isNotReady = signal(false, /* @ts-ignore */
|
|
1073
|
+
...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
|
|
1074
|
+
this.isDeprecated = signal(false, /* @ts-ignore */
|
|
1075
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
1076
|
+
this.isLegacy = signal(false, /* @ts-ignore */
|
|
1077
|
+
...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
|
|
1125
1078
|
this.isLoading = true;
|
|
1126
1079
|
this.isNavClicked = true;
|
|
1127
1080
|
this.hasCategories = false;
|
|
1128
1081
|
this.categories = [];
|
|
1082
|
+
this.scrollHandler = null;
|
|
1083
|
+
this.scrollContainer = null;
|
|
1084
|
+
this.samples = contentChildren(DocSampleComponent, { ...(ngDevMode ? { debugName: "samples" } : /* istanbul ignore next */ {}), descendants: true });
|
|
1085
|
+
this.sections = contentChildren(DocSectionComponent, { ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), descendants: true });
|
|
1086
|
+
this.pageOverviewContent = contentChildren(forwardRef(() => DocPageOverviewContentDirective), /* @ts-ignore */
|
|
1087
|
+
...(ngDevMode ? [{ debugName: "pageOverviewContent" }] : /* istanbul ignore next */ []));
|
|
1088
|
+
this.pageOverviewDefaultContent = contentChildren(forwardRef(() => DocPageOverviewDefaultContentDirective), /* @ts-ignore */
|
|
1089
|
+
...(ngDevMode ? [{ debugName: "pageOverviewDefaultContent" }] : /* istanbul ignore next */ []));
|
|
1090
|
+
this.pageSamplesContent = contentChildren(forwardRef(() => DocPageSamplesContentDirective), /* @ts-ignore */
|
|
1091
|
+
...(ngDevMode ? [{ debugName: "pageSamplesContent" }] : /* istanbul ignore next */ []));
|
|
1092
|
+
this.pageSectionsContent = contentChildren(forwardRef(() => DocPageSectionsContentDirective), /* @ts-ignore */
|
|
1093
|
+
...(ngDevMode ? [{ debugName: "pageSectionsContent" }] : /* istanbul ignore next */ []));
|
|
1094
|
+
this.pageInteractiveContent = contentChildren(forwardRef(() => DocPageInteractiveContentDirective), /* @ts-ignore */
|
|
1095
|
+
...(ngDevMode ? [{ debugName: "pageInteractiveContent" }] : /* istanbul ignore next */ []));
|
|
1096
|
+
this.pageAccessibilityContent = contentChildren(forwardRef(() => DocPageAccessibilityContentDirective), /* @ts-ignore */
|
|
1097
|
+
...(ngDevMode ? [{ debugName: "pageAccessibilityContent" }] : /* istanbul ignore next */ []));
|
|
1098
|
+
this.pageApiContent = contentChildren(forwardRef(() => DocPageApiContentDirective), /* @ts-ignore */
|
|
1099
|
+
...(ngDevMode ? [{ debugName: "pageApiContent" }] : /* istanbul ignore next */ []));
|
|
1100
|
+
this.pageThemingContent = contentChildren(forwardRef(() => DocPageThemingContentDirective), /* @ts-ignore */
|
|
1101
|
+
...(ngDevMode ? [{ debugName: "pageThemingContent" }] : /* istanbul ignore next */ []));
|
|
1102
|
+
this.tabsContent = viewChild('tabsContent', /* @ts-ignore */
|
|
1103
|
+
...(ngDevMode ? [{ debugName: "tabsContent" }] : /* istanbul ignore next */ []));
|
|
1129
1104
|
this.sanitizer = inject(DomSanitizer);
|
|
1105
|
+
this.location = inject(Location);
|
|
1106
|
+
this.router = inject(Router);
|
|
1107
|
+
this.route = inject(ActivatedRoute);
|
|
1108
|
+
this.asService = inject(EuiAppShellService);
|
|
1109
|
+
this.destroyRef = inject(DestroyRef);
|
|
1130
1110
|
this.TABS_DEF = [
|
|
1131
1111
|
{ index: 0, id: 'samples' },
|
|
1132
1112
|
{ index: 1, id: 'api' },
|
|
@@ -1145,105 +1125,47 @@ class DocPageComponent {
|
|
|
1145
1125
|
{ index: 70, id: 'Composition' },
|
|
1146
1126
|
{ index: 80, id: 'Misc' },
|
|
1147
1127
|
];
|
|
1148
|
-
this.location = inject(Location);
|
|
1149
|
-
this.router = inject(Router);
|
|
1150
|
-
this.route = inject(ActivatedRoute);
|
|
1151
|
-
this.asService = inject(EuiAppShellService);
|
|
1152
1128
|
}
|
|
1153
1129
|
ngOnInit() {
|
|
1154
|
-
|
|
1130
|
+
// Sync input signals to writable signals
|
|
1131
|
+
if (this.isNotReadyInput())
|
|
1132
|
+
this.isNotReady.set(true);
|
|
1133
|
+
if (this.isDeprecatedInput())
|
|
1134
|
+
this.isDeprecated.set(true);
|
|
1135
|
+
if (this.isLegacyInput())
|
|
1136
|
+
this.isLegacy.set(true);
|
|
1137
|
+
afterNextRender(() => {
|
|
1155
1138
|
this.asService.isBlockDocumentActive = true;
|
|
1156
1139
|
});
|
|
1157
1140
|
this.appMetadata = this.asService.state.appMetadata;
|
|
1158
|
-
|
|
1159
|
-
|
|
1141
|
+
const id = this.id();
|
|
1142
|
+
if (id && !this.label()) {
|
|
1143
|
+
// label is a signal, but it's an input - we can't mutate it.
|
|
1144
|
+
// The template already handles id() as fallback via label() || id()
|
|
1160
1145
|
}
|
|
1161
1146
|
this.fragmentId = this.route.snapshot.fragment;
|
|
1162
1147
|
}
|
|
1163
1148
|
ngAfterViewInit() {
|
|
1164
|
-
//
|
|
1149
|
+
// Getting API url
|
|
1165
1150
|
try {
|
|
1166
1151
|
this.apiUrl = this._getApiUrl();
|
|
1167
|
-
|
|
1152
|
+
afterNextRender(() => {
|
|
1168
1153
|
this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
|
|
1169
1154
|
});
|
|
1170
1155
|
}
|
|
1171
1156
|
catch (e) {
|
|
1172
|
-
|
|
1157
|
+
// API URL construction failed - non-critical
|
|
1173
1158
|
}
|
|
1174
|
-
|
|
1175
|
-
const tab = this.TABS_DEF.
|
|
1176
|
-
const
|
|
1177
|
-
|
|
1178
|
-
if (!tab) {
|
|
1179
|
-
tabIndex = sampleTabIndex;
|
|
1180
|
-
}
|
|
1181
|
-
else {
|
|
1182
|
-
tabIndex = tab.index;
|
|
1183
|
-
}
|
|
1184
|
-
// constructing categories, if at least one set, if not backward compat with old display
|
|
1185
|
-
const categoriesJson = {};
|
|
1186
|
-
this.samples.forEach((s) => {
|
|
1187
|
-
// "Default" or "_default" sample are always put first in the nav list
|
|
1188
|
-
if (!s.category && s.id !== '_default' && s.id !== 'Default' && s.id !== 'default') {
|
|
1189
|
-
if (!categoriesJson['others']) {
|
|
1190
|
-
categoriesJson['others'] = [];
|
|
1191
|
-
categoriesJson['others'].push(s);
|
|
1192
|
-
}
|
|
1193
|
-
else {
|
|
1194
|
-
categoriesJson['others'].push(s);
|
|
1195
|
-
}
|
|
1196
|
-
}
|
|
1197
|
-
else {
|
|
1198
|
-
if (s.id === '_default' || s.id === 'Default' || s.id === 'default') {
|
|
1199
|
-
if (!categoriesJson['Base']) {
|
|
1200
|
-
categoriesJson['Base'] = [];
|
|
1201
|
-
categoriesJson['Base'].push(s);
|
|
1202
|
-
}
|
|
1203
|
-
else {
|
|
1204
|
-
categoriesJson['Base'].push(s);
|
|
1205
|
-
}
|
|
1206
|
-
}
|
|
1207
|
-
else {
|
|
1208
|
-
this.hasCategories = true;
|
|
1209
|
-
if (!categoriesJson[s.category]) {
|
|
1210
|
-
categoriesJson[s.category] = [];
|
|
1211
|
-
categoriesJson[s.category].push(s);
|
|
1212
|
-
}
|
|
1213
|
-
else {
|
|
1214
|
-
categoriesJson[s.category].push(s);
|
|
1215
|
-
}
|
|
1216
|
-
}
|
|
1217
|
-
}
|
|
1218
|
-
});
|
|
1219
|
-
// making the list of categories iterable for display
|
|
1220
|
-
// console.log(categoriesJson)
|
|
1221
|
-
Object.keys(categoriesJson).forEach((c) => {
|
|
1222
|
-
const normalizedKey = c.toLowerCase();
|
|
1223
|
-
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1224
|
-
if (existingCategory) {
|
|
1225
|
-
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => {
|
|
1226
|
-
return a.label.localeCompare(b.label);
|
|
1227
|
-
});
|
|
1228
|
-
}
|
|
1229
|
-
else {
|
|
1230
|
-
this.categories.push({
|
|
1231
|
-
name: c,
|
|
1232
|
-
samples: categoriesJson[c].sort((a, b) => {
|
|
1233
|
-
return a.label.localeCompare(b.label);
|
|
1234
|
-
}),
|
|
1235
|
-
});
|
|
1236
|
-
}
|
|
1237
|
-
});
|
|
1238
|
-
// push the "others" at the end of the nav list
|
|
1239
|
-
this.categories.sort((a, b) => {
|
|
1240
|
-
return this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name);
|
|
1241
|
-
});
|
|
1242
|
-
this.categories.push(this.categories.splice(this.categories.findIndex(v => v.name == 'others'), 1)[0]);
|
|
1159
|
+
afterNextRender(() => {
|
|
1160
|
+
const tab = this.TABS_DEF.find((t) => t.id === this.fragmentId);
|
|
1161
|
+
const tabIndex = tab ? tab.index : 0;
|
|
1162
|
+
this._buildCategories();
|
|
1243
1163
|
setTimeout(() => {
|
|
1244
1164
|
this._scrollToFragment(this.fragmentId, tabIndex, true, true);
|
|
1245
1165
|
this.asService.isBlockDocumentActive = false;
|
|
1246
1166
|
this.isLoading = false;
|
|
1167
|
+
this.isNavClicked = false;
|
|
1168
|
+
setTimeout(() => this.setupScrollSpy(), 500);
|
|
1247
1169
|
}, 1);
|
|
1248
1170
|
});
|
|
1249
1171
|
}
|
|
@@ -1251,30 +1173,121 @@ class DocPageComponent {
|
|
|
1251
1173
|
const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
|
|
1252
1174
|
return category ? category.index : this.CATEGORIES_DEF.find(cat => cat.id === 'free-category').index;
|
|
1253
1175
|
}
|
|
1176
|
+
setupScrollSpy() {
|
|
1177
|
+
const hostEl = document.querySelector('.eui-doc-page');
|
|
1178
|
+
if (!hostEl)
|
|
1179
|
+
return;
|
|
1180
|
+
const scrollEl = hostEl.querySelector('.eui-page-column__body');
|
|
1181
|
+
if (!scrollEl)
|
|
1182
|
+
return;
|
|
1183
|
+
this.scrollContainer = scrollEl;
|
|
1184
|
+
this.scrollHandler = () => {
|
|
1185
|
+
if (this.isNavClicked)
|
|
1186
|
+
return;
|
|
1187
|
+
const ids = [];
|
|
1188
|
+
['overview', 'samples', 'accessibility', 'theming', 'interactive'].forEach(id => {
|
|
1189
|
+
if (document.getElementById(id))
|
|
1190
|
+
ids.push(id);
|
|
1191
|
+
});
|
|
1192
|
+
this.samples()?.forEach((s) => {
|
|
1193
|
+
const sId = s.id();
|
|
1194
|
+
if (sId && document.getElementById(sId))
|
|
1195
|
+
ids.push(sId);
|
|
1196
|
+
});
|
|
1197
|
+
this.sections()?.forEach((s) => {
|
|
1198
|
+
const sId = s.id();
|
|
1199
|
+
if (sId && document.getElementById(sId))
|
|
1200
|
+
ids.push(sId);
|
|
1201
|
+
});
|
|
1202
|
+
const containerRect = scrollEl.getBoundingClientRect();
|
|
1203
|
+
let activeId = null;
|
|
1204
|
+
let bestDistance = -Infinity;
|
|
1205
|
+
for (const id of ids) {
|
|
1206
|
+
const el = document.getElementById(id);
|
|
1207
|
+
if (!el)
|
|
1208
|
+
continue;
|
|
1209
|
+
const elTop = el.getBoundingClientRect().top - containerRect.top;
|
|
1210
|
+
if (elTop <= 150 && elTop > bestDistance) {
|
|
1211
|
+
bestDistance = elTop;
|
|
1212
|
+
activeId = id;
|
|
1213
|
+
}
|
|
1214
|
+
}
|
|
1215
|
+
if (activeId && activeId !== this.fragmentId) {
|
|
1216
|
+
this.fragmentId = activeId;
|
|
1217
|
+
}
|
|
1218
|
+
};
|
|
1219
|
+
scrollEl.addEventListener('scroll', this.scrollHandler, { passive: true });
|
|
1220
|
+
this.destroyRef.onDestroy(() => {
|
|
1221
|
+
if (this.scrollHandler && this.scrollContainer) {
|
|
1222
|
+
this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
|
|
1223
|
+
}
|
|
1224
|
+
});
|
|
1225
|
+
}
|
|
1254
1226
|
onNavClick(fragmentId, tabIndex) {
|
|
1255
1227
|
this.fragmentId = fragmentId;
|
|
1256
1228
|
this.isNavClicked = true;
|
|
1257
1229
|
this._scrollToFragment(this.fragmentId, tabIndex, false, true);
|
|
1230
|
+
setTimeout(() => { this.isNavClicked = false; }, 800);
|
|
1258
1231
|
}
|
|
1259
1232
|
onTabActivate(event) {
|
|
1260
1233
|
if (!this.isLoading && !this.isNavClicked) {
|
|
1261
|
-
const tabId = this.TABS_DEF.
|
|
1262
|
-
|
|
1234
|
+
const tabId = this.TABS_DEF.find((t) => t.index === event.index)?.id;
|
|
1235
|
+
if (tabId) {
|
|
1236
|
+
this._scrollToFragment(tabId, event.index, false, false);
|
|
1237
|
+
}
|
|
1263
1238
|
}
|
|
1264
1239
|
this.isNavClicked = false;
|
|
1265
1240
|
}
|
|
1241
|
+
_buildCategories() {
|
|
1242
|
+
const categoriesJson = {};
|
|
1243
|
+
this.samples().forEach((s) => {
|
|
1244
|
+
const id = s.id();
|
|
1245
|
+
const category = s.category();
|
|
1246
|
+
const isDefault = id === '_default' || id === 'Default' || id === 'default';
|
|
1247
|
+
if (isDefault) {
|
|
1248
|
+
(categoriesJson['Base'] ??= []).push(s);
|
|
1249
|
+
}
|
|
1250
|
+
else if (category) {
|
|
1251
|
+
this.hasCategories = true;
|
|
1252
|
+
(categoriesJson[category] ??= []).push(s);
|
|
1253
|
+
}
|
|
1254
|
+
else {
|
|
1255
|
+
(categoriesJson['others'] ??= []).push(s);
|
|
1256
|
+
}
|
|
1257
|
+
});
|
|
1258
|
+
Object.keys(categoriesJson).forEach((c) => {
|
|
1259
|
+
const normalizedKey = c.toLowerCase();
|
|
1260
|
+
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1261
|
+
if (existingCategory) {
|
|
1262
|
+
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => a.label().localeCompare(b.label()));
|
|
1263
|
+
}
|
|
1264
|
+
else {
|
|
1265
|
+
this.categories.push({
|
|
1266
|
+
name: c,
|
|
1267
|
+
samples: categoriesJson[c].sort((a, b) => a.label().localeCompare(b.label())),
|
|
1268
|
+
});
|
|
1269
|
+
}
|
|
1270
|
+
});
|
|
1271
|
+
this.categories.sort((a, b) => this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name));
|
|
1272
|
+
const othersIndex = this.categories.findIndex(v => v.name === 'others');
|
|
1273
|
+
if (othersIndex > -1) {
|
|
1274
|
+
this.categories.push(this.categories.splice(othersIndex, 1)[0]);
|
|
1275
|
+
}
|
|
1276
|
+
}
|
|
1266
1277
|
_scrollToFragment(fragmentId, tabIndex, init, changeTab) {
|
|
1267
1278
|
if (init) {
|
|
1268
|
-
|
|
1269
|
-
|
|
1279
|
+
const tabsContent = this.tabsContent();
|
|
1280
|
+
if (tabsContent) {
|
|
1281
|
+
tabsContent.activateTab(tabIndex);
|
|
1270
1282
|
}
|
|
1271
1283
|
}
|
|
1272
1284
|
else {
|
|
1273
1285
|
if (changeTab) {
|
|
1274
1286
|
this.router.onSameUrlNavigation = 'reload';
|
|
1275
1287
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId }).then(() => {
|
|
1276
|
-
|
|
1277
|
-
|
|
1288
|
+
const tabsContent = this.tabsContent();
|
|
1289
|
+
if (tabsContent) {
|
|
1290
|
+
tabsContent.activateTab(tabIndex);
|
|
1278
1291
|
}
|
|
1279
1292
|
});
|
|
1280
1293
|
}
|
|
@@ -1310,21 +1323,9 @@ class DocPageComponent {
|
|
|
1310
1323
|
], [])
|
|
1311
1324
|
: [];
|
|
1312
1325
|
const flatLinks = flatten(this.asService.state.sidebarLinks);
|
|
1313
|
-
|
|
1314
|
-
// console.log('from get component status');
|
|
1315
|
-
// console.log(id);
|
|
1316
|
-
// console.log(flatLinks);
|
|
1317
|
-
// console.log(idBasedCmp);
|
|
1318
|
-
if (idBasedCmp) {
|
|
1319
|
-
return idBasedCmp;
|
|
1320
|
-
}
|
|
1321
|
-
else {
|
|
1322
|
-
const alternateIdBasedCmp = flatLinks.filter((item) => item.alternateId === id)[0];
|
|
1323
|
-
return alternateIdBasedCmp;
|
|
1324
|
-
}
|
|
1326
|
+
return flatLinks.find((item) => item.id === id) ?? flatLinks.find((item) => item.alternateId === id);
|
|
1325
1327
|
}
|
|
1326
1328
|
_getApiUrl() {
|
|
1327
|
-
// console.log('getApiUrl');
|
|
1328
1329
|
const url = window.location;
|
|
1329
1330
|
const protocol = url.protocol;
|
|
1330
1331
|
const host = url.host;
|
|
@@ -1334,7 +1335,7 @@ class DocPageComponent {
|
|
|
1334
1335
|
let category = pathNameArray[pathNameArray.length - 2];
|
|
1335
1336
|
let protocolGen = protocol;
|
|
1336
1337
|
let hostGen = host;
|
|
1337
|
-
|
|
1338
|
+
const cmpType = pathNameArray[pathNameArray.length - 1];
|
|
1338
1339
|
if (host.indexOf('localhost') > -1) {
|
|
1339
1340
|
protocolGen = 'https:';
|
|
1340
1341
|
hostGen = 'euidev.ecdevops.eu';
|
|
@@ -1359,7 +1360,6 @@ class DocPageComponent {
|
|
|
1359
1360
|
if (this.cmp && this.cmp.alternateApiCategory) {
|
|
1360
1361
|
category = this.cmp.alternateApiCategory;
|
|
1361
1362
|
}
|
|
1362
|
-
// console.log(this.cmp);
|
|
1363
1363
|
if (this.cmp) {
|
|
1364
1364
|
switch (this.cmp.status) {
|
|
1365
1365
|
case 'success':
|
|
@@ -1369,20 +1369,19 @@ class DocPageComponent {
|
|
|
1369
1369
|
case 'warning':
|
|
1370
1370
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1371
1371
|
this.stateTypeClass = 'warning';
|
|
1372
|
-
this.isDeprecated
|
|
1372
|
+
this.isDeprecated.set(true);
|
|
1373
1373
|
break;
|
|
1374
1374
|
case 'danger':
|
|
1375
1375
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1376
1376
|
this.stateTypeClass = 'danger';
|
|
1377
|
-
this.isLegacy
|
|
1377
|
+
this.isLegacy.set(true);
|
|
1378
1378
|
break;
|
|
1379
1379
|
case 'info':
|
|
1380
1380
|
this.stateLabel = 'NOT READY';
|
|
1381
1381
|
this.stateTypeClass = 'accent';
|
|
1382
|
-
this.isNotReady
|
|
1382
|
+
this.isNotReady.set(true);
|
|
1383
1383
|
break;
|
|
1384
1384
|
}
|
|
1385
|
-
// construct cmp module import string
|
|
1386
1385
|
if (this.cmp.metadata?.moduleName) {
|
|
1387
1386
|
this.cmpImportModule = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
|
|
1388
1387
|
}
|
|
@@ -1393,39 +1392,33 @@ class DocPageComponent {
|
|
|
1393
1392
|
}
|
|
1394
1393
|
}
|
|
1395
1394
|
catch (e) {
|
|
1396
|
-
|
|
1395
|
+
// Component status resolution failed - non-critical
|
|
1397
1396
|
}
|
|
1398
1397
|
});
|
|
1399
1398
|
const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
|
|
1400
|
-
|
|
1399
|
+
const customApiUrl = this.customApiUrl();
|
|
1400
|
+
return customApiUrl ? `${protocolGen}//${hostGen}/${docTypeRoot}/${customApiUrl}.html` : `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
|
|
1401
1401
|
}
|
|
1402
|
-
_camelCaseString(
|
|
1403
|
-
const stringArray =
|
|
1402
|
+
_camelCaseString(str, separator, first) {
|
|
1403
|
+
const stringArray = str.split(separator);
|
|
1404
1404
|
let result = '';
|
|
1405
|
-
let s;
|
|
1406
1405
|
for (let i = 0; i < stringArray.length; i++) {
|
|
1407
|
-
s = stringArray[i];
|
|
1406
|
+
const s = stringArray[i];
|
|
1408
1407
|
if (i === 0) {
|
|
1409
|
-
|
|
1410
|
-
result += s.substring(0, 1).toUpperCase() + s.substr(1);
|
|
1411
|
-
}
|
|
1412
|
-
else {
|
|
1413
|
-
result += s;
|
|
1414
|
-
}
|
|
1408
|
+
result += first ? s.substring(0, 1).toUpperCase() + s.substring(1) : s;
|
|
1415
1409
|
}
|
|
1416
1410
|
else {
|
|
1417
|
-
result += s.substring(0, 1).toUpperCase() + s.
|
|
1411
|
+
result += s.substring(0, 1).toUpperCase() + s.substring(1);
|
|
1418
1412
|
}
|
|
1419
1413
|
}
|
|
1420
1414
|
return result;
|
|
1421
1415
|
}
|
|
1422
1416
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1423
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y", customApiUrl: "customApiUrl" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip euiSizeS isFilled\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n {{ stateLabel }}\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <eui-tab-header>\n <eui-label> THEMING </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent.first.title }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\"\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-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.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.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReadyInput: { classPropertyName: "isNotReadyInput", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecatedInput: { classPropertyName: "isDeprecatedInput", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isLegacyInput: { classPropertyName: "isLegacyInput", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> THEMING </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n }\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() }}</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() }}</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() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n }\n @if (pageThemingContent().length === 0) {\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1424
1418
|
}
|
|
1425
1419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponent, decorators: [{
|
|
1426
1420
|
type: Component,
|
|
1427
|
-
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, imports: [
|
|
1428
|
-
CommonModule,
|
|
1421
|
+
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
1429
1422
|
DocPageCodeComponent,
|
|
1430
1423
|
EuiCodeHighlighterDirective,
|
|
1431
1424
|
...EUI_ALERT,
|
|
@@ -1433,69 +1426,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1433
1426
|
...EUI_PAGE,
|
|
1434
1427
|
...EUI_LABEL,
|
|
1435
1428
|
...EUI_CHIP,
|
|
1436
|
-
...EUI_BLOCK_CONTENT,
|
|
1437
|
-
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label }}\" subLabel=\"{{ subLabel }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip euiSizeS isFilled\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n {{ stateLabel }}\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <eui-tab-header>\n <eui-label> THEMING </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent.first.title }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\"\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-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"] }]
|
|
1438
|
-
}], propDecorators: { cssClass: [{
|
|
1439
|
-
type: HostBinding,
|
|
1440
|
-
args: ['class']
|
|
1441
|
-
}], id: [{
|
|
1442
|
-
type: Input
|
|
1443
|
-
}], label: [{
|
|
1444
|
-
type: Input
|
|
1445
|
-
}], subLabel: [{
|
|
1446
|
-
type: Input
|
|
1447
|
-
}], isNotReady: [{
|
|
1448
|
-
type: Input
|
|
1449
|
-
}], isDeprecated: [{
|
|
1450
|
-
type: Input
|
|
1451
|
-
}], isLegacy: [{
|
|
1452
|
-
type: Input
|
|
1453
|
-
}], codeFolder: [{
|
|
1454
|
-
type: Input
|
|
1455
|
-
}], showcase: [{
|
|
1456
|
-
type: Input
|
|
1457
|
-
}], isNavigationVisible: [{
|
|
1458
|
-
type: Input
|
|
1459
|
-
}], hasApi: [{
|
|
1460
|
-
type: Input
|
|
1461
|
-
}], hasA11y: [{
|
|
1462
|
-
type: Input
|
|
1463
|
-
}], customApiUrl: [{
|
|
1464
|
-
type: Input
|
|
1465
|
-
}], samples: [{
|
|
1466
|
-
type: ContentChildren,
|
|
1467
|
-
args: [DocSampleComponent, { descendants: true }]
|
|
1468
|
-
}], sections: [{
|
|
1469
|
-
type: ContentChildren,
|
|
1470
|
-
args: [DocSectionComponent, { descendants: true }]
|
|
1471
|
-
}], pageOverviewContent: [{
|
|
1472
|
-
type: ContentChildren,
|
|
1473
|
-
args: [forwardRef(() => DocPageOverviewContentDirective)]
|
|
1474
|
-
}], pageOverviewDefaultContent: [{
|
|
1475
|
-
type: ContentChildren,
|
|
1476
|
-
args: [forwardRef(() => DocPageOverviewDefaultContentDirective)]
|
|
1477
|
-
}], pageSamplesContent: [{
|
|
1478
|
-
type: ContentChildren,
|
|
1479
|
-
args: [forwardRef(() => DocPageSamplesContentDirective)]
|
|
1480
|
-
}], pageSectionsContent: [{
|
|
1481
|
-
type: ContentChildren,
|
|
1482
|
-
args: [forwardRef(() => DocPageSectionsContentDirective)]
|
|
1483
|
-
}], pageInteractiveContent: [{
|
|
1484
|
-
type: ContentChildren,
|
|
1485
|
-
args: [forwardRef(() => DocPageInteractiveContentDirective)]
|
|
1486
|
-
}], pageAccessibilityContent: [{
|
|
1487
|
-
type: ContentChildren,
|
|
1488
|
-
args: [forwardRef(() => DocPageAccessibilityContentDirective)]
|
|
1489
|
-
}], pageApiContent: [{
|
|
1490
|
-
type: ContentChildren,
|
|
1491
|
-
args: [forwardRef(() => DocPageApiContentDirective)]
|
|
1492
|
-
}], pageThemingContent: [{
|
|
1493
|
-
type: ContentChildren,
|
|
1494
|
-
args: [forwardRef(() => DocPageThemingContentDirective)]
|
|
1495
|
-
}], tabsContent: [{
|
|
1496
|
-
type: ViewChild,
|
|
1497
|
-
args: ['tabsContent']
|
|
1498
|
-
}] } });
|
|
1429
|
+
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> THEMING </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n }\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() }}</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() }}</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() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n }\n @if (pageThemingContent().length === 0) {\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() }}</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"] }]
|
|
1430
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReadyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecatedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isLegacyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirective), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirective), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirective), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirective), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirective), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirective), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirective), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirective), { isSignal: true }] }], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }] } });
|
|
1499
1431
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1500
1432
|
class DocPageOverviewContentDirective {
|
|
1501
1433
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -1515,20 +1447,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1515
1447
|
}] });
|
|
1516
1448
|
class DocPageInteractiveContentDirective {
|
|
1517
1449
|
constructor() {
|
|
1518
|
-
this.title = 'ADVANCED EXAMPLES'
|
|
1519
|
-
|
|
1450
|
+
this.title = input('ADVANCED EXAMPLES', /* @ts-ignore */
|
|
1451
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1452
|
+
this.subTitle = input('Advanced use cases', /* @ts-ignore */
|
|
1453
|
+
...(ngDevMode ? [{ debugName: "subTitle" }] : /* istanbul ignore next */ []));
|
|
1520
1454
|
}
|
|
1521
1455
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1522
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1456
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DocPageInteractiveContentDirective, isStandalone: true, selector: "docPageInteractive", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1523
1457
|
}
|
|
1524
1458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
|
|
1525
1459
|
type: Directive,
|
|
1526
1460
|
args: [{ selector: 'docPageInteractive' }]
|
|
1527
|
-
}], propDecorators: { title: [{
|
|
1528
|
-
type: Input
|
|
1529
|
-
}], subTitle: [{
|
|
1530
|
-
type: Input
|
|
1531
|
-
}] } });
|
|
1461
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }] } });
|
|
1532
1462
|
class DocPageSamplesContentDirective {
|
|
1533
1463
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1534
1464
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSamplesContentDirective, isStandalone: true, selector: "docPageSamples", ngImport: i0 }); }
|
|
@@ -1572,20 +1502,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1572
1502
|
|
|
1573
1503
|
class DocPageComponentV2 {
|
|
1574
1504
|
constructor() {
|
|
1575
|
-
this.
|
|
1576
|
-
|
|
1577
|
-
this.
|
|
1578
|
-
|
|
1579
|
-
this.
|
|
1580
|
-
|
|
1581
|
-
this.
|
|
1582
|
-
this.
|
|
1583
|
-
this.
|
|
1505
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1506
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1507
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1508
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1509
|
+
this.subLabel = input(undefined, /* @ts-ignore */
|
|
1510
|
+
...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
|
|
1511
|
+
this.isNotReadyInput = input(false, { ...(ngDevMode ? { debugName: "isNotReadyInput" } : /* istanbul ignore next */ {}), alias: 'isNotReady' });
|
|
1512
|
+
this.isDeprecatedInput = input(false, { ...(ngDevMode ? { debugName: "isDeprecatedInput" } : /* istanbul ignore next */ {}), alias: 'isDeprecated' });
|
|
1513
|
+
this.isLegacyInput = input(false, { ...(ngDevMode ? { debugName: "isLegacyInput" } : /* istanbul ignore next */ {}), alias: 'isLegacy' });
|
|
1514
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
1515
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1516
|
+
this.showcase = input('ux', /* @ts-ignore */
|
|
1517
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
1518
|
+
this.isNavigationVisible = input(true, /* @ts-ignore */
|
|
1519
|
+
...(ngDevMode ? [{ debugName: "isNavigationVisible" }] : /* istanbul ignore next */ []));
|
|
1520
|
+
this.hasApi = input(true, /* @ts-ignore */
|
|
1521
|
+
...(ngDevMode ? [{ debugName: "hasApi" }] : /* istanbul ignore next */ []));
|
|
1522
|
+
this.hasA11y = input(true, /* @ts-ignore */
|
|
1523
|
+
...(ngDevMode ? [{ debugName: "hasA11y" }] : /* istanbul ignore next */ []));
|
|
1524
|
+
this.customApiUrl = input(null, /* @ts-ignore */
|
|
1525
|
+
...(ngDevMode ? [{ debugName: "customApiUrl" }] : /* istanbul ignore next */ []));
|
|
1526
|
+
// Writable signals for properties that are both input-driven and internally mutated
|
|
1527
|
+
this.isNotReady = signal(false, /* @ts-ignore */
|
|
1528
|
+
...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
|
|
1529
|
+
this.isDeprecated = signal(false, /* @ts-ignore */
|
|
1530
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
1531
|
+
this.isLegacy = signal(false, /* @ts-ignore */
|
|
1532
|
+
...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
|
|
1584
1533
|
this.isLoading = true;
|
|
1585
1534
|
this.isNavClicked = true;
|
|
1586
1535
|
this.hasCategories = false;
|
|
1587
1536
|
this.categories = [];
|
|
1537
|
+
this.samples = contentChildren(DocSampleComponent, { ...(ngDevMode ? { debugName: "samples" } : /* istanbul ignore next */ {}), descendants: true });
|
|
1538
|
+
this.sections = contentChildren(DocSectionComponent, { ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), descendants: true });
|
|
1539
|
+
this.pageOverviewContent = contentChildren(forwardRef(() => DocPageOverviewContentDirectiveV2), /* @ts-ignore */
|
|
1540
|
+
...(ngDevMode ? [{ debugName: "pageOverviewContent" }] : /* istanbul ignore next */ []));
|
|
1541
|
+
this.pageOverviewDefaultContent = contentChildren(forwardRef(() => DocPageOverviewDefaultContentDirectiveV2), /* @ts-ignore */
|
|
1542
|
+
...(ngDevMode ? [{ debugName: "pageOverviewDefaultContent" }] : /* istanbul ignore next */ []));
|
|
1543
|
+
this.pageSamplesContent = contentChildren(forwardRef(() => DocPageSamplesContentDirectiveV2), /* @ts-ignore */
|
|
1544
|
+
...(ngDevMode ? [{ debugName: "pageSamplesContent" }] : /* istanbul ignore next */ []));
|
|
1545
|
+
this.pageSectionsContent = contentChildren(forwardRef(() => DocPageSectionsContentDirectiveV2), /* @ts-ignore */
|
|
1546
|
+
...(ngDevMode ? [{ debugName: "pageSectionsContent" }] : /* istanbul ignore next */ []));
|
|
1547
|
+
this.pageInteractiveContent = contentChildren(forwardRef(() => DocPageInteractiveContentDirectiveV2), /* @ts-ignore */
|
|
1548
|
+
...(ngDevMode ? [{ debugName: "pageInteractiveContent" }] : /* istanbul ignore next */ []));
|
|
1549
|
+
this.pageAccessibilityContent = contentChildren(forwardRef(() => DocPageAccessibilityContentDirectiveV2), /* @ts-ignore */
|
|
1550
|
+
...(ngDevMode ? [{ debugName: "pageAccessibilityContent" }] : /* istanbul ignore next */ []));
|
|
1551
|
+
this.pageApiContent = contentChildren(forwardRef(() => DocPageApiContentDirectiveV2), /* @ts-ignore */
|
|
1552
|
+
...(ngDevMode ? [{ debugName: "pageApiContent" }] : /* istanbul ignore next */ []));
|
|
1553
|
+
this.pageThemingContent = contentChildren(forwardRef(() => DocPageThemingContentDirectiveV2), /* @ts-ignore */
|
|
1554
|
+
...(ngDevMode ? [{ debugName: "pageThemingContent" }] : /* istanbul ignore next */ []));
|
|
1555
|
+
this.tabsContent = viewChild('tabsContent', /* @ts-ignore */
|
|
1556
|
+
...(ngDevMode ? [{ debugName: "tabsContent" }] : /* istanbul ignore next */ []));
|
|
1588
1557
|
this.sanitizer = inject(DomSanitizer);
|
|
1558
|
+
this.location = inject(Location);
|
|
1559
|
+
this.router = inject(Router);
|
|
1560
|
+
this.route = inject(ActivatedRoute);
|
|
1561
|
+
this.asService = inject(EuiAppShellService);
|
|
1589
1562
|
this.TABS_DEF = [
|
|
1590
1563
|
{ index: 0, id: 'samples' },
|
|
1591
1564
|
{ index: 1, id: 'api' },
|
|
@@ -1604,101 +1577,36 @@ class DocPageComponentV2 {
|
|
|
1604
1577
|
{ index: 70, id: 'Composition' },
|
|
1605
1578
|
{ index: 80, id: 'Misc' },
|
|
1606
1579
|
];
|
|
1607
|
-
this.location = inject(Location);
|
|
1608
|
-
this.router = inject(Router);
|
|
1609
|
-
this.route = inject(ActivatedRoute);
|
|
1610
|
-
this.asService = inject(EuiAppShellService);
|
|
1611
1580
|
}
|
|
1612
1581
|
ngOnInit() {
|
|
1613
|
-
|
|
1582
|
+
// Sync input signals to writable signals
|
|
1583
|
+
if (this.isNotReadyInput())
|
|
1584
|
+
this.isNotReady.set(true);
|
|
1585
|
+
if (this.isDeprecatedInput())
|
|
1586
|
+
this.isDeprecated.set(true);
|
|
1587
|
+
if (this.isLegacyInput())
|
|
1588
|
+
this.isLegacy.set(true);
|
|
1589
|
+
afterNextRender(() => {
|
|
1614
1590
|
this.asService.isBlockDocumentActive = true;
|
|
1615
1591
|
});
|
|
1616
1592
|
this.appMetadata = this.asService.state.appMetadata;
|
|
1617
|
-
if (this.id && !this.label) {
|
|
1618
|
-
this.label = this.id;
|
|
1619
|
-
}
|
|
1620
1593
|
this.fragmentId = this.route.snapshot.fragment;
|
|
1621
1594
|
}
|
|
1622
1595
|
ngAfterViewInit() {
|
|
1623
|
-
//
|
|
1596
|
+
// Getting API url
|
|
1624
1597
|
try {
|
|
1625
1598
|
this.apiUrl = this._getApiUrl();
|
|
1626
|
-
|
|
1599
|
+
afterNextRender(() => {
|
|
1627
1600
|
this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
|
|
1628
1601
|
});
|
|
1629
1602
|
}
|
|
1630
1603
|
catch (e) {
|
|
1631
|
-
|
|
1604
|
+
// API URL construction failed - non-critical
|
|
1632
1605
|
}
|
|
1633
|
-
|
|
1634
|
-
const tab = this.TABS_DEF.
|
|
1635
|
-
const
|
|
1636
|
-
|
|
1637
|
-
if (!tab) {
|
|
1638
|
-
tabIndex = sampleTabIndex;
|
|
1639
|
-
}
|
|
1640
|
-
else {
|
|
1641
|
-
tabIndex = tab.index;
|
|
1642
|
-
}
|
|
1643
|
-
// constructing categories, if at least one set, if not backward compat with old display
|
|
1644
|
-
const categoriesJson = {};
|
|
1645
|
-
this.samples.forEach((s) => {
|
|
1646
|
-
// "Default" or "_default" sample are always put first in the nav list
|
|
1647
|
-
if (!s.category && s.id !== '_default' && s.id !== 'Default' && s.id !== 'default') {
|
|
1648
|
-
if (!categoriesJson['others']) {
|
|
1649
|
-
categoriesJson['others'] = [];
|
|
1650
|
-
categoriesJson['others'].push(s);
|
|
1651
|
-
}
|
|
1652
|
-
else {
|
|
1653
|
-
categoriesJson['others'].push(s);
|
|
1654
|
-
}
|
|
1655
|
-
}
|
|
1656
|
-
else {
|
|
1657
|
-
if (s.id === '_default' || s.id === 'Default' || s.id === 'default') {
|
|
1658
|
-
if (!categoriesJson['Base']) {
|
|
1659
|
-
categoriesJson['Base'] = [];
|
|
1660
|
-
categoriesJson['Base'].push(s);
|
|
1661
|
-
}
|
|
1662
|
-
else {
|
|
1663
|
-
categoriesJson['Base'].push(s);
|
|
1664
|
-
}
|
|
1665
|
-
}
|
|
1666
|
-
else {
|
|
1667
|
-
this.hasCategories = true;
|
|
1668
|
-
if (!categoriesJson[s.category]) {
|
|
1669
|
-
categoriesJson[s.category] = [];
|
|
1670
|
-
categoriesJson[s.category].push(s);
|
|
1671
|
-
}
|
|
1672
|
-
else {
|
|
1673
|
-
categoriesJson[s.category].push(s);
|
|
1674
|
-
}
|
|
1675
|
-
}
|
|
1676
|
-
}
|
|
1677
|
-
});
|
|
1678
|
-
// making the list of categories iterable for display
|
|
1679
|
-
// console.log(categoriesJson)
|
|
1680
|
-
Object.keys(categoriesJson).forEach((c) => {
|
|
1681
|
-
const normalizedKey = c.toLowerCase();
|
|
1682
|
-
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1683
|
-
if (existingCategory) {
|
|
1684
|
-
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => {
|
|
1685
|
-
return a.label.localeCompare(b.label);
|
|
1686
|
-
});
|
|
1687
|
-
}
|
|
1688
|
-
else {
|
|
1689
|
-
this.categories.push({
|
|
1690
|
-
name: c,
|
|
1691
|
-
samples: categoriesJson[c].sort((a, b) => {
|
|
1692
|
-
return a.label.localeCompare(b.label);
|
|
1693
|
-
}),
|
|
1694
|
-
});
|
|
1695
|
-
}
|
|
1696
|
-
});
|
|
1697
|
-
// push the "others" at the end of the nav list
|
|
1698
|
-
this.categories.push(this.categories.splice(this.categories.findIndex(v => v.name == 'others'), 1)[0]);
|
|
1699
|
-
this.categories.sort((a, b) => {
|
|
1700
|
-
return this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name);
|
|
1701
|
-
});
|
|
1606
|
+
afterNextRender(() => {
|
|
1607
|
+
const tab = this.TABS_DEF.find((t) => t.id === this.fragmentId);
|
|
1608
|
+
const tabIndex = tab ? tab.index : 0;
|
|
1609
|
+
this._buildCategories();
|
|
1702
1610
|
setTimeout(() => {
|
|
1703
1611
|
this._scrollToFragment(this.fragmentId, tabIndex, true, true);
|
|
1704
1612
|
this.asService.isBlockDocumentActive = false;
|
|
@@ -1717,23 +1625,63 @@ class DocPageComponentV2 {
|
|
|
1717
1625
|
}
|
|
1718
1626
|
onTabActivate(event) {
|
|
1719
1627
|
if (!this.isLoading && !this.isNavClicked) {
|
|
1720
|
-
const tabId = this.TABS_DEF.
|
|
1721
|
-
|
|
1628
|
+
const tabId = this.TABS_DEF.find((t) => t.index === event.index)?.id;
|
|
1629
|
+
if (tabId) {
|
|
1630
|
+
this._scrollToFragment(tabId, event.index, false, false);
|
|
1631
|
+
}
|
|
1722
1632
|
}
|
|
1723
1633
|
this.isNavClicked = false;
|
|
1724
1634
|
}
|
|
1635
|
+
_buildCategories() {
|
|
1636
|
+
const categoriesJson = {};
|
|
1637
|
+
this.samples().forEach((s) => {
|
|
1638
|
+
const id = s.id();
|
|
1639
|
+
const category = s.category();
|
|
1640
|
+
const isDefault = id === '_default' || id === 'Default' || id === 'default';
|
|
1641
|
+
if (isDefault) {
|
|
1642
|
+
(categoriesJson['Base'] ??= []).push(s);
|
|
1643
|
+
}
|
|
1644
|
+
else if (category) {
|
|
1645
|
+
this.hasCategories = true;
|
|
1646
|
+
(categoriesJson[category] ??= []).push(s);
|
|
1647
|
+
}
|
|
1648
|
+
else {
|
|
1649
|
+
(categoriesJson['others'] ??= []).push(s);
|
|
1650
|
+
}
|
|
1651
|
+
});
|
|
1652
|
+
Object.keys(categoriesJson).forEach((c) => {
|
|
1653
|
+
const normalizedKey = c.toLowerCase();
|
|
1654
|
+
const existingCategory = this.categories.find(cat => cat.name.toLowerCase() === normalizedKey);
|
|
1655
|
+
if (existingCategory) {
|
|
1656
|
+
existingCategory.samples = [...existingCategory.samples, ...categoriesJson[c]].sort((a, b) => a.label().localeCompare(b.label()));
|
|
1657
|
+
}
|
|
1658
|
+
else {
|
|
1659
|
+
this.categories.push({
|
|
1660
|
+
name: c,
|
|
1661
|
+
samples: categoriesJson[c].sort((a, b) => a.label().localeCompare(b.label())),
|
|
1662
|
+
});
|
|
1663
|
+
}
|
|
1664
|
+
});
|
|
1665
|
+
const othersIndex = this.categories.findIndex(v => v.name === 'others');
|
|
1666
|
+
if (othersIndex > -1) {
|
|
1667
|
+
this.categories.push(this.categories.splice(othersIndex, 1)[0]);
|
|
1668
|
+
}
|
|
1669
|
+
this.categories.sort((a, b) => this.getCategoryIndex(a.name) - this.getCategoryIndex(b.name));
|
|
1670
|
+
}
|
|
1725
1671
|
_scrollToFragment(fragmentId, tabIndex, init, changeTab) {
|
|
1726
1672
|
if (init) {
|
|
1727
|
-
|
|
1728
|
-
|
|
1673
|
+
const tabsContent = this.tabsContent();
|
|
1674
|
+
if (tabsContent) {
|
|
1675
|
+
tabsContent.activateTab(tabIndex);
|
|
1729
1676
|
}
|
|
1730
1677
|
}
|
|
1731
1678
|
else {
|
|
1732
1679
|
if (changeTab) {
|
|
1733
1680
|
this.router.onSameUrlNavigation = 'reload';
|
|
1734
1681
|
this.router.navigate(['.'], { relativeTo: this.route, fragment: fragmentId }).then(() => {
|
|
1735
|
-
|
|
1736
|
-
|
|
1682
|
+
const tabsContent = this.tabsContent();
|
|
1683
|
+
if (tabsContent) {
|
|
1684
|
+
tabsContent.activateTab(tabIndex);
|
|
1737
1685
|
}
|
|
1738
1686
|
});
|
|
1739
1687
|
}
|
|
@@ -1769,21 +1717,9 @@ class DocPageComponentV2 {
|
|
|
1769
1717
|
], [])
|
|
1770
1718
|
: [];
|
|
1771
1719
|
const flatLinks = flatten(this.asService.state.sidebarLinks);
|
|
1772
|
-
|
|
1773
|
-
// console.log('from get component status');
|
|
1774
|
-
// console.log(id);
|
|
1775
|
-
// console.log(flatLinks);
|
|
1776
|
-
// console.log(idBasedCmp);
|
|
1777
|
-
if (idBasedCmp) {
|
|
1778
|
-
return idBasedCmp;
|
|
1779
|
-
}
|
|
1780
|
-
else {
|
|
1781
|
-
const alternateIdBasedCmp = flatLinks.filter((item) => item.alternateId === id)[0];
|
|
1782
|
-
return alternateIdBasedCmp;
|
|
1783
|
-
}
|
|
1720
|
+
return flatLinks.find((item) => item.id === id) ?? flatLinks.find((item) => item.alternateId === id);
|
|
1784
1721
|
}
|
|
1785
1722
|
_getApiUrl() {
|
|
1786
|
-
// console.log('getApiUrl');
|
|
1787
1723
|
const url = window.location;
|
|
1788
1724
|
const protocol = url.protocol;
|
|
1789
1725
|
const host = url.host;
|
|
@@ -1791,8 +1727,7 @@ class DocPageComponentV2 {
|
|
|
1791
1727
|
const pathNameArray = pathName.split('/');
|
|
1792
1728
|
let name = pathNameArray[pathNameArray.length - 1];
|
|
1793
1729
|
let category = pathNameArray[pathNameArray.length - 2];
|
|
1794
|
-
let showcaseType;
|
|
1795
|
-
showcaseType = pathNameArray[pathNameArray.length - 3];
|
|
1730
|
+
let showcaseType = pathNameArray[pathNameArray.length - 3];
|
|
1796
1731
|
if (showcaseType?.indexOf('eui-showcase') === -1) {
|
|
1797
1732
|
showcaseType = pathNameArray[pathNameArray.length - 4];
|
|
1798
1733
|
}
|
|
@@ -1822,7 +1757,6 @@ class DocPageComponentV2 {
|
|
|
1822
1757
|
if (this.cmp && this.cmp.alternateApiCategory) {
|
|
1823
1758
|
category = this.cmp.alternateApiCategory;
|
|
1824
1759
|
}
|
|
1825
|
-
// console.log(this.cmp);
|
|
1826
1760
|
if (this.cmp) {
|
|
1827
1761
|
switch (this.cmp.status) {
|
|
1828
1762
|
case 'success':
|
|
@@ -1832,20 +1766,19 @@ class DocPageComponentV2 {
|
|
|
1832
1766
|
case 'warning':
|
|
1833
1767
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1834
1768
|
this.stateTypeClass = 'warning';
|
|
1835
|
-
this.isDeprecated
|
|
1769
|
+
this.isDeprecated.set(true);
|
|
1836
1770
|
break;
|
|
1837
1771
|
case 'danger':
|
|
1838
1772
|
this.stateLabel = 'will be removed in eUI 21';
|
|
1839
1773
|
this.stateTypeClass = 'danger';
|
|
1840
|
-
this.isLegacy
|
|
1774
|
+
this.isLegacy.set(true);
|
|
1841
1775
|
break;
|
|
1842
1776
|
case 'info':
|
|
1843
1777
|
this.stateLabel = 'NOT READY';
|
|
1844
1778
|
this.stateTypeClass = 'accent';
|
|
1845
|
-
this.isNotReady
|
|
1779
|
+
this.isNotReady.set(true);
|
|
1846
1780
|
break;
|
|
1847
1781
|
}
|
|
1848
|
-
// construct cmp module import string
|
|
1849
1782
|
if (this.cmp.metadata?.moduleName) {
|
|
1850
1783
|
this.cmpImportModule = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
|
|
1851
1784
|
}
|
|
@@ -1856,109 +1789,42 @@ class DocPageComponentV2 {
|
|
|
1856
1789
|
}
|
|
1857
1790
|
}
|
|
1858
1791
|
catch (e) {
|
|
1859
|
-
|
|
1792
|
+
// Component status resolution failed - non-critical
|
|
1860
1793
|
}
|
|
1861
1794
|
});
|
|
1862
1795
|
const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
|
|
1863
|
-
|
|
1796
|
+
const customApiUrl = this.customApiUrl();
|
|
1797
|
+
return customApiUrl ? `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${customApiUrl}.html` : `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
|
|
1864
1798
|
}
|
|
1865
|
-
_camelCaseString(
|
|
1866
|
-
const stringArray =
|
|
1799
|
+
_camelCaseString(str, separator, first) {
|
|
1800
|
+
const stringArray = str.split(separator);
|
|
1867
1801
|
let result = '';
|
|
1868
|
-
let s;
|
|
1869
1802
|
for (let i = 0; i < stringArray.length; i++) {
|
|
1870
|
-
s = stringArray[i];
|
|
1803
|
+
const s = stringArray[i];
|
|
1871
1804
|
if (i === 0) {
|
|
1872
|
-
|
|
1873
|
-
result += s.substring(0, 1).toUpperCase() + s.substr(1);
|
|
1874
|
-
}
|
|
1875
|
-
else {
|
|
1876
|
-
result += s;
|
|
1877
|
-
}
|
|
1805
|
+
result += first ? s.substring(0, 1).toUpperCase() + s.substring(1) : s;
|
|
1878
1806
|
}
|
|
1879
1807
|
else {
|
|
1880
|
-
result += s.substring(0, 1).toUpperCase() + s.
|
|
1808
|
+
result += s.substring(0, 1).toUpperCase() + s.substring(1);
|
|
1881
1809
|
}
|
|
1882
1810
|
}
|
|
1883
1811
|
return result;
|
|
1884
1812
|
}
|
|
1885
1813
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponentV2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1886
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-v2", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y", customApiUrl: "customApiUrl" }, host: { properties: { "class": "this.cssClass" } }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirectiveV2) }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirectiveV2) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirectiveV2) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirectiveV2) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirectiveV2) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirectiveV2) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirectiveV2) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirectiveV2) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header class=\"eui-doc-page-title\">\n <eui-page-header-label>{{label}}</eui-page-header-label> \n <eui-page-header-sub-label>{{subLabel}}</eui-page-header-sub-label>\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip euiSizeS isFilled\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n {{ stateLabel }}\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <eui-tab-header>\n <eui-label> THEMING </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent.first.title }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\"\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-header>\n <eui-page-column-header-label>\n On this page\n </eui-page-column-header-label>\n </eui-page-column-header>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "component", type: i2$3.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i2$3.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i3.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i3.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i3.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i3.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i4$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i4$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i4$1.EuiPageHeader, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i4$1.EuiPageHeaderLabel, selector: "eui-page-header-label" }, { kind: "component", type: i4$1.EuiPageHeaderSubLabel, selector: "eui-page-header-sub-label" }, { kind: "component", type: i4$1.EuiPageHeaderActionItems, selector: "eui-page-header-action-items" }, { kind: "component", type: i4$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i4$1.EuiPageColumn, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "component", type: i4$1.EuiPageColumnHeader, selector: "eui-page-column-header", inputs: ["expandAriaLabel", "collapseAriaLabel"] }, { kind: "component", type: i4$1.EuiPageColumnHeaderLabel, selector: "eui-page-column-header-label" }, { kind: "component", type: i4$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { kind: "component", type: i5.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1814
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageComponentV2, isStandalone: true, selector: "eui-showcase-doc-page-v2", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReadyInput: { classPropertyName: "isNotReadyInput", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecatedInput: { classPropertyName: "isDeprecatedInput", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isLegacyInput: { classPropertyName: "isLegacyInput", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirectiveV2), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirectiveV2), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirectiveV2), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirectiveV2), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirectiveV2), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirectiveV2), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirectiveV2), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirectiveV2), isSignal: true }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header class=\"eui-doc-page-title\">\n <eui-page-header-label>{{ label() || id() }}</eui-page-header-label>\n <eui-page-header-sub-label>{{subLabel()}}</eui-page-header-sub-label>\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewV2\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefaultV2\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamplesV2\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibilityV2\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> THEMING </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageThemingV2\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractiveV2\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSectionsV2\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-header>\n <eui-page-column-header-label>\n On this page\n </eui-page-column-header-label>\n </eui-page-column-header>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n }\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() }}</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() }}</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() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n }\n @if (pageThemingContent().length === 0) {\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3$1.EuiPage, selector: "eui-page" }, { kind: "component", type: i3$1.EuiPageContent, selector: "eui-page-content" }, { kind: "component", type: i3$1.EuiPageHeader, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiPageHeaderLabel, selector: "eui-page-header-label" }, { kind: "component", type: i3$1.EuiPageHeaderSubLabel, selector: "eui-page-header-sub-label" }, { kind: "component", type: i3$1.EuiPageHeaderActionItems, selector: "eui-page-header-action-items" }, { kind: "component", type: i3$1.EuiPageColumns, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3$1.EuiPageColumn, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile"], outputs: ["collapse", "headerCollapse"] }, { kind: "component", type: i3$1.EuiPageColumnHeader, selector: "eui-page-column-header", inputs: ["expandAriaLabel", "collapseAriaLabel"] }, { kind: "component", type: i3$1.EuiPageColumnHeaderLabel, selector: "eui-page-column-header-label" }, { kind: "component", type: i3$1.EuiPageColumnBody, selector: "eui-page-column-body" }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1887
1815
|
}
|
|
1888
1816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageComponentV2, decorators: [{
|
|
1889
1817
|
type: Component,
|
|
1890
|
-
args: [{ selector: 'eui-showcase-doc-page-v2', encapsulation: ViewEncapsulation.None, imports: [
|
|
1891
|
-
CommonModule,
|
|
1818
|
+
args: [{ selector: 'eui-showcase-doc-page-v2', encapsulation: ViewEncapsulation.None, host: { class: 'eui-doc-page' }, imports: [
|
|
1892
1819
|
DocPageCodeComponent,
|
|
1893
1820
|
...EUI_ALERT,
|
|
1894
1821
|
...EUI_TABS,
|
|
1895
1822
|
...EUI_PAGE$1,
|
|
1896
1823
|
...EUI_LABEL,
|
|
1897
1824
|
...EUI_CHIP,
|
|
1898
|
-
...EUI_BLOCK_CONTENT,
|
|
1899
1825
|
EuiCodeHighlighterDirective,
|
|
1900
|
-
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header class=\"eui-doc-page-title\">\n <eui-page-header-label>{{label}}</eui-page-header-label> \n <eui-page-header-sub-label>{{subLabel}}</eui-page-header-sub-label>\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip euiSizeS isFilled\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady\"\n [euiWarning]=\"isDeprecated\"\n [euiDanger]=\"isLegacy\">\n {{ stateLabel }}\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n </ng-container>\n\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n\n <div *ngIf=\"pageOverviewContent.length > 0\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n\n <div *ngIf=\"pageOverviewDefaultContent.length > 0\">\n <ng-content select=\"docPageOverviewDefault\"></ng-content>\n </div>\n <br />\n\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasApi\">\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"hasA11y\">\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n <ng-container *ngIf=\"pageAccessibilityContent.length !== 0\">\n <ng-content select=\"docPageAccessibility\"></ng-content>\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n </ng-container>\n <ng-container *ngIf=\"pageAccessibilityContent.length === 0\">\n No accessibility rules applicable\n </ng-container>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <eui-tab-header>\n <eui-label> THEMING </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent.first.title }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent.first.subTitle }}\n </div>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <div id=\"demo\" *ngIf=\"sections.length === 0\" class=\"doc-page-section-title\">Demo</div>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n\n </eui-page-column-body>\n </eui-page-column>\n\n <eui-page-column *ngIf=\"isNavigationVisible\"\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-header>\n <eui-page-column-header-label>\n On this page\n </eui-page-column-header-label>\n </eui-page-column-header>\n <eui-page-column-body>\n\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <li\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ng-container *ngIf=\"categories.length > 0\">\n <ng-container *ngIf=\"hasCategories; else noCategories\">\n <ng-container *ngFor=\"let category of categories\">\n <ng-container *ngIf=\"category.name === 'Base'; else notBase\">\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-container>\n <ng-template #notBase>\n <div *ngIf=\"category.name !== 'Base'\" class=\"doc-page-navigation-category\">{{category.name}}</div>\n <ul *ngFor=\"let sample of category.samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <ng-template #noCategories>\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 0)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </ng-template>\n </ng-container>\n </li>\n\n\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n\n\n\n\n </eui-page-column-body>\n </eui-page-column>\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
1901
|
-
}], propDecorators: {
|
|
1902
|
-
type: HostBinding,
|
|
1903
|
-
args: ['class']
|
|
1904
|
-
}], id: [{
|
|
1905
|
-
type: Input
|
|
1906
|
-
}], label: [{
|
|
1907
|
-
type: Input
|
|
1908
|
-
}], subLabel: [{
|
|
1909
|
-
type: Input
|
|
1910
|
-
}], isNotReady: [{
|
|
1911
|
-
type: Input
|
|
1912
|
-
}], isDeprecated: [{
|
|
1913
|
-
type: Input
|
|
1914
|
-
}], isLegacy: [{
|
|
1915
|
-
type: Input
|
|
1916
|
-
}], codeFolder: [{
|
|
1917
|
-
type: Input
|
|
1918
|
-
}], showcase: [{
|
|
1919
|
-
type: Input
|
|
1920
|
-
}], isNavigationVisible: [{
|
|
1921
|
-
type: Input
|
|
1922
|
-
}], hasApi: [{
|
|
1923
|
-
type: Input
|
|
1924
|
-
}], hasA11y: [{
|
|
1925
|
-
type: Input
|
|
1926
|
-
}], customApiUrl: [{
|
|
1927
|
-
type: Input
|
|
1928
|
-
}], samples: [{
|
|
1929
|
-
type: ContentChildren,
|
|
1930
|
-
args: [DocSampleComponent, { descendants: true }]
|
|
1931
|
-
}], sections: [{
|
|
1932
|
-
type: ContentChildren,
|
|
1933
|
-
args: [DocSectionComponent, { descendants: true }]
|
|
1934
|
-
}], pageOverviewContent: [{
|
|
1935
|
-
type: ContentChildren,
|
|
1936
|
-
args: [forwardRef(() => DocPageOverviewContentDirectiveV2)]
|
|
1937
|
-
}], pageOverviewDefaultContent: [{
|
|
1938
|
-
type: ContentChildren,
|
|
1939
|
-
args: [forwardRef(() => DocPageOverviewDefaultContentDirectiveV2)]
|
|
1940
|
-
}], pageSamplesContent: [{
|
|
1941
|
-
type: ContentChildren,
|
|
1942
|
-
args: [forwardRef(() => DocPageSamplesContentDirectiveV2)]
|
|
1943
|
-
}], pageSectionsContent: [{
|
|
1944
|
-
type: ContentChildren,
|
|
1945
|
-
args: [forwardRef(() => DocPageSectionsContentDirectiveV2)]
|
|
1946
|
-
}], pageInteractiveContent: [{
|
|
1947
|
-
type: ContentChildren,
|
|
1948
|
-
args: [forwardRef(() => DocPageInteractiveContentDirectiveV2)]
|
|
1949
|
-
}], pageAccessibilityContent: [{
|
|
1950
|
-
type: ContentChildren,
|
|
1951
|
-
args: [forwardRef(() => DocPageAccessibilityContentDirectiveV2)]
|
|
1952
|
-
}], pageApiContent: [{
|
|
1953
|
-
type: ContentChildren,
|
|
1954
|
-
args: [forwardRef(() => DocPageApiContentDirectiveV2)]
|
|
1955
|
-
}], pageThemingContent: [{
|
|
1956
|
-
type: ContentChildren,
|
|
1957
|
-
args: [forwardRef(() => DocPageThemingContentDirectiveV2)]
|
|
1958
|
-
}], tabsContent: [{
|
|
1959
|
-
type: ViewChild,
|
|
1960
|
-
args: ['tabsContent']
|
|
1961
|
-
}] } });
|
|
1826
|
+
], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header class=\"eui-doc-page-title\">\n <eui-page-header-label>{{ label() || id() }}</eui-page-header-label>\n <eui-page-header-sub-label>{{subLabel()}}</eui-page-header-sub-label>\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-tab-header>\n <eui-label> OPTIONS & SAMPLES </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewV2\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefaultV2\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamplesV2\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> API </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> A11Y </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibilityV2\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label> THEMING </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageThemingV2\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab>\n <eui-tab-header>\n <eui-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractiveV2\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSectionsV2\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-header>\n <eui-page-column-header-label>\n On this page\n </eui-page-column-header-label>\n </eui-page-column-header>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 1)\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 2)\">\n <span>A11Y</span>\n </li>\n }\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 0)\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() }}</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() }}</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() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n }\n @if (pageThemingContent().length === 0) {\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page{display:flex;width:100%;height:100%}.eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-3xl)!important}.eui-doc-page .doc-page-navigation,.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-4xs);text-overflow:ellipsis;white-space:nowrap;list-style:none}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-c-primary);padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left:2px solid var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left:2px solid var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-l)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-m);color:var(--eui-c-text);margin-top:var(--eui-s-s);font-weight:700;text-transform:capitalize}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-l-bold);letter-spacing:-.25px;margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-xl);font:var(--eui-f-xl)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);font:var(--eui-f-l-bold)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
|
|
1827
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReadyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecatedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isLegacyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirectiveV2), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirectiveV2), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirectiveV2), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirectiveV2), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirectiveV2), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirectiveV2), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirectiveV2), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirectiveV2), { isSignal: true }] }], tabsContent: [{ type: i0.ViewChild, args: ['tabsContent', { isSignal: true }] }] } });
|
|
1962
1828
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1963
1829
|
class DocPageOverviewContentDirectiveV2 {
|
|
1964
1830
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageOverviewContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -1978,20 +1844,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1978
1844
|
}] });
|
|
1979
1845
|
class DocPageInteractiveContentDirectiveV2 {
|
|
1980
1846
|
constructor() {
|
|
1981
|
-
this.title = 'ADVANCED EXAMPLES'
|
|
1982
|
-
|
|
1847
|
+
this.title = input('ADVANCED EXAMPLES', /* @ts-ignore */
|
|
1848
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1849
|
+
this.subTitle = input('Advanced use cases', /* @ts-ignore */
|
|
1850
|
+
...(ngDevMode ? [{ debugName: "subTitle" }] : /* istanbul ignore next */ []));
|
|
1983
1851
|
}
|
|
1984
1852
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1985
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
1853
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: DocPageInteractiveContentDirectiveV2, isStandalone: true, selector: "docPageInteractiveV2", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1986
1854
|
}
|
|
1987
1855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageInteractiveContentDirectiveV2, decorators: [{
|
|
1988
1856
|
type: Directive,
|
|
1989
1857
|
args: [{ selector: 'docPageInteractiveV2' }]
|
|
1990
|
-
}], propDecorators: { title: [{
|
|
1991
|
-
type: Input
|
|
1992
|
-
}], subTitle: [{
|
|
1993
|
-
type: Input
|
|
1994
|
-
}] } });
|
|
1858
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }] } });
|
|
1995
1859
|
class DocPageSamplesContentDirectiveV2 {
|
|
1996
1860
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageSamplesContentDirectiveV2, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1997
1861
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: DocPageSamplesContentDirectiveV2, isStandalone: true, selector: "docPageSamplesV2", ngImport: i0 }); }
|
|
@@ -2035,75 +1899,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2035
1899
|
|
|
2036
1900
|
class DocPageCodeFabComponent {
|
|
2037
1901
|
constructor() {
|
|
2038
|
-
this.codeFolder = ''
|
|
2039
|
-
|
|
2040
|
-
this.
|
|
1902
|
+
this.codeFolder = input('', /* @ts-ignore */
|
|
1903
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
1904
|
+
this.showcase = input('design-patterns', /* @ts-ignore */
|
|
1905
|
+
...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
|
|
1906
|
+
this.hasContentDialog = input(true, /* @ts-ignore */
|
|
1907
|
+
...(ngDevMode ? [{ debugName: "hasContentDialog" }] : /* istanbul ignore next */ []));
|
|
1908
|
+
this.dialog = viewChild('dialog', /* @ts-ignore */
|
|
1909
|
+
...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
|
|
2041
1910
|
this.asService = inject(EuiAppShellService);
|
|
2042
1911
|
}
|
|
2043
1912
|
toggleCode() {
|
|
2044
|
-
this.dialog
|
|
1913
|
+
this.dialog()?.openDialog();
|
|
2045
1914
|
}
|
|
2046
1915
|
onClose() {
|
|
2047
|
-
this.dialog
|
|
1916
|
+
this.dialog()?.closeDialog();
|
|
2048
1917
|
}
|
|
2049
1918
|
onOpenCode() {
|
|
2050
|
-
// eslint-disable-next-line max-len
|
|
2051
1919
|
const showcaseRoot = 'https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-ux-components/-/blob/master/src/app/features';
|
|
2052
|
-
const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase}/`;
|
|
2053
|
-
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
1920
|
+
const sourceRootPath = `${showcaseRoot}/showcase-${this.showcase()}/`;
|
|
1921
|
+
window.open(sourceRootPath + this.codeFolder(), '_blank');
|
|
2054
1922
|
}
|
|
2055
1923
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2056
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageCodeFabComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase", hasContentDialog: "hasContentDialog" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "@if (hasContentDialog) {\n<div class=\"eui-button-fixed eui-u-mb-6xl\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\">\n
|
|
1924
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPageCodeFabComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, hasContentDialog: { classPropertyName: "hasContentDialog", publicName: "hasContentDialog", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasContentDialog()) {\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\" />\n </div>\n </div>\n\n <eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n @if (codeFolder()) {\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\" /> VIEW SOURCES\n </button>\n }\n <ng-content />\n <p class=\"eui-u-text-paragraph\">Use the <kbd class=\"eui-u-text-kbd\">View sources</kbd> button to access the code source of the page.</p>\n </eui-dialog>\n\n} @else {\n\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <button class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\" (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" />\n </button>\n </div>\n\n}\n\n", dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$3.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
2057
1925
|
}
|
|
2058
1926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
|
|
2059
1927
|
type: Component,
|
|
2060
1928
|
args: [{ selector: 'eui-showcase-doc-page-code-fab', imports: [
|
|
2061
|
-
CommonModule,
|
|
2062
|
-
EuiTooltipDirective,
|
|
2063
1929
|
...EUI_ICON,
|
|
2064
1930
|
...EUI_DIALOG,
|
|
2065
|
-
...EUI_BUTTON
|
|
2066
|
-
], 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
|
|
2067
|
-
}], propDecorators: { codeFolder: [{
|
|
2068
|
-
type: Input
|
|
2069
|
-
}], showcase: [{
|
|
2070
|
-
type: Input
|
|
2071
|
-
}], hasContentDialog: [{
|
|
2072
|
-
type: Input
|
|
2073
|
-
}], dialog: [{
|
|
2074
|
-
type: ViewChild,
|
|
2075
|
-
args: ['dialog']
|
|
2076
|
-
}] } });
|
|
1931
|
+
...EUI_BUTTON
|
|
1932
|
+
], 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" }]
|
|
1933
|
+
}], 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 }] }] } });
|
|
2077
1934
|
|
|
2078
1935
|
class DocPageCodeModalComponent {
|
|
2079
1936
|
constructor() {
|
|
2080
|
-
this.width = '95vw'
|
|
1937
|
+
this.width = input('95vw', /* @ts-ignore */
|
|
1938
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
1939
|
+
this.dialog = viewChild('dialog', /* @ts-ignore */
|
|
1940
|
+
...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
|
|
2081
1941
|
this.asService = inject(EuiAppShellService);
|
|
2082
1942
|
}
|
|
2083
1943
|
toggleCode() {
|
|
2084
|
-
this.dialog
|
|
1944
|
+
this.dialog()?.openDialog();
|
|
2085
1945
|
}
|
|
2086
1946
|
onClose() {
|
|
2087
|
-
this.dialog
|
|
1947
|
+
this.dialog()?.closeDialog();
|
|
2088
1948
|
}
|
|
2089
1949
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1950
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: DocPageCodeModalComponent, isStandalone: true, selector: "eui-showcase-doc-page-code-modal", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiCTAButton (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\" />\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width()\">\n <ng-content />\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$3.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "hasClosedOnClickOutside", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
|
|
2091
1951
|
}
|
|
2092
1952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPageCodeModalComponent, decorators: [{
|
|
2093
1953
|
type: Component,
|
|
2094
1954
|
args: [{ selector: 'eui-showcase-doc-page-code-modal', imports: [
|
|
2095
|
-
CommonModule,
|
|
2096
1955
|
...EUI_DIALOG,
|
|
2097
1956
|
...EUI_ICON,
|
|
2098
|
-
], 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
|
|
2099
|
-
}], propDecorators: { width: [{
|
|
2100
|
-
type: Input
|
|
2101
|
-
}], dialog: [{
|
|
2102
|
-
type: ViewChild,
|
|
2103
|
-
args: ['dialog']
|
|
2104
|
-
}] } });
|
|
1957
|
+
], 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" }]
|
|
1958
|
+
}], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
|
|
2105
1959
|
|
|
2106
|
-
/* eslint-disable max-len */
|
|
2107
1960
|
/* eslint-disable */
|
|
2108
1961
|
class DocPagePatternSampleDirective {
|
|
2109
1962
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -2123,15 +1976,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2123
1976
|
}] });
|
|
2124
1977
|
class DocPagePatternComponent {
|
|
2125
1978
|
constructor() {
|
|
2126
|
-
this.
|
|
2127
|
-
|
|
2128
|
-
this.
|
|
1979
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
1980
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
1981
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
1982
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1983
|
+
this.anatomyImage = input(undefined, /* @ts-ignore */
|
|
1984
|
+
...(ngDevMode ? [{ debugName: "anatomyImage" }] : /* istanbul ignore next */ []));
|
|
1985
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
1986
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
1987
|
+
this.dos = input([], /* @ts-ignore */
|
|
1988
|
+
...(ngDevMode ? [{ debugName: "dos" }] : /* istanbul ignore next */ []));
|
|
1989
|
+
this.donts = input([], /* @ts-ignore */
|
|
1990
|
+
...(ngDevMode ? [{ debugName: "donts" }] : /* istanbul ignore next */ []));
|
|
1991
|
+
this.sourceUrl = input(undefined, /* @ts-ignore */
|
|
1992
|
+
...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
1993
|
+
this.figmaUrl = input(undefined, /* @ts-ignore */
|
|
1994
|
+
...(ngDevMode ? [{ debugName: "figmaUrl" }] : /* istanbul ignore next */ []));
|
|
1995
|
+
this.figmaEmbedSrc = input(undefined, /* @ts-ignore */
|
|
1996
|
+
...(ngDevMode ? [{ debugName: "figmaEmbedSrc" }] : /* istanbul ignore next */ []));
|
|
2129
1997
|
this.topPosToStartShowing = 100;
|
|
2130
1998
|
this.tabSelectedIndex = 0;
|
|
2131
1999
|
this.sanitizer = inject(DomSanitizer);
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2000
|
+
effect(() => {
|
|
2001
|
+
const figmaEmbedSrc = this.figmaEmbedSrc();
|
|
2002
|
+
if (figmaEmbedSrc) {
|
|
2003
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(figmaEmbedSrc);
|
|
2004
|
+
}
|
|
2005
|
+
});
|
|
2135
2006
|
}
|
|
2136
2007
|
checkScroll() {
|
|
2137
2008
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
@@ -2142,17 +2013,10 @@ class DocPagePatternComponent {
|
|
|
2142
2013
|
this.isShowGoTop = false;
|
|
2143
2014
|
}
|
|
2144
2015
|
}
|
|
2145
|
-
|
|
2146
|
-
if (this.figmaEmbedSrc) {
|
|
2147
|
-
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
|
|
2148
|
-
const iFrame = document.getElementById('iframe-figma');
|
|
2149
|
-
}
|
|
2150
|
-
}
|
|
2151
|
-
onNavigateToCode(event) {
|
|
2152
|
-
// eslint-disable-next-line max-len
|
|
2016
|
+
onNavigateToCode() {
|
|
2153
2017
|
const showcase = 'ux-patterns';
|
|
2154
2018
|
const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${showcase}/-/blob/master/src/app/features/`;
|
|
2155
|
-
window.open(sourceRootPath + this.sourceUrl, '_blank');
|
|
2019
|
+
window.open(sourceRootPath + this.sourceUrl(), '_blank');
|
|
2156
2020
|
}
|
|
2157
2021
|
onTabActivate(event) {
|
|
2158
2022
|
this.tabSelectedIndex = event.index;
|
|
@@ -2165,75 +2029,41 @@ class DocPagePatternComponent {
|
|
|
2165
2029
|
});
|
|
2166
2030
|
}
|
|
2167
2031
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", 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$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i4$2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i6$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i5.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2032
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, ngImport: i0, template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label() }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\" />\n\n @if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n } @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n }\n\n @if (docEntries().length !== 0) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </h6>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </h6>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n }\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n @if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n } @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n }\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\" />\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode()\">\n <eui-icon-svg icon=\"eui-code\" />\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabsRightContentComponent, selector: "eui-tabs-right-content" }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i3$2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2169
2033
|
}
|
|
2170
2034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternComponent, decorators: [{
|
|
2171
2035
|
type: Component,
|
|
2172
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, imports: [
|
|
2173
|
-
CommonModule,
|
|
2036
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, host: { class: 'doc-page-pattern' }, imports: [
|
|
2174
2037
|
...EUI_ICON,
|
|
2175
2038
|
...EUI_TABS,
|
|
2176
2039
|
...EUI_CARD,
|
|
2177
2040
|
...EUI_CHIP,
|
|
2178
2041
|
...EUI_BADGE,
|
|
2179
2042
|
...EUI_LABEL,
|
|
2180
|
-
], 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"] }]
|
|
2181
|
-
}], propDecorators: {
|
|
2182
|
-
type: HostBinding,
|
|
2183
|
-
args: ['class']
|
|
2184
|
-
}], sampleContent: [{
|
|
2185
|
-
type: ContentChild,
|
|
2186
|
-
args: [forwardRef(() => DocPagePatternSampleDirective)]
|
|
2187
|
-
}], docContent: [{
|
|
2188
|
-
type: ContentChild,
|
|
2189
|
-
args: [forwardRef(() => DocPagePatternDocDirective)]
|
|
2190
|
-
}], id: [{
|
|
2191
|
-
type: Input
|
|
2192
|
-
}], label: [{
|
|
2193
|
-
type: Input
|
|
2194
|
-
}], anatomyImage: [{
|
|
2195
|
-
type: Input
|
|
2196
|
-
}], docEntries: [{
|
|
2197
|
-
type: Input
|
|
2198
|
-
}], dos: [{
|
|
2199
|
-
type: Input
|
|
2200
|
-
}], donts: [{
|
|
2201
|
-
type: Input
|
|
2202
|
-
}], sourceUrl: [{
|
|
2203
|
-
type: Input
|
|
2204
|
-
}], figmaUrl: [{
|
|
2205
|
-
type: Input
|
|
2206
|
-
}], figmaEmbedSrc: [{
|
|
2207
|
-
type: Input
|
|
2208
|
-
}], checkScroll: [{
|
|
2043
|
+
], template: "<eui-tabs (tabActivate)=\"onTabActivate($event)\">\n <eui-tab>\n <eui-label>Usage and documentation</eui-label>\n <eui-tab-body>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label() }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\" />\n\n @if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n } @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n }\n\n @if (docEntries().length !== 0) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Design system references</h3>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </h6>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </h6>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n }\n\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n @if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n } @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n }\n </eui-tab-body>\n </eui-tab>\n <eui-tab>\n <eui-label>Pattern sample</eui-label>\n <eui-tab-body>\n <ng-content select=\"docPagePatternSample\" />\n </eui-tab-body>\n </eui-tab>\n\n <eui-tabs-right-content>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode()\">\n <eui-icon-svg icon=\"eui-code\" />\n View sources\n </button>\n </eui-tabs-right-content>\n</eui-tabs>\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"] }]
|
|
2044
|
+
}], 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: [{
|
|
2209
2045
|
type: HostListener,
|
|
2210
2046
|
args: ['window:scroll']
|
|
2211
2047
|
}] } });
|
|
2212
2048
|
|
|
2213
2049
|
class DocPagePatternSampleRefsComponent {
|
|
2214
2050
|
constructor() {
|
|
2215
|
-
this.
|
|
2216
|
-
|
|
2051
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
2052
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
2053
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
2054
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
2217
2055
|
}
|
|
2218
2056
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleRefsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2219
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2057
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSampleRefsComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample-refs", inputs: { docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eui-showcase-doc-page-pattern-sample-refs" }, ngImport: i0, template: "<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n<div class=\"row\">\n @for (ref of docEntries(); track ref) {\n <div class=\"col-md-6 eui-u-mb-3xl\">\n <eui-card class=\"eui-u-height-100\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n }\n <span class=\"eui-u-f-l\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content class=\"eui-u-display-flex eui-u-flex-column eui-u-flex-gap-s\">\n <div class=\"eui-u-f-bold\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"eui-u-f-bold\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"eui-u-f-bold\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row eui-u-mt-l\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"eui-u-c-bg-success eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-success eui-u-f-bold eui-u-mt-s eui-u-mb-xs\">Do's</div>\n @for (do of ref.dos; track do) {\n <li>{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"eui-u-c-bg-danger eui-u-p-xs\"></div>\n <div class=\"eui-u-c-s-danger eui-u-mt-s eui-u-mb-xs eui-u-f-bold\">Dont's</div>\n @for (dont of ref.donts; track dont) {\n <li>{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </div>\n }\n</div>\n\n\n", styles: [":host{display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-l-bold)}\n"], dependencies: [{ kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i5$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }] }); }
|
|
2220
2058
|
}
|
|
2221
2059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleRefsComponent, decorators: [{
|
|
2222
2060
|
type: Component,
|
|
2223
|
-
args: [{ selector: 'eui-showcase-doc-pattern-sample-refs', imports: [
|
|
2224
|
-
CommonModule,
|
|
2061
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample-refs', host: { class: 'eui-showcase-doc-page-pattern-sample-refs' }, imports: [
|
|
2225
2062
|
...EUI_CHIP,
|
|
2226
2063
|
...EUI_CARD,
|
|
2227
2064
|
...EUI_BADGE,
|
|
2228
|
-
], 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\"
|
|
2229
|
-
}], propDecorators: {
|
|
2230
|
-
type: HostBinding,
|
|
2231
|
-
args: ['class']
|
|
2232
|
-
}], docEntries: [{
|
|
2233
|
-
type: Input
|
|
2234
|
-
}], codeFolder: [{
|
|
2235
|
-
type: Input
|
|
2236
|
-
}] } });
|
|
2065
|
+
], 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"] }]
|
|
2066
|
+
}], propDecorators: { docEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "docEntries", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }] } });
|
|
2237
2067
|
|
|
2238
2068
|
/* eslint-disable */
|
|
2239
2069
|
class DocPagePatternSampleDocDirective {
|
|
@@ -2246,70 +2076,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2246
2076
|
}] });
|
|
2247
2077
|
class DocPagePatternSampleComponent {
|
|
2248
2078
|
constructor() {
|
|
2249
|
-
this.
|
|
2250
|
-
|
|
2251
|
-
this.
|
|
2252
|
-
|
|
2253
|
-
this.
|
|
2254
|
-
|
|
2255
|
-
this.
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2079
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
2080
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2081
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
2082
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
2083
|
+
this.codeFolder = input(undefined, /* @ts-ignore */
|
|
2084
|
+
...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
|
|
2085
|
+
this.refsImage = input(undefined, /* @ts-ignore */
|
|
2086
|
+
...(ngDevMode ? [{ debugName: "refsImage" }] : /* istanbul ignore next */ []));
|
|
2087
|
+
this.refsImage2 = input(undefined, /* @ts-ignore */
|
|
2088
|
+
...(ngDevMode ? [{ debugName: "refsImage2" }] : /* istanbul ignore next */ []));
|
|
2089
|
+
this.figmaLink = input(undefined, /* @ts-ignore */
|
|
2090
|
+
...(ngDevMode ? [{ debugName: "figmaLink" }] : /* istanbul ignore next */ []));
|
|
2091
|
+
this.aiLink = input(undefined, /* @ts-ignore */
|
|
2092
|
+
...(ngDevMode ? [{ debugName: "aiLink" }] : /* istanbul ignore next */ []));
|
|
2093
|
+
this.isSmall = input(false, /* @ts-ignore */
|
|
2094
|
+
...(ngDevMode ? [{ debugName: "isSmall" }] : /* istanbul ignore next */ []));
|
|
2095
|
+
this.isTiny = input(false, /* @ts-ignore */
|
|
2096
|
+
...(ngDevMode ? [{ debugName: "isTiny" }] : /* istanbul ignore next */ []));
|
|
2097
|
+
this.isMedium = input(false, /* @ts-ignore */
|
|
2098
|
+
...(ngDevMode ? [{ debugName: "isMedium" }] : /* istanbul ignore next */ []));
|
|
2099
|
+
this.isLarge = input(false, /* @ts-ignore */
|
|
2100
|
+
...(ngDevMode ? [{ debugName: "isLarge" }] : /* istanbul ignore next */ []));
|
|
2101
|
+
this.isExtraLarge = input(false, /* @ts-ignore */
|
|
2102
|
+
...(ngDevMode ? [{ debugName: "isExtraLarge" }] : /* istanbul ignore next */ []));
|
|
2103
|
+
this.hasAutoHeight = input(false, /* @ts-ignore */
|
|
2104
|
+
...(ngDevMode ? [{ debugName: "hasAutoHeight" }] : /* istanbul ignore next */ []));
|
|
2105
|
+
this.docContent = contentChild(forwardRef(() => DocPagePatternSampleDocDirective), /* @ts-ignore */
|
|
2106
|
+
...(ngDevMode ? [{ debugName: "docContent" }] : /* istanbul ignore next */ []));
|
|
2262
2107
|
}
|
|
2263
2108
|
openCode() {
|
|
2264
|
-
// eslint-disable-next-line max-len
|
|
2265
2109
|
const showcaseRoot = 'https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-ux-components/-/blob/master/src/app/features/showcase-design-patterns/';
|
|
2266
|
-
window.open(showcaseRoot + this.codeFolder, '_blank');
|
|
2110
|
+
window.open(showcaseRoot + this.codeFolder(), '_blank');
|
|
2267
2111
|
}
|
|
2268
2112
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2269
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSampleComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample", inputs: { label: "label", docEntries: "docEntries", codeFolder: "codeFolder", refsImage: "refsImage", refsImage2: "refsImage2", figmaLink: "figmaLink", aiLink: "aiLink", isSmall: "isSmall", isTiny: "isTiny", isMedium: "isMedium", isLarge: "isLarge", isExtraLarge: "isExtraLarge", hasAutoHeight: "hasAutoHeight" }, host: { properties: { "class": "
|
|
2113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSampleComponent, isStandalone: true, selector: "eui-showcase-doc-pattern-sample", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, refsImage: { classPropertyName: "refsImage", publicName: "refsImage", isSignal: true, isRequired: false, transformFunction: null }, refsImage2: { classPropertyName: "refsImage2", publicName: "refsImage2", isSignal: true, isRequired: false, transformFunction: null }, figmaLink: { classPropertyName: "figmaLink", publicName: "figmaLink", isSignal: true, isRequired: false, transformFunction: null }, aiLink: { classPropertyName: "aiLink", publicName: "aiLink", isSignal: true, isRequired: false, transformFunction: null }, isSmall: { classPropertyName: "isSmall", publicName: "isSmall", isSignal: true, isRequired: false, transformFunction: null }, isTiny: { classPropertyName: "isTiny", publicName: "isTiny", isSignal: true, isRequired: false, transformFunction: null }, isMedium: { classPropertyName: "isMedium", publicName: "isMedium", isSignal: true, isRequired: false, transformFunction: null }, isLarge: { classPropertyName: "isLarge", publicName: "isLarge", isSignal: true, isRequired: false, transformFunction: null }, isExtraLarge: { classPropertyName: "isExtraLarge", publicName: "isExtraLarge", isSignal: true, isRequired: false, transformFunction: null }, hasAutoHeight: { classPropertyName: "hasAutoHeight", publicName: "hasAutoHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.no-code": "!codeFolder()" }, classAttribute: "eui-showcase-doc-page-pattern-sample" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n<div class=\"row\">\n@if (figmaLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">Figma reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{figmaLink()}}\" class=\"eui-u-text-link-external\" target=\"_blank\">\n <svg viewBox=\"0 0 38 57\" style=\"height: 36px; width: 36px;\"><path fill=\"#1abcfe\" d=\"M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z\"></path><path fill=\"#0acf83\" d=\"M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z\"></path><path fill=\"#ff7262\" d=\"M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z\"></path><path fill=\"#f24e1e\" d=\"M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z\"></path><path fill=\"#a259ff\" d=\"M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z\"></path></svg>\n Link to Figma page pattern\n </a>\n </span>\n </div>\n}\n@if (aiLink()) {\n <div class=\"col-6\">\n <h4 class=\"eui-u-text-h4\">AI reference</h4>\n <span>\n <a euiButton euiBasicButton euiPrimary href=\"{{aiLink()}}\" class=\"eui-u-text-link\">\n <svg viewBox=\"0 0 24 24\" style=\"height: 48px; width: 48px;\" xmlns=\"http://www.w3.org/2000/svg\"><title>Kiro</title><path d=\"M18.8 0H5.2A5.2 5.2 0 000 5.2v13.6A5.2 5.2 0 005.2 24h13.6a5.2 5.2 0 005.2-5.2V5.2A5.2 5.2 0 0018.8 0z\" fill=\"#9046FF\"></path><path d=\"M7.97 16.376c-1.644 3.642 1.86 4.556 4.443 2.424.76 2.39 3.608.607 4.631-1.247 2.251-4.084 1.342-8.249 1.108-9.108-1.6-5.859-9.6-5.869-10.976.03-.323 1.033-.328 2.206-.507 3.423-.09.617-.16 1.009-.393 1.655-.139.373-.323.7-.62 1.257-.458.865-.264 2.53 2.101 1.665l.224-.1h-.01l-.001.001z\" fill=\"#fff\"></path><path d=\"M12.722 10.985c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.218-.97a.61.61 0 01.537-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005zm2.703 0c-.656 0-.755-.785-.755-1.252 0-.423.074-.756.219-.97a.61.61 0 01.536-.283c.229 0 .428.095.567.289.159.218.243.55.243.964 0 .785-.303 1.252-.805 1.252h-.005z\" fill=\"#000\"></path></svg>\n View AI generated page pattern\n </a>\n </span>\n </div>\n}\n</div>\n\n@if (docContent()) {\n <h4 class=\"eui-u-text-h4\">Information</h4>\n <ng-content select=\"eui-showcase-doc-pattern-sample-doc\" />\n}\n\n\n<h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n\n<div class=\"content-wrapper\">\n <div class=\"content\"\n [class.small]=\"isSmall()\" [class.medium]=\"isMedium()\"\n [class.large]=\"isLarge()\" [class.extra-large]=\"isExtraLarge()\" [class.tiny]=\"isTiny()\" [class.auto-height]=\"hasAutoHeight()\">\n @for (ref of docEntries(); track ref) {\n <eui-badge [euiDanger]=\"ref.mandatory\" [euiSecondary]=\"ref.outsidePattern\" [euiPrimary]=\"!ref.mandatory\" class=\"eui-u-p-absolute\" [style]=\"ref.position\">\n {{ref.id}}\n </eui-badge>\n }\n <div class=\"sample-wrapper\">\n <ng-content />\n </div>\n </div>\n\n @if (codeFolder()) {\n <div class=\"eui-u-flex eui-u-flex-justify-content-center eui-u-mt-l\">\n <button euiButton euiCTAButton euiSizeS (click)=\"openCode()\">Check the code</button>\n </div>\n }\n</div>\n\n\n\n@if (refsImage()) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage() }}\"\n alt=\"Design anatomy image\"/>\n}\n\n@if (refsImage2()) {\n <img class=\"refs-image\"\n src=\"assets/images/design-patterns/{{ refsImage2() }}\"\n alt=\"Design anatomy image\"/>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}:host .content-wrapper{display:flex;height:100%;width:100%;padding:2rem 4rem;background-color:var(--eui-c-bg);position:relative;flex-direction:column}:host .content{display:flex;height:40rem;width:100%;position:relative;background-color:var(--eui-c-bg);box-shadow:var(--eui-sh-2)}:host .content.tiny{height:8rem}:host .content.small{height:10rem}:host .content.medium{height:20rem}:host .content.large{height:50rem}:host .content.extra-large{height:75rem}:host .content.auto-height{height:auto}:host .sample-wrapper{display:block;width:100%}:host .sample-wrapper ::ng-deep .sample{display:flex;width:100%}:host .sample-wrapper ::ng-deep eui-header{height:90px}:host img.refs-image{width:fit-content;margin-bottom:var(--eui-s-7xl)}:host.no-code .content-wrapper{padding:2rem}\n"], dependencies: [{ kind: "component", type: i5$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge", "colorPalette"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
2270
2114
|
}
|
|
2271
2115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSampleComponent, decorators: [{
|
|
2272
2116
|
type: Component,
|
|
2273
|
-
args: [{ selector: 'eui-showcase-doc-pattern-sample', imports: [
|
|
2274
|
-
CommonModule,
|
|
2117
|
+
args: [{ selector: 'eui-showcase-doc-pattern-sample', host: { class: 'eui-showcase-doc-page-pattern-sample', '[class.no-code]': '!codeFolder()' }, imports: [
|
|
2275
2118
|
...EUI_BADGE,
|
|
2276
2119
|
...EUI_BUTTON,
|
|
2277
|
-
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label }}</div>\n\n<div class=\"row\">\n
|
|
2278
|
-
}], propDecorators: {
|
|
2279
|
-
type: HostBinding,
|
|
2280
|
-
args: ['class']
|
|
2281
|
-
}], label: [{
|
|
2282
|
-
type: Input
|
|
2283
|
-
}], docEntries: [{
|
|
2284
|
-
type: Input
|
|
2285
|
-
}], codeFolder: [{
|
|
2286
|
-
type: Input
|
|
2287
|
-
}], refsImage: [{
|
|
2288
|
-
type: Input
|
|
2289
|
-
}], refsImage2: [{
|
|
2290
|
-
type: Input
|
|
2291
|
-
}], figmaLink: [{
|
|
2292
|
-
type: Input
|
|
2293
|
-
}], aiLink: [{
|
|
2294
|
-
type: Input
|
|
2295
|
-
}], isSmall: [{
|
|
2296
|
-
type: Input
|
|
2297
|
-
}], isTiny: [{
|
|
2298
|
-
type: Input
|
|
2299
|
-
}], isMedium: [{
|
|
2300
|
-
type: Input
|
|
2301
|
-
}], isLarge: [{
|
|
2302
|
-
type: Input
|
|
2303
|
-
}], isExtraLarge: [{
|
|
2304
|
-
type: Input
|
|
2305
|
-
}], hasAutoHeight: [{
|
|
2306
|
-
type: Input
|
|
2307
|
-
}], docContent: [{
|
|
2308
|
-
type: ContentChild,
|
|
2309
|
-
args: [forwardRef(() => DocPagePatternSampleDocDirective)]
|
|
2310
|
-
}] } });
|
|
2120
|
+
], 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"] }]
|
|
2121
|
+
}], 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 }] }] } });
|
|
2311
2122
|
|
|
2312
|
-
/* eslint-disable max-len */
|
|
2313
2123
|
/* eslint-disable */
|
|
2314
2124
|
class DocPagePatternSimpleDocDirective {
|
|
2315
2125
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -2319,17 +2129,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2319
2129
|
type: Directive,
|
|
2320
2130
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
2321
2131
|
}] });
|
|
2132
|
+
const REPOSITORY_URL = (showcase) => `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${showcase}/-/blob/master/src/app/features/`;
|
|
2322
2133
|
class DocPagePatternSimpleComponent {
|
|
2323
2134
|
constructor() {
|
|
2324
|
-
this.
|
|
2325
|
-
|
|
2326
|
-
this.
|
|
2135
|
+
this.docContent = contentChild(forwardRef(() => DocPagePatternSimpleDocDirective), /* @ts-ignore */
|
|
2136
|
+
...(ngDevMode ? [{ debugName: "docContent" }] : /* istanbul ignore next */ []));
|
|
2137
|
+
this.id = input(undefined, /* @ts-ignore */
|
|
2138
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
2139
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
2140
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2141
|
+
this.anatomyImage = input(undefined, /* @ts-ignore */
|
|
2142
|
+
...(ngDevMode ? [{ debugName: "anatomyImage" }] : /* istanbul ignore next */ []));
|
|
2143
|
+
this.docEntries = input([], /* @ts-ignore */
|
|
2144
|
+
...(ngDevMode ? [{ debugName: "docEntries" }] : /* istanbul ignore next */ []));
|
|
2145
|
+
this.dos = input([], /* @ts-ignore */
|
|
2146
|
+
...(ngDevMode ? [{ debugName: "dos" }] : /* istanbul ignore next */ []));
|
|
2147
|
+
this.donts = input([], /* @ts-ignore */
|
|
2148
|
+
...(ngDevMode ? [{ debugName: "donts" }] : /* istanbul ignore next */ []));
|
|
2149
|
+
this.sourceUrl = input(undefined, /* @ts-ignore */
|
|
2150
|
+
...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
|
|
2151
|
+
this.figmaUrl = input(undefined, /* @ts-ignore */
|
|
2152
|
+
...(ngDevMode ? [{ debugName: "figmaUrl" }] : /* istanbul ignore next */ []));
|
|
2153
|
+
this.figmaEmbedSrc = input(undefined, /* @ts-ignore */
|
|
2154
|
+
...(ngDevMode ? [{ debugName: "figmaEmbedSrc" }] : /* istanbul ignore next */ []));
|
|
2327
2155
|
this.topPosToStartShowing = 100;
|
|
2328
2156
|
this.tabSelectedIndex = 0;
|
|
2329
2157
|
this.sanitizer = inject(DomSanitizer);
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2158
|
+
effect(() => {
|
|
2159
|
+
const figmaEmbedSrc = this.figmaEmbedSrc();
|
|
2160
|
+
if (figmaEmbedSrc) {
|
|
2161
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(figmaEmbedSrc);
|
|
2162
|
+
}
|
|
2163
|
+
});
|
|
2333
2164
|
}
|
|
2334
2165
|
checkScroll() {
|
|
2335
2166
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
@@ -2340,17 +2171,10 @@ class DocPagePatternSimpleComponent {
|
|
|
2340
2171
|
this.isShowGoTop = false;
|
|
2341
2172
|
}
|
|
2342
2173
|
}
|
|
2343
|
-
|
|
2344
|
-
if (this.figmaEmbedSrc) {
|
|
2345
|
-
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
|
|
2346
|
-
const iFrame = document.getElementById('iframe-figma');
|
|
2347
|
-
}
|
|
2348
|
-
}
|
|
2349
|
-
onNavigateToCode(event) {
|
|
2350
|
-
// eslint-disable-next-line max-len
|
|
2174
|
+
onNavigateToCode() {
|
|
2351
2175
|
const showcase = 'ux-patterns';
|
|
2352
|
-
const sourceRootPath =
|
|
2353
|
-
window.open(sourceRootPath + this.sourceUrl, '_blank');
|
|
2176
|
+
const sourceRootPath = REPOSITORY_URL(showcase);
|
|
2177
|
+
window.open(sourceRootPath + this.sourceUrl(), '_blank');
|
|
2354
2178
|
}
|
|
2355
2179
|
onTabSelect(event) {
|
|
2356
2180
|
this.tabSelectedIndex = event.index;
|
|
@@ -2363,44 +2187,18 @@ class DocPagePatternSimpleComponent {
|
|
|
2363
2187
|
});
|
|
2364
2188
|
}
|
|
2365
2189
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2366
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: DocPagePatternSimpleComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern-simple", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSimpleDocDirective), descendants: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\"></ng-content>\n\n<ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n</ng-container>\n<ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"60%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n </ng-container>\n</ng-template>\n\n<ng-container *ngIf=\"docEntries.length !== 0\">\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-avatar *ngIf=\"ref?.id\" euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip> \n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content>\n <div class=\"doc-page-section-title\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <div class=\"doc-page-section-title\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <div class=\"doc-page-section-title\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <div class=\"doc-page-section-title eui-u-c-s-success\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </div>\n <li *ngFor=\"let do of ref.dos\" class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <div class=\"doc-page-section-title eui-u-c-s-danger\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </div>\n <li *ngFor=\"let dont of ref.donts\" class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n</ng-container>\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n<ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n</ng-container>\n<ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n</ng-template>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-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$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i4$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i4$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i4$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i4$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i6.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i6$2.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i6$2.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2190
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocPagePatternSimpleComponent, isStandalone: true, selector: "eui-showcase-doc-page-pattern-simple", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, anatomyImage: { classPropertyName: "anatomyImage", publicName: "anatomyImage", isSignal: true, isRequired: false, transformFunction: null }, docEntries: { classPropertyName: "docEntries", publicName: "docEntries", isSignal: true, isRequired: false, transformFunction: null }, dos: { classPropertyName: "dos", publicName: "dos", isSignal: true, isRequired: false, transformFunction: null }, donts: { classPropertyName: "donts", publicName: "donts", isSignal: true, isRequired: false, transformFunction: null }, sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaUrl: { classPropertyName: "figmaUrl", publicName: "figmaUrl", isSignal: true, isRequired: false, transformFunction: null }, figmaEmbedSrc: { classPropertyName: "figmaEmbedSrc", publicName: "figmaEmbedSrc", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:scroll": "checkScroll()" }, classAttribute: "doc-page-pattern" }, queries: [{ propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSimpleDocDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\" />\n\n@if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n} @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"60%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n}\n\n@if (docEntries().length !== 0) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-avatar euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n }\n <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content>\n <div class=\"doc-page-section-title\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"doc-page-section-title\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"doc-page-section-title\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-success\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </div>\n @for (do of ref.dos; track do) {\n <li class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-danger\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </div>\n @for (dont of ref.donts; track dont) {\n <li class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n}\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n@if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n} @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n}\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}\n"], dependencies: [{ kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable", "hasLeftExpander", "isCompact"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines", "isClickeable"], outputs: ["collapse", "headerClick"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content", inputs: ["isTopAligned"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }, { kind: "component", type: i5$2.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i5$2.EuiAvatarTextComponent, selector: "eui-avatar-text" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2367
2191
|
}
|
|
2368
2192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocPagePatternSimpleComponent, decorators: [{
|
|
2369
2193
|
type: Component,
|
|
2370
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None, imports: [
|
|
2371
|
-
CommonModule,
|
|
2194
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern-simple', encapsulation: ViewEncapsulation.None, host: { class: 'doc-page-pattern' }, imports: [
|
|
2372
2195
|
...EUI_BUTTON,
|
|
2373
|
-
...EUI_TABS,
|
|
2374
2196
|
...EUI_ICON,
|
|
2375
2197
|
...EUI_CARD,
|
|
2376
2198
|
...EUI_CHIP,
|
|
2377
2199
|
...EUI_AVATAR,
|
|
2378
|
-
], 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\"
|
|
2379
|
-
}], propDecorators: {
|
|
2380
|
-
type: HostBinding,
|
|
2381
|
-
args: ['class']
|
|
2382
|
-
}], docContent: [{
|
|
2383
|
-
type: ContentChild,
|
|
2384
|
-
args: [forwardRef(() => DocPagePatternSimpleDocDirective)]
|
|
2385
|
-
}], id: [{
|
|
2386
|
-
type: Input
|
|
2387
|
-
}], label: [{
|
|
2388
|
-
type: Input
|
|
2389
|
-
}], anatomyImage: [{
|
|
2390
|
-
type: Input
|
|
2391
|
-
}], docEntries: [{
|
|
2392
|
-
type: Input
|
|
2393
|
-
}], dos: [{
|
|
2394
|
-
type: Input
|
|
2395
|
-
}], donts: [{
|
|
2396
|
-
type: Input
|
|
2397
|
-
}], sourceUrl: [{
|
|
2398
|
-
type: Input
|
|
2399
|
-
}], figmaUrl: [{
|
|
2400
|
-
type: Input
|
|
2401
|
-
}], figmaEmbedSrc: [{
|
|
2402
|
-
type: Input
|
|
2403
|
-
}], checkScroll: [{
|
|
2200
|
+
], template: "<div role=\"heading\" aria-level=\"1\" class=\"eui-u-f-xl-bold\">{{ label() }}</div>\n\n\n<h4 class=\"eui-u-text-h4\">Information</h4>\n<ng-content select=\"docPagePatternDoc\" />\n\n@if (figmaEmbedSrc()) {\n <h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n} @else {\n @if (figmaUrl() !== 'PENDING_DS') {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Anatomy</h4>\n <img\n src=\"assets/images/design-system/{{ anatomyImage() }}\"\n alt=\"Design anatomy image\"\n width=\"60%\"\n class=\"eui-u-sh-5 eui-u-mb-m\" />\n }\n}\n\n@if (docEntries().length !== 0) {\n <h4 class=\"eui-u-mt-3xl eui-u-text-h4\">Design system references</h4>\n @for (ref of docEntries(); track ref) {\n <eui-card class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n @if (ref?.id) {\n <eui-avatar euiSizeS euiDanger class=\"eui-u-mr-s\"><eui-avatar-text>{{ ref.id }}</eui-avatar-text></eui-avatar>\n }\n <span class=\"eui-u-f-xl\">{{ ref.name }}</span>\n <eui-chip [euiDanger]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n @if (ref.mandatory) {\n <span euiLabel><strong> Mandatory </strong></span>\n }\n @if (!ref.mandatory) {\n <span euiLabel><strong> Optional </strong></span>\n }\n </eui-chip>\n </div>\n </eui-card-header-title>\n </eui-card-header>\n <eui-card-content>\n <div class=\"doc-page-section-title\">Description</div>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n @if (ref.whenToUse) {\n <div class=\"doc-page-section-title\">When to use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n }\n @if (ref.whenNotToUse) {\n <div class=\"doc-page-section-title\">When to not use ?</div>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n }\n <div class=\"row\">\n <div class=\"col-md-6\">\n @if (ref.dos && ref.dos.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-success\">\n <eui-icon-svg icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\" />\n <strong>Do's</strong>\n </div>\n @for (do of ref.dos; track do) {\n <li class=\"eui-u-c-s-success eui-u-f-bold\">{{ do }}</li>\n }\n }\n </div>\n <div class=\"col-md-6\">\n @if (ref.donts && ref.donts.length !== 0) {\n <div class=\"doc-page-section-title eui-u-c-s-danger\">\n <eui-icon-svg icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\" />\n <strong>Dont's</strong>\n </div>\n @for (dont of ref.donts; track dont) {\n <li class=\"eui-u-c-s-danger eui-u-f-bold\">{{ dont }}</li>\n }\n }\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n }\n}\n\n<h3 class=\"eui-u-mt-3xl eui-u-text-h3\">Figma resource</h3>\n@if (figmaUrl() === 'PENDING_DS') {\n Pending Design system publication. Will be available in a future release.\n} @else {\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl() }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label() }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n}\n\n@if (isShowGoTop && tabSelectedIndex === 0) {\n<button\n type=\"button\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-5\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\" />\n</button>\n}\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl) var(--eui-s-xl) 0 var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}.doc-page-pattern .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-bold)}\n"] }]
|
|
2201
|
+
}], 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: [{
|
|
2404
2202
|
type: HostListener,
|
|
2405
2203
|
args: ['window:scroll']
|
|
2406
2204
|
}] } });
|
|
@@ -2416,58 +2214,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2416
2214
|
|
|
2417
2215
|
class DocSectionCodeComponent {
|
|
2418
2216
|
constructor() {
|
|
2419
|
-
this.
|
|
2420
|
-
|
|
2217
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
2218
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
2219
|
+
this.content = input(undefined, /* @ts-ignore */
|
|
2220
|
+
...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
|
|
2221
|
+
this.styleClass = input(undefined, /* @ts-ignore */
|
|
2222
|
+
...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
|
|
2223
|
+
this.versionLabel = input(undefined, /* @ts-ignore */
|
|
2224
|
+
...(ngDevMode ? [{ debugName: "versionLabel" }] : /* istanbul ignore next */ []));
|
|
2225
|
+
this.isDeprecated = input(false, /* @ts-ignore */
|
|
2226
|
+
...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
|
|
2227
|
+
this.isCodeExpanded = signal(false, /* @ts-ignore */
|
|
2228
|
+
...(ngDevMode ? [{ debugName: "isCodeExpanded" }] : /* istanbul ignore next */ []));
|
|
2229
|
+
this.sectionDescription = contentChild(forwardRef(() => DocSectionCodeDescriptionTagDirective), /* @ts-ignore */
|
|
2230
|
+
...(ngDevMode ? [{ debugName: "sectionDescription" }] : /* istanbul ignore next */ []));
|
|
2231
|
+
this.sectionCodeHTML = contentChild(forwardRef(() => DocSectionCodeHtmlTagDirective), /* @ts-ignore */
|
|
2232
|
+
...(ngDevMode ? [{ debugName: "sectionCodeHTML" }] : /* istanbul ignore next */ []));
|
|
2233
|
+
this.sectionCodeTS = contentChild(forwardRef(() => DocSectionCodeTsTagDirective), /* @ts-ignore */
|
|
2234
|
+
...(ngDevMode ? [{ debugName: "sectionCodeTS" }] : /* istanbul ignore next */ []));
|
|
2235
|
+
this.sectionCodeSERVICE = contentChild(forwardRef(() => DocSectionCodeServiceTagDirective), /* @ts-ignore */
|
|
2236
|
+
...(ngDevMode ? [{ debugName: "sectionCodeSERVICE" }] : /* istanbul ignore next */ []));
|
|
2237
|
+
this.sectionCodeCSS = contentChild(forwardRef(() => DocSectionCodeCssTagDirective), /* @ts-ignore */
|
|
2238
|
+
...(ngDevMode ? [{ debugName: "sectionCodeCSS" }] : /* istanbul ignore next */ []));
|
|
2239
|
+
this.sectionCodeDOC = contentChild(forwardRef(() => DocSectionCodeDocTagDirective), /* @ts-ignore */
|
|
2240
|
+
...(ngDevMode ? [{ debugName: "sectionCodeDOC" }] : /* istanbul ignore next */ []));
|
|
2421
2241
|
}
|
|
2422
2242
|
toggleCode() {
|
|
2423
|
-
this.isCodeExpanded
|
|
2243
|
+
this.isCodeExpanded.update(v => !v);
|
|
2424
2244
|
}
|
|
2425
2245
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2426
2246
|
isDefined(object) {
|
|
2427
2247
|
return object;
|
|
2428
2248
|
}
|
|
2429
2249
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2430
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2250
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DocSectionCodeComponent, isStandalone: true, selector: "eui-showcase-doc-section-code", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, versionLabel: { classPropertyName: "versionLabel", publicName: "versionLabel", isSignal: true, isRequired: false, transformFunction: null }, isDeprecated: { classPropertyName: "isDeprecated", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true, isSignal: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true, isSignal: true }], ngImport: i0, template: "<h5 class=\"section-title {{ styleClass() }}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated()\">\n {{ label() }}\n </div>\n <div class=\"ml-auto\">\n @if (versionLabel()) {\n <span class=\"eui-u-color-danger\">{{ versionLabel() }}</span>\n }\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded()\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n @if (!isCodeExpanded()) {\n <span euiLabel>Code</span>\n }\n @if (isCodeExpanded()) {\n <span euiLabel>Hide Code</span>\n }\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n @if (isDeprecated()) {\n <div>\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n }\n</h5>\n\n@if (sectionDescription()) {\n <div class=\"eui-u-mv\">\n <ng-content select=\"sectionDescription\" />\n </div>\n}\n\n@if (isCodeExpanded()) {\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML())\">\n <eui-tab-header>\n <eui-label>HTML</eui-label>\n <eui-label euiSublabel>HyperText Markup Language</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS())\">\n <eui-tab-header>\n <eui-label>TS</eui-label>\n <eui-label euiSublabel>Typescript</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE())\">\n <eui-tab-header>\n <eui-label>Service</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS())\">\n <eui-tab-header>\n <eui-label>CSS</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\" /></code></pre>\n </eui-tab-body>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC())\">\n <eui-tab-header>\n <eui-label>DOC</eui-label>\n <eui-label euiSublabel>Documentation</eui-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"language-doc\">\n <ng-content select=\"sectionCodeDOC\" />\n </div>\n </eui-tab-body>\n </eui-tab>\n </eui-tabs>\n @if (!sectionCodeHTML() && !sectionCodeTS() && !sectionCodeCSS()) {\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content /></code></pre>\n }\n}\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "component", type: i4.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }] }); }
|
|
2431
2251
|
}
|
|
2432
2252
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
|
|
2433
2253
|
type: Component,
|
|
2434
2254
|
args: [{ selector: 'eui-showcase-doc-section-code', imports: [
|
|
2435
|
-
CommonModule,
|
|
2436
2255
|
...EUI_LABEL,
|
|
2437
2256
|
...EUI_TABS,
|
|
2438
2257
|
...EUI_BUTTON,
|
|
2439
|
-
], 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
|
|
2440
|
-
}], propDecorators: { label: [{
|
|
2441
|
-
type: Input
|
|
2442
|
-
}], content: [{
|
|
2443
|
-
type: Input
|
|
2444
|
-
}], styleClass: [{
|
|
2445
|
-
type: Input
|
|
2446
|
-
}], versionLabel: [{
|
|
2447
|
-
type: Input
|
|
2448
|
-
}], isDeprecated: [{
|
|
2449
|
-
type: Input
|
|
2450
|
-
}], isCodeExpanded: [{
|
|
2451
|
-
type: Input
|
|
2452
|
-
}], sectionDescription: [{
|
|
2453
|
-
type: ContentChild,
|
|
2454
|
-
args: [forwardRef(() => DocSectionCodeDescriptionTagDirective)]
|
|
2455
|
-
}], sectionCodeHTML: [{
|
|
2456
|
-
type: ContentChild,
|
|
2457
|
-
args: [forwardRef(() => DocSectionCodeHtmlTagDirective)]
|
|
2458
|
-
}], sectionCodeTS: [{
|
|
2459
|
-
type: ContentChild,
|
|
2460
|
-
args: [forwardRef(() => DocSectionCodeTsTagDirective)]
|
|
2461
|
-
}], sectionCodeSERVICE: [{
|
|
2462
|
-
type: ContentChild,
|
|
2463
|
-
args: [forwardRef(() => DocSectionCodeServiceTagDirective)]
|
|
2464
|
-
}], sectionCodeCSS: [{
|
|
2465
|
-
type: ContentChild,
|
|
2466
|
-
args: [forwardRef(() => DocSectionCodeCssTagDirective)]
|
|
2467
|
-
}], sectionCodeDOC: [{
|
|
2468
|
-
type: ContentChild,
|
|
2469
|
-
args: [forwardRef(() => DocSectionCodeDocTagDirective)]
|
|
2470
|
-
}] } });
|
|
2258
|
+
], 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"] }]
|
|
2259
|
+
}], 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 }] }] } });
|
|
2471
2260
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
2472
2261
|
class DocSectionCodeDescriptionTagDirective {
|
|
2473
2262
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
@@ -2520,51 +2309,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2520
2309
|
|
|
2521
2310
|
class LoremIpsumSampleComponent {
|
|
2522
2311
|
constructor() {
|
|
2523
|
-
this.textSize = 'large'
|
|
2312
|
+
this.textSize = input('large', /* @ts-ignore */
|
|
2313
|
+
...(ngDevMode ? [{ debugName: "textSize" }] : /* istanbul ignore next */ []));
|
|
2524
2314
|
}
|
|
2525
2315
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2526
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", 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"] }] }); }
|
|
2316
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LoremIpsumSampleComponent, isStandalone: true, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (textSize() === 'small') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n </div>\n}\n\n@if (textSize() === 'medium') {\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n </div>\n}\n\n@if (textSize() === 'large') {\n <div>\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n </div>\n}\n" }); }
|
|
2527
2317
|
}
|
|
2528
2318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
|
|
2529
2319
|
type: Component,
|
|
2530
|
-
args: [{ selector: 'eui-showcase-doc-lorem-ipsum', imports: [
|
|
2531
|
-
|
|
2532
|
-
], 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" }]
|
|
2533
|
-
}], propDecorators: { textSize: [{
|
|
2534
|
-
type: Input
|
|
2535
|
-
}] } });
|
|
2320
|
+
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" }]
|
|
2321
|
+
}], propDecorators: { textSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSize", required: false }] }] } });
|
|
2536
2322
|
|
|
2537
2323
|
class PlaygroundComponent {
|
|
2538
2324
|
constructor() {
|
|
2539
|
-
this.title = 'eUI Playground'
|
|
2540
|
-
|
|
2325
|
+
this.title = input('eUI Playground', /* @ts-ignore */
|
|
2326
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2327
|
+
this.htmlContent = input(undefined, /* @ts-ignore */
|
|
2328
|
+
...(ngDevMode ? [{ debugName: "htmlContent" }] : /* istanbul ignore next */ []));
|
|
2329
|
+
this.sampleId = input(undefined, /* @ts-ignore */
|
|
2330
|
+
...(ngDevMode ? [{ debugName: "sampleId" }] : /* istanbul ignore next */ []));
|
|
2331
|
+
this.typescriptContent = input(undefined, /* @ts-ignore */
|
|
2332
|
+
...(ngDevMode ? [{ debugName: "typescriptContent" }] : /* istanbul ignore next */ []));
|
|
2333
|
+
this.activated = input(false, /* @ts-ignore */
|
|
2334
|
+
...(ngDevMode ? [{ debugName: "activated" }] : /* istanbul ignore next */ []));
|
|
2335
|
+
this.modules = input(undefined, /* @ts-ignore */
|
|
2336
|
+
...(ngDevMode ? [{ debugName: "modules" }] : /* istanbul ignore next */ []));
|
|
2541
2337
|
this.isLoaded = false;
|
|
2338
|
+
this.stackblitzElWrapper = viewChild('container', { ...(ngDevMode ? { debugName: "stackblitzElWrapper" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
2542
2339
|
this.sb = inject(StackblitzService);
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
if (changes.activated) {
|
|
2546
|
-
if (changes.activated.currentValue) {
|
|
2340
|
+
effect(() => {
|
|
2341
|
+
if (this.activated()) {
|
|
2547
2342
|
this.initStackblitz();
|
|
2548
2343
|
}
|
|
2549
2344
|
else {
|
|
2550
2345
|
this.isLoaded = false;
|
|
2551
2346
|
}
|
|
2552
|
-
}
|
|
2347
|
+
});
|
|
2553
2348
|
}
|
|
2554
2349
|
initStackblitz() {
|
|
2555
2350
|
this.sb.getStackblitzDependencies()
|
|
2556
2351
|
.then((deps) => {
|
|
2557
2352
|
const { dependencies, devDependencies } = deps;
|
|
2558
|
-
const { selector } = this.sb.extractComponentMetadata(this.typescriptContent);
|
|
2559
|
-
const moduleName = this.sb.extractModuleName(this.typescriptContent);
|
|
2560
|
-
const componentName = this.sb.extractComponentName(this.typescriptContent);
|
|
2353
|
+
const { selector } = this.sb.extractComponentMetadata(this.typescriptContent());
|
|
2354
|
+
const moduleName = this.sb.extractModuleName(this.typescriptContent());
|
|
2355
|
+
const componentName = this.sb.extractComponentName(this.typescriptContent());
|
|
2561
2356
|
const project = {
|
|
2562
|
-
title: this.title,
|
|
2563
|
-
description: `An eUI example for the ${this.title}.`,
|
|
2357
|
+
title: this.title(),
|
|
2358
|
+
description: `An eUI example for the ${this.title()}.`,
|
|
2564
2359
|
template: 'angular-cli',
|
|
2565
2360
|
files: {
|
|
2566
|
-
'src/component.html': this.htmlContent,
|
|
2567
|
-
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent) : this.typescriptContent,
|
|
2361
|
+
'src/component.html': this.htmlContent(),
|
|
2362
|
+
'src/component.ts': moduleName ? this.sb.appendVitalNgModules(this.typescriptContent()) : this.typescriptContent(),
|
|
2568
2363
|
'src/main.ts': mainFile(moduleName, componentName),
|
|
2569
2364
|
'src/polyfills.ts': polyfillsFile,
|
|
2570
2365
|
'src/index.html': indexHtmlFile(selector),
|
|
@@ -2584,7 +2379,7 @@ class PlaygroundComponent {
|
|
|
2584
2379
|
},
|
|
2585
2380
|
dependencies,
|
|
2586
2381
|
};
|
|
2587
|
-
return sdk.embedProject(`stackblitz-${this.sampleId}`, project, {
|
|
2382
|
+
return sdk.embedProject(`stackblitz-${this.sampleId()}`, project, {
|
|
2588
2383
|
height: 500,
|
|
2589
2384
|
openFile: ['src/component.ts', 'src/component.html'],
|
|
2590
2385
|
});
|
|
@@ -2595,29 +2390,14 @@ class PlaygroundComponent {
|
|
|
2595
2390
|
});
|
|
2596
2391
|
}
|
|
2597
2392
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2598
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2393
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: PlaygroundComponent, isStandalone: true, selector: "eui-playground", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, htmlContent: { classPropertyName: "htmlContent", publicName: "htmlContent", isSignal: true, isRequired: false, transformFunction: null }, sampleId: { classPropertyName: "sampleId", publicName: "sampleId", isSignal: true, isRequired: false, transformFunction: null }, typescriptContent: { classPropertyName: "typescriptContent", publicName: "typescriptContent", isSignal: true, isRequired: false, transformFunction: null }, activated: { classPropertyName: "activated", publicName: "activated", isSignal: true, isRequired: false, transformFunction: null }, modules: { classPropertyName: "modules", publicName: "modules", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId()}}\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i1$2.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] }); }
|
|
2599
2394
|
}
|
|
2600
2395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PlaygroundComponent, decorators: [{
|
|
2601
2396
|
type: Component,
|
|
2602
2397
|
args: [{ selector: 'eui-playground', imports: [
|
|
2603
2398
|
...EUI_BLOCK_CONTENT,
|
|
2604
|
-
], template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId}}\"></iframe>\n</eui-block-content>\n" }]
|
|
2605
|
-
}], propDecorators: { title: [{
|
|
2606
|
-
type: Input
|
|
2607
|
-
}], htmlContent: [{
|
|
2608
|
-
type: Input
|
|
2609
|
-
}], sampleId: [{
|
|
2610
|
-
type: Input
|
|
2611
|
-
}], typescriptContent: [{
|
|
2612
|
-
type: Input
|
|
2613
|
-
}], activated: [{
|
|
2614
|
-
type: Input
|
|
2615
|
-
}], modules: [{
|
|
2616
|
-
type: Input
|
|
2617
|
-
}], stackblitzElWrapper: [{
|
|
2618
|
-
type: ViewChild,
|
|
2619
|
-
args: ['container', { read: ElementRef, static: true }]
|
|
2620
|
-
}] } });
|
|
2399
|
+
], template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz-{{sampleId()}}\"></iframe>\n</eui-block-content>\n" }]
|
|
2400
|
+
}], 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 }] }] } });
|
|
2621
2401
|
|
|
2622
2402
|
const EUI_SHOWCASE = [
|
|
2623
2403
|
DocPageAccessibilityContentDirective,
|