@eui/showcase 15.0.0-rc.1 → 15.0.0-rc.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/doc-page/doc-page.component.mjs +30 -43
- package/esm2020/lib/components/doc-page-code/doc-page-code.component.mjs +4 -4
- package/esm2020/lib/components/doc-page-code-fab/doc-page-code-fab.component.mjs +4 -4
- package/esm2020/lib/components/doc-page-pattern/doc-page-pattern.component.mjs +30 -20
- package/esm2020/lib/components/doc-sample/doc-sample.component.mjs +22 -5
- package/esm2020/lib/components/doc-sample-api/doc-sample-api.component.mjs +4 -4
- package/esm2020/lib/components/doc-section/doc-section.component.mjs +4 -4
- package/esm2020/lib/components/doc-section-code/doc-section-code.component.mjs +22 -22
- package/esm2020/lib/components/eui-code-highlighter/eui-code-highlighter.component.mjs +4 -4
- package/esm2020/lib/components/lorem-ipsum/lorem-ipsum-sample.component.mjs +4 -4
- package/esm2020/lib/components/playground/playground.component.mjs +4 -4
- package/esm2020/lib/eui-showcase.module.mjs +5 -5
- package/fesm2015/eui-showcase.mjs +124 -111
- package/fesm2015/eui-showcase.mjs.map +1 -1
- package/fesm2020/eui-showcase.mjs +124 -111
- package/fesm2020/eui-showcase.mjs.map +1 -1
- package/lib/components/doc-page/doc-page.component.d.ts +1 -0
- package/lib/components/doc-page/doc-page.component.d.ts.map +1 -1
- package/lib/components/doc-page-pattern/doc-page-pattern.component.d.ts +8 -3
- package/lib/components/doc-page-pattern/doc-page-pattern.component.d.ts.map +1 -1
- package/lib/components/doc-sample/doc-sample.component.d.ts +8 -1
- package/lib/components/doc-sample/doc-sample.component.d.ts.map +1 -1
- package/lib/components/playground/playground.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -2,13 +2,13 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Directive, ElementRef, Component, Input, ViewChild, ViewEncapsulation, ContentChildren, forwardRef, ContentChild, HostBinding, NgModule } from '@angular/core';
|
|
3
3
|
import * as i4 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i3$1 from '@eui/components/eui-card';
|
|
6
6
|
import { EuiCardModule } from '@eui/components/eui-card';
|
|
7
|
-
import * as i2$
|
|
7
|
+
import * as i2$2 from '@eui/components/eui-button';
|
|
8
8
|
import { EuiButtonModule } from '@eui/components/eui-button';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i6 from '@eui/components/eui-tabs';
|
|
10
10
|
import { EuiTabsModule } from '@eui/components/eui-tabs';
|
|
11
|
-
import * as i6 from '@eui/components/eui-page';
|
|
11
|
+
import * as i6$1 from '@eui/components/eui-page';
|
|
12
12
|
import { EuiPageModule } from '@eui/components/eui-page';
|
|
13
13
|
import * as i7 from '@eui/components/eui-chip';
|
|
14
14
|
import { EuiChipModule } from '@eui/components/eui-chip';
|
|
@@ -18,7 +18,7 @@ import * as i8 from '@eui/components/eui-alert';
|
|
|
18
18
|
import { EuiAlertModule } from '@eui/components/eui-alert';
|
|
19
19
|
import * as i3 from '@eui/components/eui-block-content';
|
|
20
20
|
import { EuiBlockContentModule } from '@eui/components/eui-block-content';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i5 from '@eui/components/eui-badge';
|
|
22
22
|
import { EuiBadgeModule } from '@eui/components/eui-badge';
|
|
23
23
|
import { lastValueFrom, forkJoin, Observable } from 'rxjs';
|
|
24
24
|
import { map, catchError } from 'rxjs/operators';
|
|
@@ -39,9 +39,9 @@ class EuiCodeHighlighterDirective {
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
-
/** @nocollapse */ EuiCodeHighlighterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
43
|
-
/** @nocollapse */ EuiCodeHighlighterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
42
|
+
/** @nocollapse */ EuiCodeHighlighterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
43
|
+
/** @nocollapse */ EuiCodeHighlighterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i0 });
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
|
|
45
45
|
type: Directive,
|
|
46
46
|
args: [{
|
|
47
47
|
selector: '[euiCode]'
|
|
@@ -428,9 +428,9 @@ class PlaygroundComponent {
|
|
|
428
428
|
return `import { BrowserModule } from '@angular/platform-browser';\n${contents}`;
|
|
429
429
|
}
|
|
430
430
|
}
|
|
431
|
-
/** @nocollapse */ PlaygroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
432
|
-
/** @nocollapse */ PlaygroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
433
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
431
|
+
/** @nocollapse */ PlaygroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: PlaygroundComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.UxAppShellService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
432
|
+
/** @nocollapse */ PlaygroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i3.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["isBlocked"] }] });
|
|
433
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: PlaygroundComponent, decorators: [{
|
|
434
434
|
type: Component,
|
|
435
435
|
args: [{ selector: 'eui-playground', template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz\"></iframe>\n</eui-block-content>\n" }]
|
|
436
436
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.UxAppShellService }, { type: i2$1.HttpClient }]; }, propDecorators: { title: [{
|
|
@@ -456,6 +456,7 @@ class DocSampleComponent {
|
|
|
456
456
|
this.id = '';
|
|
457
457
|
this.label = '';
|
|
458
458
|
this.styleClass = '';
|
|
459
|
+
this.renderPlayground = false;
|
|
459
460
|
this.isCodeLoaded = false;
|
|
460
461
|
this.isCodeLoading = false;
|
|
461
462
|
this.isCodeExpanded = false;
|
|
@@ -544,6 +545,20 @@ class DocSampleComponent {
|
|
|
544
545
|
onSelectedTab(selected) {
|
|
545
546
|
this.playground_activated = selected.index === 2;
|
|
546
547
|
}
|
|
548
|
+
/**
|
|
549
|
+
* filter out the extra import and module from the code sample
|
|
550
|
+
*
|
|
551
|
+
* @param code
|
|
552
|
+
*/
|
|
553
|
+
filterOutModuleAndImports(code) {
|
|
554
|
+
// filter out module
|
|
555
|
+
const moduleRegex = /@NgModule\(([\s\S]*?)\)\nexport class \w+ \{([\s\S]*?)\}/g;
|
|
556
|
+
code = code.replace(moduleRegex, '');
|
|
557
|
+
// filter out extra imports
|
|
558
|
+
code = code.replace('import { EuiAllModule } from \'@eui/components\';\n', '');
|
|
559
|
+
code = code.replace('import { NgModule } from \'@angular/core\';\n', '');
|
|
560
|
+
return code;
|
|
561
|
+
}
|
|
547
562
|
_getComponent(id) {
|
|
548
563
|
const flatLinks = flatten(this.asService.state.sidebarLinks);
|
|
549
564
|
return flatLinks.filter((item) => item.id === id)[0];
|
|
@@ -559,17 +574,19 @@ class DocSampleComponent {
|
|
|
559
574
|
}
|
|
560
575
|
}
|
|
561
576
|
}
|
|
562
|
-
/** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
563
|
-
/** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
564
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
577
|
+
/** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleComponent, deps: [{ token: i2$1.HttpClient }, { token: i2.UxAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
578
|
+
/** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass", renderPlayground: "renderPlayground" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n <div class=\"doc-sample-title__items\">\n <button euiButton\n [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent && renderPlayground\">\n <euiTabLabel>\n Playground\n <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <eui-playground [typescriptContent]=\"tsContent\"\n [htmlContent]=\"htmlContent\"\n [activated]=\"playground_activated\"></eui-playground>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: PlaygroundComponent, selector: "eui-playground", inputs: ["title", "htmlContent", "typescriptContent", "activated", "modules"] }] });
|
|
579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleComponent, decorators: [{
|
|
565
580
|
type: Component,
|
|
566
|
-
args: [{ selector: 'eui-showcase-doc-sample', template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n <div class=\"doc-sample-title__items\">\n <button euiButton\n [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{tsContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n <euiTabLabel>\n Playground\n <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <eui-playground [typescriptContent]=\"tsContent\"\n [htmlContent]=\"htmlContent\"\n [activated]=\"playground_activated\"></eui-playground>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"] }]
|
|
581
|
+
args: [{ selector: 'eui-showcase-doc-sample', template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n <div class=\"doc-sample-title__items\">\n <button euiButton\n [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent && renderPlayground\">\n <euiTabLabel>\n Playground\n <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <eui-playground [typescriptContent]=\"tsContent\"\n [htmlContent]=\"htmlContent\"\n [activated]=\"playground_activated\"></eui-playground>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"] }]
|
|
567
582
|
}], ctorParameters: function () { return [{ type: i2$1.HttpClient }, { type: i2.UxAppShellService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
|
568
583
|
type: Input
|
|
569
584
|
}], label: [{
|
|
570
585
|
type: Input
|
|
571
586
|
}], styleClass: [{
|
|
572
587
|
type: Input
|
|
588
|
+
}], renderPlayground: [{
|
|
589
|
+
type: Input
|
|
573
590
|
}] } });
|
|
574
591
|
|
|
575
592
|
class DocSectionComponent {
|
|
@@ -584,9 +601,9 @@ class DocSectionComponent {
|
|
|
584
601
|
}
|
|
585
602
|
}
|
|
586
603
|
}
|
|
587
|
-
/** @nocollapse */ DocSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
588
|
-
/** @nocollapse */ DocSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
604
|
+
/** @nocollapse */ DocSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
605
|
+
/** @nocollapse */ DocSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionComponent, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info mb-3\">{{label}}</h4>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl)}.doc-section-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}\n"] });
|
|
606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionComponent, decorators: [{
|
|
590
607
|
type: Component,
|
|
591
608
|
args: [{ selector: 'eui-showcase-doc-section', template: "<h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info mb-3\">{{label}}</h4>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl)}.doc-section-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}\n"] }]
|
|
592
609
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
@@ -608,9 +625,9 @@ class DocPageCodeComponent {
|
|
|
608
625
|
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
609
626
|
}
|
|
610
627
|
}
|
|
611
|
-
/** @nocollapse */ DocPageCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
612
|
-
/** @nocollapse */ DocPageCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
613
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
628
|
+
/** @nocollapse */ DocPageCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
629
|
+
/** @nocollapse */ DocPageCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass=\"eui-icon eui-icon-code\"></span>\n</button>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }] });
|
|
630
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeComponent, decorators: [{
|
|
614
631
|
type: Component,
|
|
615
632
|
args: [{ selector: 'eui-showcase-doc-page-code', template: "<button euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass=\"eui-icon eui-icon-code\"></span>\n</button>\n" }]
|
|
616
633
|
}], ctorParameters: function () { return []; }, propDecorators: { codeFolder: [{
|
|
@@ -646,6 +663,7 @@ class DocPageComponent {
|
|
|
646
663
|
setTimeout(() => {
|
|
647
664
|
this.asService.isBlockDocumentActive = true;
|
|
648
665
|
});
|
|
666
|
+
this.appMetadata = this.asService.state.appMetadata;
|
|
649
667
|
if (this.id && !this.label) {
|
|
650
668
|
this.label = this.id;
|
|
651
669
|
}
|
|
@@ -671,7 +689,6 @@ class DocPageComponent {
|
|
|
671
689
|
// construct cmp module import string
|
|
672
690
|
// eslint-disable-next-line
|
|
673
691
|
this.cmpModuleImport = `import { ${(_a = this.cmp.metadata) === null || _a === void 0 ? void 0 : _a.moduleName} } from '@eui/${(_b = this.cmp.metadata) === null || _b === void 0 ? void 0 : _b.subEntryName}';`;
|
|
674
|
-
console.log(this.cmpModuleImport);
|
|
675
692
|
}
|
|
676
693
|
}
|
|
677
694
|
catch (e) {
|
|
@@ -687,15 +704,10 @@ class DocPageComponent {
|
|
|
687
704
|
console.log(`Fetching API url from : ${this.apiUrl}`);
|
|
688
705
|
setTimeout(() => {
|
|
689
706
|
this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
|
|
690
|
-
// setTimeout(() => {
|
|
691
|
-
// const iFrame: HTMLIFrameElement = <HTMLIFrameElement>document.getElementById('iframe_api');
|
|
692
|
-
// console.log(iFrame);
|
|
693
|
-
// const iFrameContent = iFrame.contentWindow;
|
|
694
|
-
// console.log(iFrameContent);
|
|
695
|
-
// });
|
|
696
707
|
});
|
|
697
708
|
}
|
|
698
709
|
catch (e) {
|
|
710
|
+
console.log(e);
|
|
699
711
|
}
|
|
700
712
|
setTimeout(() => {
|
|
701
713
|
let tab = this.TABS_DEF.filter(t => t.id === this.fragmentId)[0];
|
|
@@ -726,7 +738,6 @@ class DocPageComponent {
|
|
|
726
738
|
this.isNavClicked = false;
|
|
727
739
|
}
|
|
728
740
|
_scrollToFragment(fragmentId, tabIndex, init, changeTab) {
|
|
729
|
-
// console.log(`Navigating to fragment: ${fragmentId} - tabIndex: ${tabIndex}`);
|
|
730
741
|
if (init) {
|
|
731
742
|
if (this.tabsContent) {
|
|
732
743
|
this.tabsContent.changeTab(tabIndex);
|
|
@@ -791,20 +802,12 @@ class DocPageComponent {
|
|
|
791
802
|
const name = pathNameArray[pathNameArray.length - 1];
|
|
792
803
|
let category = pathNameArray[pathNameArray.length - 2];
|
|
793
804
|
let protocolGen = protocol, hostGen = host;
|
|
794
|
-
let docTypeRoot;
|
|
795
805
|
if (host.indexOf('localhost') > -1) {
|
|
796
806
|
protocolGen = 'https:';
|
|
797
807
|
hostGen = 'euidev.ecdevops.eu';
|
|
798
808
|
}
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
}
|
|
802
|
-
else if (name.indexOf('eui-') > -1) {
|
|
803
|
-
docTypeRoot = 'eui-docs-eui-13.x';
|
|
804
|
-
}
|
|
805
|
-
else if (name.indexOf('ecl-') > -1) {
|
|
806
|
-
docTypeRoot = 'eui-docs-ecl-13.x';
|
|
807
|
-
}
|
|
809
|
+
const appVersionNumber = this.appMetadata.appVersion.split('.')[0];
|
|
810
|
+
const docTypeRoot = `eui-docs-eui-${appVersionNumber}.x`;
|
|
808
811
|
if (category === 'layout-components' || category === 'externals') {
|
|
809
812
|
category = 'components';
|
|
810
813
|
}
|
|
@@ -814,6 +817,7 @@ class DocPageComponent {
|
|
|
814
817
|
}
|
|
815
818
|
const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
|
|
816
819
|
const docPath = `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
|
|
820
|
+
console.log(`fetching API from: ${docPath}`);
|
|
817
821
|
return docPath;
|
|
818
822
|
}
|
|
819
823
|
_camelCaseString(string, separator, first) {
|
|
@@ -837,9 +841,9 @@ class DocPageComponent {
|
|
|
837
841
|
return result;
|
|
838
842
|
}
|
|
839
843
|
}
|
|
840
|
-
/** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
841
|
-
/** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return DocPageThemingContentDirective; }) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n <div class=\"doc-page-main-column\">\n <eui-page>\n <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'DEPRECATED'\" [euiDanger]=\"isLegacy\">\n <span euiLabel><strong>{{stateLabel}}</strong></span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-page-content>\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger>\n <p>\n This component will be <strong class=\"eui-u-color-danger\">removed</strong> in the next version of eUI !!\n </p>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>\n <!-- <div *ngIf=\"cmp.cmpReplacementUrl\">\n <br><br>\n You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a>\n </div> -->\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n This component will be <strong class=\"eui-u-color-danger\">discontinued in future version of eUI</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>\n <p>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n </p>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI, it is kept for <strong class=\"eui-u-color-warning\">historical usage only</strong>\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel>\n API\n </euiTabLabel>\n <euiTabContent>\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\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n A11Y\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h3>\n <ng-content select=\"docPageAccessibility\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n OPTIONS & SAMPLES\n </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <h3 class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Module import</h3>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br>\n </ng-container>\n\n <h3 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Overview & setup</h3>\n <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n <ng-template #noOverview>\n Coming soon...\n </ng-template>\n <br>\n\n <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2\">Options & samples</h3>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel>\n THEMING\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h3>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{pageInteractiveContent.first.title}}\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n {{pageInteractiveContent.first.subTitle}}\n </h3>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <h3 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h3>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n </eui-page-content>\n </eui-page>\n </div>\n\n <div *ngIf=\"isNavigationVisible\" class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n <div id=\"doc-page-nav\">\n <div class=\"doc-page-navigation-title\">In this page</div>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <!-- ALWAYS PRESENT in each page-->\n <!-- <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li> -->\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 0)\"><span>API</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 1)\"><span>A11Y</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 2)\"><span>OPTIONS & SAMPLES</span></li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 2)\"><span>{{sample.label}}</span></li>\n </ul>\n </li>\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 3)\"><span>THEMING</span></li>\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n <span>{{pageInteractiveContent.first.title}}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (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 class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></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 class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i3$1.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
842
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
844
|
+
/** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.UxAppShellService }, { token: i3$2.DomSanitizer }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
|
|
845
|
+
/** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return DocPageThemingContentDirective; }) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n <div class=\"doc-page-main-column\">\n <eui-page>\n <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'DEPRECATED'\" [euiDanger]=\"isLegacy\">\n <span euiLabel><strong>{{stateLabel}}</strong></span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-page-content>\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger>\n <p>\n This component will be <strong class=\"eui-u-color-danger\">removed</strong> in the next version of eUI !!\n </p>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>\n <!-- <div *ngIf=\"cmp.cmpReplacementUrl\">\n <br><br>\n You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a>\n </div> -->\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n This component will be <strong class=\"eui-u-color-danger\">discontinued in future version of eUI</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>\n <p>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n </p>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI, it is kept for <strong class=\"eui-u-color-warning\">historical usage only</strong>\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel>\n API\n </euiTabLabel>\n <euiTabContent>\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\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n A11Y\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h3>\n <ng-content select=\"docPageAccessibility\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n OPTIONS & SAMPLES\n </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <h3 class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Module import</h3>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br>\n </ng-container>\n\n <h3 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Overview & setup</h3>\n <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n <ng-template #noOverview>\n Coming soon...\n </ng-template>\n <br>\n\n <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2\">Options & samples</h3>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel>\n THEMING\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h3>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{pageInteractiveContent.first.title}}\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n {{pageInteractiveContent.first.subTitle}}\n </h3>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <h3 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h3>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n </eui-page-content>\n </eui-page>\n </div>\n\n <div *ngIf=\"isNavigationVisible\" class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n <div id=\"doc-page-nav\">\n <div class=\"doc-page-navigation-title\">In this page</div>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <!-- ALWAYS PRESENT in each page-->\n <!-- <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li> -->\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 0)\"><span>API</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 1)\"><span>A11Y</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 2)\"><span>OPTIONS & SAMPLES</span></li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 2)\"><span>{{sample.label}}</span></li>\n </ul>\n </li>\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 3)\"><span>THEMING</span></li>\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n <span>{{pageInteractiveContent.first.title}}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (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 class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></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 class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6$1.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6$1.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6$1.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6$1.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
846
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageComponent, decorators: [{
|
|
843
847
|
type: Component,
|
|
844
848
|
args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n <div class=\"doc-page-main-column\">\n <eui-page>\n <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'DEPRECATED'\" [euiDanger]=\"isLegacy\">\n <span euiLabel><strong>{{stateLabel}}</strong></span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-page-content>\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger>\n <p>\n This component will be <strong class=\"eui-u-color-danger\">removed</strong> in the next version of eUI !!\n </p>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>\n <!-- <div *ngIf=\"cmp.cmpReplacementUrl\">\n <br><br>\n You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a>\n </div> -->\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n This component will be <strong class=\"eui-u-color-danger\">discontinued in future version of eUI</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>\n <p>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n </p>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI, it is kept for <strong class=\"eui-u-color-warning\">historical usage only</strong>\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel>\n API\n </euiTabLabel>\n <euiTabContent>\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\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n A11Y\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h3>\n <ng-content select=\"docPageAccessibility\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n OPTIONS & SAMPLES\n </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <h3 class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Module import</h3>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br>\n </ng-container>\n\n <h3 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Overview & setup</h3>\n <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n <ng-template #noOverview>\n Coming soon...\n </ng-template>\n <br>\n\n <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2\">Options & samples</h3>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel>\n THEMING\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h3>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{pageInteractiveContent.first.title}}\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n {{pageInteractiveContent.first.subTitle}}\n </h3>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <h3 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h3>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n </eui-page-content>\n </eui-page>\n </div>\n\n <div *ngIf=\"isNavigationVisible\" class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n <div id=\"doc-page-nav\">\n <div class=\"doc-page-navigation-title\">In this page</div>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <!-- ALWAYS PRESENT in each page-->\n <!-- <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li> -->\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 0)\"><span>API</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 1)\"><span>A11Y</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 2)\"><span>OPTIONS & SAMPLES</span></li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 2)\"><span>{{sample.label}}</span></li>\n </ul>\n </li>\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 3)\"><span>THEMING</span></li>\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n <span>{{pageInteractiveContent.first.title}}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (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 class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></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 class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"] }]
|
|
845
849
|
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.UxAppShellService }, { type: i3$2.DomSanitizer }, { type: i4.Location }]; }, propDecorators: { id: [{
|
|
@@ -894,9 +898,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
894
898
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
895
899
|
class DocPageOverviewContentDirective {
|
|
896
900
|
}
|
|
897
|
-
/** @nocollapse */ DocPageOverviewContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
898
|
-
/** @nocollapse */ DocPageOverviewContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
899
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
901
|
+
/** @nocollapse */ DocPageOverviewContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
902
|
+
/** @nocollapse */ DocPageOverviewContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i0 });
|
|
903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
|
|
900
904
|
type: Directive,
|
|
901
905
|
args: [{ selector: 'docPageOverview' }]
|
|
902
906
|
}] });
|
|
@@ -906,9 +910,9 @@ class DocPageInteractiveContentDirective {
|
|
|
906
910
|
this.subTitle = 'Advanced use cases';
|
|
907
911
|
}
|
|
908
912
|
}
|
|
909
|
-
/** @nocollapse */ DocPageInteractiveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
910
|
-
/** @nocollapse */ DocPageInteractiveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
911
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
913
|
+
/** @nocollapse */ DocPageInteractiveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
914
|
+
/** @nocollapse */ DocPageInteractiveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 });
|
|
915
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
|
|
912
916
|
type: Directive,
|
|
913
917
|
args: [{ selector: 'docPageInteractive' }]
|
|
914
918
|
}], propDecorators: { title: [{
|
|
@@ -918,41 +922,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
918
922
|
}] } });
|
|
919
923
|
class DocPageSamplesContentDirective {
|
|
920
924
|
}
|
|
921
|
-
/** @nocollapse */ DocPageSamplesContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
922
|
-
/** @nocollapse */ DocPageSamplesContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
923
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
925
|
+
/** @nocollapse */ DocPageSamplesContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
926
|
+
/** @nocollapse */ DocPageSamplesContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i0 });
|
|
927
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
|
|
924
928
|
type: Directive,
|
|
925
929
|
args: [{ selector: 'docPageSamples' }]
|
|
926
930
|
}] });
|
|
927
931
|
class DocPageSectionsContentDirective {
|
|
928
932
|
}
|
|
929
|
-
/** @nocollapse */ DocPageSectionsContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
930
|
-
/** @nocollapse */ DocPageSectionsContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
931
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
933
|
+
/** @nocollapse */ DocPageSectionsContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
934
|
+
/** @nocollapse */ DocPageSectionsContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i0 });
|
|
935
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
|
|
932
936
|
type: Directive,
|
|
933
937
|
args: [{ selector: 'docPageSections' }]
|
|
934
938
|
}] });
|
|
935
939
|
class DocPageAccessibilityContentDirective {
|
|
936
940
|
}
|
|
937
|
-
/** @nocollapse */ DocPageAccessibilityContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
938
|
-
/** @nocollapse */ DocPageAccessibilityContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
941
|
+
/** @nocollapse */ DocPageAccessibilityContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
942
|
+
/** @nocollapse */ DocPageAccessibilityContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i0 });
|
|
943
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
|
|
940
944
|
type: Directive,
|
|
941
945
|
args: [{ selector: 'docPageAccessibility' }]
|
|
942
946
|
}] });
|
|
943
947
|
class DocPageApiContentDirective {
|
|
944
948
|
}
|
|
945
|
-
/** @nocollapse */ DocPageApiContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
946
|
-
/** @nocollapse */ DocPageApiContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
947
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
949
|
+
/** @nocollapse */ DocPageApiContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
950
|
+
/** @nocollapse */ DocPageApiContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageApiContentDirective, selector: "docPageApi", ngImport: i0 });
|
|
951
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
|
|
948
952
|
type: Directive,
|
|
949
953
|
args: [{ selector: 'docPageApi' }]
|
|
950
954
|
}] });
|
|
951
955
|
class DocPageThemingContentDirective {
|
|
952
956
|
}
|
|
953
|
-
/** @nocollapse */ DocPageThemingContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
954
|
-
/** @nocollapse */ DocPageThemingContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
955
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
957
|
+
/** @nocollapse */ DocPageThemingContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
958
|
+
/** @nocollapse */ DocPageThemingContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i0 });
|
|
959
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
|
|
956
960
|
type: Directive,
|
|
957
961
|
args: [{ selector: 'docPageTheming' }]
|
|
958
962
|
}] });
|
|
@@ -960,9 +964,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
960
964
|
class DocSampleApiComponent {
|
|
961
965
|
constructor() { }
|
|
962
966
|
}
|
|
963
|
-
/** @nocollapse */ DocSampleApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
964
|
-
/** @nocollapse */ DocSampleApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
965
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
967
|
+
/** @nocollapse */ DocSampleApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
968
|
+
/** @nocollapse */ DocSampleApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" });
|
|
969
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleApiComponent, decorators: [{
|
|
966
970
|
type: Component,
|
|
967
971
|
args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
|
|
968
972
|
}], ctorParameters: function () { return []; } });
|
|
@@ -979,9 +983,9 @@ class DocSectionCodeComponent {
|
|
|
979
983
|
return object;
|
|
980
984
|
}
|
|
981
985
|
}
|
|
982
|
-
/** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
983
|
-
/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
984
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
986
|
+
/** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
987
|
+
/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeComponent, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDescriptionTagDirective; }), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeHtmlTagDirective; }), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeTsTagDirective; }), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeServiceTagDirective; }), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeCssTagDirective; }), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDocTagDirective; }), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{styleClass}}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated\">\n {{label}}\n </div>\n <div class=\"ml-auto\">\n <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{versionLabel}}</span>\n <button euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n <euiTabLabel>Service</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n <euiTabLabel>CSS</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n <euiTabLabel>\n DOC\n <euiTabSubLabel>Documentation</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
|
|
988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
|
|
985
989
|
type: Component,
|
|
986
990
|
args: [{ selector: 'eui-showcase-doc-section-code', template: "<h5 class=\"section-title {{styleClass}}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated\">\n {{label}}\n </div>\n <div class=\"ml-auto\">\n <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{versionLabel}}</span>\n <button euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n <euiTabLabel>Service</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n <euiTabLabel>CSS</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n <euiTabLabel>\n DOC\n <euiTabSubLabel>Documentation</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"] }]
|
|
987
991
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
@@ -1018,49 +1022,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
1018
1022
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1019
1023
|
class DocSectionCodeDescriptionTagDirective {
|
|
1020
1024
|
}
|
|
1021
|
-
/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1022
|
-
/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1023
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1025
|
+
/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1026
|
+
/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i0 });
|
|
1027
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
|
|
1024
1028
|
type: Directive,
|
|
1025
1029
|
args: [{ selector: 'sectionDescription' }]
|
|
1026
1030
|
}] });
|
|
1027
1031
|
class DocSectionCodeHtmlTagDirective {
|
|
1028
1032
|
}
|
|
1029
|
-
/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1030
|
-
/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1031
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1033
|
+
/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1034
|
+
/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i0 });
|
|
1035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
|
|
1032
1036
|
type: Directive,
|
|
1033
1037
|
args: [{ selector: 'sectionCodeHTML' }]
|
|
1034
1038
|
}] });
|
|
1035
1039
|
class DocSectionCodeTsTagDirective {
|
|
1036
1040
|
}
|
|
1037
|
-
/** @nocollapse */ DocSectionCodeTsTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1038
|
-
/** @nocollapse */ DocSectionCodeTsTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1039
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1041
|
+
/** @nocollapse */ DocSectionCodeTsTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1042
|
+
/** @nocollapse */ DocSectionCodeTsTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i0 });
|
|
1043
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
|
|
1040
1044
|
type: Directive,
|
|
1041
1045
|
args: [{ selector: 'sectionCodeTS' }]
|
|
1042
1046
|
}] });
|
|
1043
1047
|
class DocSectionCodeServiceTagDirective {
|
|
1044
1048
|
}
|
|
1045
|
-
/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1046
|
-
/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1047
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1049
|
+
/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1050
|
+
/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i0 });
|
|
1051
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
|
|
1048
1052
|
type: Directive,
|
|
1049
1053
|
args: [{ selector: 'sectionCodeSERVICE' }]
|
|
1050
1054
|
}] });
|
|
1051
1055
|
class DocSectionCodeCssTagDirective {
|
|
1052
1056
|
}
|
|
1053
|
-
/** @nocollapse */ DocSectionCodeCssTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1054
|
-
/** @nocollapse */ DocSectionCodeCssTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1055
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1057
|
+
/** @nocollapse */ DocSectionCodeCssTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1058
|
+
/** @nocollapse */ DocSectionCodeCssTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i0 });
|
|
1059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
|
|
1056
1060
|
type: Directive,
|
|
1057
1061
|
args: [{ selector: 'sectionCodeCSS' }]
|
|
1058
1062
|
}] });
|
|
1059
1063
|
class DocSectionCodeDocTagDirective {
|
|
1060
1064
|
}
|
|
1061
|
-
/** @nocollapse */ DocSectionCodeDocTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1062
|
-
/** @nocollapse */ DocSectionCodeDocTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1063
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1065
|
+
/** @nocollapse */ DocSectionCodeDocTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1066
|
+
/** @nocollapse */ DocSectionCodeDocTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i0 });
|
|
1067
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
|
|
1064
1068
|
type: Directive,
|
|
1065
1069
|
args: [{ selector: 'sectionCodeDOC' }]
|
|
1066
1070
|
}] });
|
|
@@ -1083,9 +1087,9 @@ class DocPageCodeFabComponent {
|
|
|
1083
1087
|
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
1084
1088
|
}
|
|
1085
1089
|
}
|
|
1086
|
-
/** @nocollapse */ DocPageCodeFabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1087
|
-
/** @nocollapse */ DocPageCodeFabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
1088
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1090
|
+
/** @nocollapse */ DocPageCodeFabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeFabComponent, deps: [{ token: i2.UxAppShellService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1091
|
+
/** @nocollapse */ DocPageCodeFabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<div class=\"eui-button-fixed\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-button--accent\">\n <span class=\"eui-icon eui-icon-code\" (click)=\"toggleCode()\"></span>\n </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\">\n <button euiButton euiAccent (click)=\"onOpenCode()\">\n <span class=\"eui-icon eui-icon-code\"></span> VIEW SOURCE\n </button>\n <br>\n <br>\n <ng-content></ng-content>\n <br>\n <p>Use the <kbd>View source</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i3$3.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "width", "height", "acceptLabel", "dismissLabel", "typeClass", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "isClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "open", "close", "dismiss", "accept"] }] });
|
|
1092
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
|
|
1089
1093
|
type: Component,
|
|
1090
1094
|
args: [{ selector: 'eui-showcase-doc-page-code-fab', template: "<div class=\"eui-button-fixed\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-button--accent\">\n <span class=\"eui-icon eui-icon-code\" (click)=\"toggleCode()\"></span>\n </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\">\n <button euiButton euiAccent (click)=\"onOpenCode()\">\n <span class=\"eui-icon eui-icon-code\"></span> VIEW SOURCE\n </button>\n <br>\n <br>\n <ng-content></ng-content>\n <br>\n <p>Use the <kbd>View source</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n" }]
|
|
1091
1095
|
}], ctorParameters: function () { return [{ type: i2.UxAppShellService }]; }, propDecorators: { codeFolder: [{
|
|
@@ -1102,9 +1106,9 @@ class LoremIpsumSampleComponent {
|
|
|
1102
1106
|
this.textSize = 'large';
|
|
1103
1107
|
}
|
|
1104
1108
|
}
|
|
1105
|
-
/** @nocollapse */ LoremIpsumSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1106
|
-
/** @nocollapse */ LoremIpsumSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: LoremIpsumSampleComponent, 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.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </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.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est.\n Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt.\n Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n <div class=\"mb-3\">\n Maecenas at dui nec enim accumsan hendrerit eu et sapien.\n Praesent posuere tellus feugiat suscipit consectetur.\n Sed volutpat arcu laoreet, egestas massa venenatis, sagittis nulla.\n Praesent fermentum nulla at nulla iaculis feugiat in ac dolor.\n Vestibulum vitae nibh a purus viverra sodales.\n </div>\n <div class=\"mb-3\">\n Aenean fringilla quam at fermentum finibus.\n Fusce tempor nisl ut dictum facilisis.\n Phasellus id risus in quam convallis pretium.\n Phasellus malesuada leo eu dui vehicula tristique.\n </div>\n <div class=\"mb-3\">\n Suspendisse sagittis lacus eu erat ornare congue.\n In malesuada nunc a risus volutpat eleifend.\n Aenean hendrerit sapien vel lorem consectetur, et viverra nisi vulputate.\n Etiam finibus felis vel rutrum tristique.\n </div>\n <div class=\"mb-3\">\n Nulla at felis eget diam rutrum feugiat id vitae dui.\n Phasellus sit amet orci pharetra, sodales justo a, sagittis turpis.\n Sed vitae massa molestie nulla tincidunt molestie.\n Nullam bibendum libero rutrum bibendum ullamcorper.\n </div>\n <div class=\"mb-3\">\n Etiam eget lorem ornare, facilisis ipsum non, varius diam.\n Nulla eget metus sodales dui placerat sagittis.\n Nulla blandit tortor a dictum sollicitudin.\n </div>\n <div class=\"mb-3\">\n Nunc non dolor sollicitudin, tristique sem sed, vestibulum diam.\n Vivamus sollicitudin dui et velit auctor, dignissim egestas metus eleifend.\n Sed tincidunt dui laoreet sagittis tincidunt.\n Donec in eros feugiat, auctor lectus eget, pulvinar massa.\n Aliquam eget nunc aliquet, molestie risus ut, iaculis magna.\n </div>\n <div class=\"mb-3\">\n Mauris bibendum lorem a sem tristique commodo.\n Duis vitae magna non dui cursus rhoncus nec ac neque.\n </div>\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n<div class=\"eui-u-font-size-xs eui-u-color-info\"><end of content> — This last line must always be visible.</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1109
|
+
/** @nocollapse */ LoremIpsumSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1110
|
+
/** @nocollapse */ LoremIpsumSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: LoremIpsumSampleComponent, 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.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </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.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est.\n Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt.\n Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n <div class=\"mb-3\">\n Maecenas at dui nec enim accumsan hendrerit eu et sapien.\n Praesent posuere tellus feugiat suscipit consectetur.\n Sed volutpat arcu laoreet, egestas massa venenatis, sagittis nulla.\n Praesent fermentum nulla at nulla iaculis feugiat in ac dolor.\n Vestibulum vitae nibh a purus viverra sodales.\n </div>\n <div class=\"mb-3\">\n Aenean fringilla quam at fermentum finibus.\n Fusce tempor nisl ut dictum facilisis.\n Phasellus id risus in quam convallis pretium.\n Phasellus malesuada leo eu dui vehicula tristique.\n </div>\n <div class=\"mb-3\">\n Suspendisse sagittis lacus eu erat ornare congue.\n In malesuada nunc a risus volutpat eleifend.\n Aenean hendrerit sapien vel lorem consectetur, et viverra nisi vulputate.\n Etiam finibus felis vel rutrum tristique.\n </div>\n <div class=\"mb-3\">\n Nulla at felis eget diam rutrum feugiat id vitae dui.\n Phasellus sit amet orci pharetra, sodales justo a, sagittis turpis.\n Sed vitae massa molestie nulla tincidunt molestie.\n Nullam bibendum libero rutrum bibendum ullamcorper.\n </div>\n <div class=\"mb-3\">\n Etiam eget lorem ornare, facilisis ipsum non, varius diam.\n Nulla eget metus sodales dui placerat sagittis.\n Nulla blandit tortor a dictum sollicitudin.\n </div>\n <div class=\"mb-3\">\n Nunc non dolor sollicitudin, tristique sem sed, vestibulum diam.\n Vivamus sollicitudin dui et velit auctor, dignissim egestas metus eleifend.\n Sed tincidunt dui laoreet sagittis tincidunt.\n Donec in eros feugiat, auctor lectus eget, pulvinar massa.\n Aliquam eget nunc aliquet, molestie risus ut, iaculis magna.\n </div>\n <div class=\"mb-3\">\n Mauris bibendum lorem a sem tristique commodo.\n Duis vitae magna non dui cursus rhoncus nec ac neque.\n </div>\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n<div class=\"eui-u-font-size-xs eui-u-color-info\"><end of content> — This last line must always be visible.</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
|
|
1108
1112
|
type: Component,
|
|
1109
1113
|
args: [{ selector: 'eui-showcase-doc-lorem-ipsum', template: "<div *ngIf=\"textSize === 'small'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </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.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est.\n Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt.\n Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n <div class=\"mb-3\">\n Maecenas at dui nec enim accumsan hendrerit eu et sapien.\n Praesent posuere tellus feugiat suscipit consectetur.\n Sed volutpat arcu laoreet, egestas massa venenatis, sagittis nulla.\n Praesent fermentum nulla at nulla iaculis feugiat in ac dolor.\n Vestibulum vitae nibh a purus viverra sodales.\n </div>\n <div class=\"mb-3\">\n Aenean fringilla quam at fermentum finibus.\n Fusce tempor nisl ut dictum facilisis.\n Phasellus id risus in quam convallis pretium.\n Phasellus malesuada leo eu dui vehicula tristique.\n </div>\n <div class=\"mb-3\">\n Suspendisse sagittis lacus eu erat ornare congue.\n In malesuada nunc a risus volutpat eleifend.\n Aenean hendrerit sapien vel lorem consectetur, et viverra nisi vulputate.\n Etiam finibus felis vel rutrum tristique.\n </div>\n <div class=\"mb-3\">\n Nulla at felis eget diam rutrum feugiat id vitae dui.\n Phasellus sit amet orci pharetra, sodales justo a, sagittis turpis.\n Sed vitae massa molestie nulla tincidunt molestie.\n Nullam bibendum libero rutrum bibendum ullamcorper.\n </div>\n <div class=\"mb-3\">\n Etiam eget lorem ornare, facilisis ipsum non, varius diam.\n Nulla eget metus sodales dui placerat sagittis.\n Nulla blandit tortor a dictum sollicitudin.\n </div>\n <div class=\"mb-3\">\n Nunc non dolor sollicitudin, tristique sem sed, vestibulum diam.\n Vivamus sollicitudin dui et velit auctor, dignissim egestas metus eleifend.\n Sed tincidunt dui laoreet sagittis tincidunt.\n Donec in eros feugiat, auctor lectus eget, pulvinar massa.\n Aliquam eget nunc aliquet, molestie risus ut, iaculis magna.\n </div>\n <div class=\"mb-3\">\n Mauris bibendum lorem a sem tristique commodo.\n Duis vitae magna non dui cursus rhoncus nec ac neque.\n </div>\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n<div class=\"eui-u-font-size-xs eui-u-color-info\"><end of content> — This last line must always be visible.</div>\n" }]
|
|
1110
1114
|
}], propDecorators: { textSize: [{
|
|
@@ -1114,24 +1118,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
1114
1118
|
/* eslint-disable */
|
|
1115
1119
|
class DocPagePatternSampleDirective {
|
|
1116
1120
|
}
|
|
1117
|
-
/** @nocollapse */ DocPagePatternSampleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1118
|
-
/** @nocollapse */ DocPagePatternSampleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1121
|
+
/** @nocollapse */ DocPagePatternSampleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1122
|
+
/** @nocollapse */ DocPagePatternSampleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i0 });
|
|
1123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
|
|
1120
1124
|
type: Directive,
|
|
1121
1125
|
args: [{ selector: 'docPagePatternSample' }]
|
|
1122
1126
|
}] });
|
|
1123
1127
|
class DocPagePatternDocDirective {
|
|
1124
1128
|
}
|
|
1125
|
-
/** @nocollapse */ DocPagePatternDocDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1126
|
-
/** @nocollapse */ DocPagePatternDocDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1129
|
+
/** @nocollapse */ DocPagePatternDocDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1130
|
+
/** @nocollapse */ DocPagePatternDocDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i0 });
|
|
1131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
|
|
1128
1132
|
type: Directive,
|
|
1129
1133
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
1130
1134
|
}] });
|
|
1131
1135
|
class DocPagePatternComponent extends BaseDirective {
|
|
1132
|
-
constructor() {
|
|
1136
|
+
constructor(sanitizer) {
|
|
1133
1137
|
super();
|
|
1134
|
-
this.
|
|
1138
|
+
this.sanitizer = sanitizer;
|
|
1139
|
+
this.docEntries = [];
|
|
1135
1140
|
this.dos = [];
|
|
1136
1141
|
this.donts = [];
|
|
1137
1142
|
}
|
|
@@ -1140,13 +1145,19 @@ class DocPagePatternComponent extends BaseDirective {
|
|
|
1140
1145
|
super.getCssClasses('doc-page-pattern'),
|
|
1141
1146
|
].join(' ').trim();
|
|
1142
1147
|
}
|
|
1148
|
+
ngOnInit() {
|
|
1149
|
+
if (this.figmaEmbedSrc) {
|
|
1150
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
|
|
1151
|
+
const iFrame = document.getElementById('iframe-figma');
|
|
1152
|
+
}
|
|
1153
|
+
}
|
|
1143
1154
|
}
|
|
1144
|
-
/** @nocollapse */ DocPagePatternComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1145
|
-
/** @nocollapse */ DocPagePatternComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", anatomyRefs: "anatomyRefs", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternSampleDirective; }), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternDocDirective; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<eui-tabs>\n <eui-tab>\n <euiTabLabel>\n Usage and documentation\n </euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n <h3>Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <h3 class=\"mt-5\">Anatomy</h3>\n <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n\n <ng-container *ngIf=\"anatomyRefs.length !== 0\">\n <h3 class=\"mt-5\">Ananomy references</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of anatomyRefs\">\n <td><eui-badge>{{ref.id}}</eui-badge></td>\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-success-100\">Do's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of dos\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"donts.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-danger-100\">Dont's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of donts\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <!-- v15 TEMP just for testing\n <iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"650\"\n src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FjQ9htWvSM8SWTPuk3hoigc%2FeUI-Desktop-Patterns%3Fnode-id%3D734%253A12516\" allowfullscreen></iframe> -->\n\n <h3 class=\"mt-5\">Figma resource</h3>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img width=\"32\" height=\"32\" alt=\"Figma Logo\" src=\"data:image/png;base64,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\">\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a class=\"h5 eui-u-text-link-external\" href=\"https://www.figma.com/file/E2mR8Kd0cmoVkiwpRUzHJL/{{figmaUrl}}\" target=\"blank\"><span class=\"eui-u-color-grey-75\">Layout component /</span> {{label}}</a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>\n Pattern sample\n </euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n</eui-tabs>\n\n<eui-showcase-doc-page-code-fab codeFolder=\"{{sourceUrl}}\"></eui-showcase-doc-page-code-fab>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:1.5rem;background-color:#f0f0f0}.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%;background-color:var(--eui-app-main-bg-color)}.doc-page-pattern .eui-tabs .eui-tabs__items{background-color:#f0f0f0}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:#fff}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:1rem}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%;background-color:var(--eui-app-main-bg-color)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i2$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["avatarUrl", "expandLabel", "collapseLabel", "iconClass", "avatarDerscription", "iconDescription", "isHeaderBodyOnly", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i2$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i2$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i3$1.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i4$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1146
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1155
|
+
/** @nocollapse */ DocPagePatternComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternComponent, deps: [{ token: i3$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1156
|
+
/** @nocollapse */ DocPagePatternComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternComponent, 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: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternSampleDirective; }), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternDocDirective; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<eui-tabs>\n <eui-tab>\n <euiTabLabel>\n Usage and documentation\n </euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n <h3>Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"mt-5\">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=\"mt-5\">Anatomy</h3>\n <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n </ng-container>\n </ng-template>\n\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"mt-5\">Design system references</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of docEntries\">\n <td><eui-badge>{{ref.id}}</eui-badge></td>\n <td><strong>{{ref.name}}</strong></td>\n <td>\n <div class=\"mb-2\"><strong>Description</strong></div>\n <div class=\"mb-3\">{{ref.description}}</div>\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <div class=\"mb-2\"><strong class=\"eui-u-color-success\">Do's</strong></div>\n <ul><li *ngFor=\"let do of ref.dos\">{{do}}</li></ul>\n </ng-container>\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <div class=\"mb-2\"><strong class=\"eui-u-color-danger\">Dont's</strong></div>\n <ul><li *ngFor=\"let dont of ref.donts\">{{dont}}</li></ul>\n </ng-container>\n <ng-container *ngIf=\"ref.whenToUse\">\n <div><strong class=\"eui-u-color-primary\">When to use</strong></div>\n <div class=\"mb-2\">{{ref.whenToUse}}</div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <div><strong class=\"eui-u-color-warning\">When not to use</strong></div>\n <div class=\"mb-2\">{{ref.whenNotToUse}}</div>\n </ng-container>\n </td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-success-100\">Do's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of dos\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"donts.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-danger-100\">Dont's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of donts\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <h3 class=\"mt-5\">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 width=\"32\" height=\"32\" alt=\"Figma Logo\" src=\"data:image/png;base64,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\">\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a class=\"h5 eui-u-text-link-external\" href=\"https://www.figma.com/file/E2mR8Kd0cmoVkiwpRUzHJL/{{figmaUrl}}\" target=\"blank\"><span class=\"eui-u-color-grey-75\">Layout component /</span> {{label}}</a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>\n Pattern sample\n </euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n</eui-tabs>\n\n<eui-showcase-doc-page-code-fab codeFolder=\"{{sourceUrl}}\"></eui-showcase-doc-page-code-fab>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:1.5rem;background-color:#f0f0f0}.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%;background-color:var(--eui-app-main-bg-color)}.doc-page-pattern .eui-tabs .eui-tabs__items{background-color:#f0f0f0}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:#fff}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:1rem}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%;background-color:var(--eui-app-main-bg-color)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["avatarUrl", "expandLabel", "collapseLabel", "iconClass", "avatarDerscription", "iconDescription", "isHeaderBodyOnly", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternComponent, decorators: [{
|
|
1147
1158
|
type: Component,
|
|
1148
|
-
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, template: "<eui-tabs>\n <eui-tab>\n <euiTabLabel>\n Usage and documentation\n </euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n <h3>Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <h3 class=\"mt-5\">
|
|
1149
|
-
}], ctorParameters: function () { return []; }, propDecorators: { cssClasses: [{
|
|
1159
|
+
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, template: "<eui-tabs>\n <eui-tab>\n <euiTabLabel>\n Usage and documentation\n </euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n <h3>Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"mt-5\">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=\"mt-5\">Anatomy</h3>\n <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n </ng-container>\n </ng-template>\n\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"mt-5\">Design system references</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of docEntries\">\n <td><eui-badge>{{ref.id}}</eui-badge></td>\n <td><strong>{{ref.name}}</strong></td>\n <td>\n <div class=\"mb-2\"><strong>Description</strong></div>\n <div class=\"mb-3\">{{ref.description}}</div>\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <div class=\"mb-2\"><strong class=\"eui-u-color-success\">Do's</strong></div>\n <ul><li *ngFor=\"let do of ref.dos\">{{do}}</li></ul>\n </ng-container>\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <div class=\"mb-2\"><strong class=\"eui-u-color-danger\">Dont's</strong></div>\n <ul><li *ngFor=\"let dont of ref.donts\">{{dont}}</li></ul>\n </ng-container>\n <ng-container *ngIf=\"ref.whenToUse\">\n <div><strong class=\"eui-u-color-primary\">When to use</strong></div>\n <div class=\"mb-2\">{{ref.whenToUse}}</div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <div><strong class=\"eui-u-color-warning\">When not to use</strong></div>\n <div class=\"mb-2\">{{ref.whenNotToUse}}</div>\n </ng-container>\n </td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-success-100\">Do's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of dos\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"donts.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-danger-100\">Dont's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of donts\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <h3 class=\"mt-5\">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 width=\"32\" height=\"32\" alt=\"Figma Logo\" src=\"data:image/png;base64,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\">\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a class=\"h5 eui-u-text-link-external\" href=\"https://www.figma.com/file/E2mR8Kd0cmoVkiwpRUzHJL/{{figmaUrl}}\" target=\"blank\"><span class=\"eui-u-color-grey-75\">Layout component /</span> {{label}}</a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>\n Pattern sample\n </euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n</eui-tabs>\n\n<eui-showcase-doc-page-code-fab codeFolder=\"{{sourceUrl}}\"></eui-showcase-doc-page-code-fab>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:1.5rem;background-color:#f0f0f0}.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%;background-color:var(--eui-app-main-bg-color)}.doc-page-pattern .eui-tabs .eui-tabs__items{background-color:#f0f0f0}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:#fff}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:1rem}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%;background-color:var(--eui-app-main-bg-color)}\n"] }]
|
|
1160
|
+
}], ctorParameters: function () { return [{ type: i3$2.DomSanitizer }]; }, propDecorators: { cssClasses: [{
|
|
1150
1161
|
type: HostBinding,
|
|
1151
1162
|
args: ['class']
|
|
1152
1163
|
}], sampleContent: [{
|
|
@@ -1161,7 +1172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
1161
1172
|
type: Input
|
|
1162
1173
|
}], anatomyImage: [{
|
|
1163
1174
|
type: Input
|
|
1164
|
-
}],
|
|
1175
|
+
}], docEntries: [{
|
|
1165
1176
|
type: Input
|
|
1166
1177
|
}], dos: [{
|
|
1167
1178
|
type: Input
|
|
@@ -1171,6 +1182,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
1171
1182
|
type: Input
|
|
1172
1183
|
}], figmaUrl: [{
|
|
1173
1184
|
type: Input
|
|
1185
|
+
}], figmaEmbedSrc: [{
|
|
1186
|
+
type: Input
|
|
1174
1187
|
}] } });
|
|
1175
1188
|
|
|
1176
1189
|
const COMPONENTS = [
|
|
@@ -1203,8 +1216,8 @@ const COMPONENTS = [
|
|
|
1203
1216
|
];
|
|
1204
1217
|
class EuiShowcaseModule {
|
|
1205
1218
|
}
|
|
1206
|
-
/** @nocollapse */ EuiShowcaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1207
|
-
/** @nocollapse */ EuiShowcaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0
|
|
1219
|
+
/** @nocollapse */ EuiShowcaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1220
|
+
/** @nocollapse */ EuiShowcaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
|
|
1208
1221
|
DocPageComponent,
|
|
1209
1222
|
DocPageCodeComponent,
|
|
1210
1223
|
DocPageCodeFabComponent,
|
|
@@ -1264,7 +1277,7 @@ class EuiShowcaseModule {
|
|
|
1264
1277
|
DocPagePatternComponent,
|
|
1265
1278
|
DocPagePatternDocDirective,
|
|
1266
1279
|
DocPagePatternSampleDirective] });
|
|
1267
|
-
/** @nocollapse */ EuiShowcaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0
|
|
1280
|
+
/** @nocollapse */ EuiShowcaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, imports: [CommonModule,
|
|
1268
1281
|
EuiCardModule,
|
|
1269
1282
|
EuiButtonModule,
|
|
1270
1283
|
EuiTabsModule,
|
|
@@ -1274,7 +1287,7 @@ class EuiShowcaseModule {
|
|
|
1274
1287
|
EuiAlertModule,
|
|
1275
1288
|
EuiBlockContentModule,
|
|
1276
1289
|
EuiBadgeModule] });
|
|
1277
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, decorators: [{
|
|
1278
1291
|
type: NgModule,
|
|
1279
1292
|
args: [{
|
|
1280
1293
|
declarations: [...COMPONENTS],
|