@eui/showcase 15.0.0-rc.1 → 15.0.0-rc.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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 +28 -18
- package/esm2020/lib/components/doc-sample/doc-sample.component.mjs +19 -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 +119 -109
- package/fesm2015/eui-showcase.mjs.map +1 -1
- package/fesm2020/eui-showcase.mjs +119 -109
- 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 +7 -2
- 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 +6 -0
- package/lib/components/doc-sample/doc-sample.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]'
|
|
@@ -431,9 +431,9 @@ class PlaygroundComponent {
|
|
|
431
431
|
return `import { BrowserModule } from '@angular/platform-browser';\n${contents}`;
|
|
432
432
|
}
|
|
433
433
|
}
|
|
434
|
-
/** @nocollapse */ PlaygroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
435
|
-
/** @nocollapse */ PlaygroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
434
|
+
/** @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 });
|
|
435
|
+
/** @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"] }] });
|
|
436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: PlaygroundComponent, decorators: [{
|
|
437
437
|
type: Component,
|
|
438
438
|
args: [{ selector: 'eui-playground', template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz\"></iframe>\n</eui-block-content>\n" }]
|
|
439
439
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.UxAppShellService }, { type: i2$1.HttpClient }]; }, propDecorators: { title: [{
|
|
@@ -547,6 +547,20 @@ class DocSampleComponent {
|
|
|
547
547
|
onSelectedTab(selected) {
|
|
548
548
|
this.playground_activated = selected.index === 2;
|
|
549
549
|
}
|
|
550
|
+
/**
|
|
551
|
+
* filter out the extra import and module from the code sample
|
|
552
|
+
*
|
|
553
|
+
* @param code
|
|
554
|
+
*/
|
|
555
|
+
filterOutModuleAndImports(code) {
|
|
556
|
+
// filter out module
|
|
557
|
+
const moduleRegex = /@NgModule\(([\s\S]*?)\)\nexport class \w+ \{([\s\S]*?)\}/g;
|
|
558
|
+
code = code.replace(moduleRegex, '');
|
|
559
|
+
// filter out extra imports
|
|
560
|
+
code = code.replace('import { EuiAllModule } from \'@eui/components\';\n', '');
|
|
561
|
+
code = code.replace('import { NgModule } from \'@angular/core\';\n', '');
|
|
562
|
+
return code;
|
|
563
|
+
}
|
|
550
564
|
_getComponent(id) {
|
|
551
565
|
const flatLinks = flatten(this.asService.state.sidebarLinks);
|
|
552
566
|
return flatLinks.filter((item) => item.id === id)[0];
|
|
@@ -562,11 +576,11 @@ class DocSampleComponent {
|
|
|
562
576
|
}
|
|
563
577
|
}
|
|
564
578
|
}
|
|
565
|
-
/** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
566
|
-
/** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
567
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
579
|
+
/** @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 });
|
|
580
|
+
/** @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" }, 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\">\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"] }] });
|
|
581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleComponent, decorators: [{
|
|
568
582
|
type: Component,
|
|
569
|
-
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"] }]
|
|
583
|
+
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\">\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"] }]
|
|
570
584
|
}], ctorParameters: function () { return [{ type: i2$1.HttpClient }, { type: i2.UxAppShellService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
|
|
571
585
|
type: Input
|
|
572
586
|
}], label: [{
|
|
@@ -587,9 +601,9 @@ class DocSectionComponent {
|
|
|
587
601
|
}
|
|
588
602
|
}
|
|
589
603
|
}
|
|
590
|
-
/** @nocollapse */ DocSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
591
|
-
/** @nocollapse */ DocSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
592
|
-
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: [{
|
|
593
607
|
type: Component,
|
|
594
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"] }]
|
|
595
609
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
@@ -611,9 +625,9 @@ class DocPageCodeComponent {
|
|
|
611
625
|
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
612
626
|
}
|
|
613
627
|
}
|
|
614
|
-
/** @nocollapse */ DocPageCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
615
|
-
/** @nocollapse */ DocPageCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
616
|
-
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: [{
|
|
617
631
|
type: Component,
|
|
618
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" }]
|
|
619
633
|
}], ctorParameters: function () { return []; }, propDecorators: { codeFolder: [{
|
|
@@ -648,6 +662,7 @@ class DocPageComponent {
|
|
|
648
662
|
setTimeout(() => {
|
|
649
663
|
this.asService.isBlockDocumentActive = true;
|
|
650
664
|
});
|
|
665
|
+
this.appMetadata = this.asService.state.appMetadata;
|
|
651
666
|
if (this.id && !this.label) {
|
|
652
667
|
this.label = this.id;
|
|
653
668
|
}
|
|
@@ -673,7 +688,6 @@ class DocPageComponent {
|
|
|
673
688
|
// construct cmp module import string
|
|
674
689
|
// eslint-disable-next-line
|
|
675
690
|
this.cmpModuleImport = `import { ${this.cmp.metadata?.moduleName} } from '@eui/${this.cmp.metadata?.subEntryName}';`;
|
|
676
|
-
console.log(this.cmpModuleImport);
|
|
677
691
|
}
|
|
678
692
|
}
|
|
679
693
|
catch (e) {
|
|
@@ -689,15 +703,10 @@ class DocPageComponent {
|
|
|
689
703
|
console.log(`Fetching API url from : ${this.apiUrl}`);
|
|
690
704
|
setTimeout(() => {
|
|
691
705
|
this.apiUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl);
|
|
692
|
-
// setTimeout(() => {
|
|
693
|
-
// const iFrame: HTMLIFrameElement = <HTMLIFrameElement>document.getElementById('iframe_api');
|
|
694
|
-
// console.log(iFrame);
|
|
695
|
-
// const iFrameContent = iFrame.contentWindow;
|
|
696
|
-
// console.log(iFrameContent);
|
|
697
|
-
// });
|
|
698
706
|
});
|
|
699
707
|
}
|
|
700
708
|
catch (e) {
|
|
709
|
+
console.log(e);
|
|
701
710
|
}
|
|
702
711
|
setTimeout(() => {
|
|
703
712
|
let tab = this.TABS_DEF.filter(t => t.id === this.fragmentId)[0];
|
|
@@ -728,7 +737,6 @@ class DocPageComponent {
|
|
|
728
737
|
this.isNavClicked = false;
|
|
729
738
|
}
|
|
730
739
|
_scrollToFragment(fragmentId, tabIndex, init, changeTab) {
|
|
731
|
-
// console.log(`Navigating to fragment: ${fragmentId} - tabIndex: ${tabIndex}`);
|
|
732
740
|
if (init) {
|
|
733
741
|
if (this.tabsContent) {
|
|
734
742
|
this.tabsContent.changeTab(tabIndex);
|
|
@@ -793,20 +801,12 @@ class DocPageComponent {
|
|
|
793
801
|
const name = pathNameArray[pathNameArray.length - 1];
|
|
794
802
|
let category = pathNameArray[pathNameArray.length - 2];
|
|
795
803
|
let protocolGen = protocol, hostGen = host;
|
|
796
|
-
let docTypeRoot;
|
|
797
804
|
if (host.indexOf('localhost') > -1) {
|
|
798
805
|
protocolGen = 'https:';
|
|
799
806
|
hostGen = 'euidev.ecdevops.eu';
|
|
800
807
|
}
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
}
|
|
804
|
-
else if (name.indexOf('eui-') > -1) {
|
|
805
|
-
docTypeRoot = 'eui-docs-eui-13.x';
|
|
806
|
-
}
|
|
807
|
-
else if (name.indexOf('ecl-') > -1) {
|
|
808
|
-
docTypeRoot = 'eui-docs-ecl-13.x';
|
|
809
|
-
}
|
|
808
|
+
const appVersionNumber = this.appMetadata.appVersion.split('.')[0];
|
|
809
|
+
const docTypeRoot = `eui-docs-eui-${appVersionNumber}.x`;
|
|
810
810
|
if (category === 'layout-components' || category === 'externals') {
|
|
811
811
|
category = 'components';
|
|
812
812
|
}
|
|
@@ -816,6 +816,7 @@ class DocPageComponent {
|
|
|
816
816
|
}
|
|
817
817
|
const formattedName = this._camelCaseString(name + '-' + category.slice(0, -1), '-', true);
|
|
818
818
|
const docPath = `${protocolGen}//${hostGen}/${docTypeRoot}/${category}/${formattedName}.html`;
|
|
819
|
+
console.log(`fetching API from: ${docPath}`);
|
|
819
820
|
return docPath;
|
|
820
821
|
}
|
|
821
822
|
_camelCaseString(string, separator, first) {
|
|
@@ -839,9 +840,9 @@ class DocPageComponent {
|
|
|
839
840
|
return result;
|
|
840
841
|
}
|
|
841
842
|
}
|
|
842
|
-
/** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
843
|
-
/** @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 });
|
|
844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
843
|
+
/** @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 });
|
|
844
|
+
/** @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 });
|
|
845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageComponent, decorators: [{
|
|
845
846
|
type: Component,
|
|
846
847
|
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"] }]
|
|
847
848
|
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.UxAppShellService }, { type: i3$2.DomSanitizer }, { type: i4.Location }]; }, propDecorators: { id: [{
|
|
@@ -896,9 +897,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
896
897
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
897
898
|
class DocPageOverviewContentDirective {
|
|
898
899
|
}
|
|
899
|
-
/** @nocollapse */ DocPageOverviewContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
900
|
-
/** @nocollapse */ DocPageOverviewContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
900
|
+
/** @nocollapse */ DocPageOverviewContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
901
|
+
/** @nocollapse */ DocPageOverviewContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i0 });
|
|
902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
|
|
902
903
|
type: Directive,
|
|
903
904
|
args: [{ selector: 'docPageOverview' }]
|
|
904
905
|
}] });
|
|
@@ -908,9 +909,9 @@ class DocPageInteractiveContentDirective {
|
|
|
908
909
|
this.subTitle = 'Advanced use cases';
|
|
909
910
|
}
|
|
910
911
|
}
|
|
911
|
-
/** @nocollapse */ DocPageInteractiveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
912
|
-
/** @nocollapse */ DocPageInteractiveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
912
|
+
/** @nocollapse */ DocPageInteractiveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
913
|
+
/** @nocollapse */ DocPageInteractiveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 });
|
|
914
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
|
|
914
915
|
type: Directive,
|
|
915
916
|
args: [{ selector: 'docPageInteractive' }]
|
|
916
917
|
}], propDecorators: { title: [{
|
|
@@ -920,41 +921,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
920
921
|
}] } });
|
|
921
922
|
class DocPageSamplesContentDirective {
|
|
922
923
|
}
|
|
923
|
-
/** @nocollapse */ DocPageSamplesContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
924
|
-
/** @nocollapse */ DocPageSamplesContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
925
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
924
|
+
/** @nocollapse */ DocPageSamplesContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
925
|
+
/** @nocollapse */ DocPageSamplesContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i0 });
|
|
926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
|
|
926
927
|
type: Directive,
|
|
927
928
|
args: [{ selector: 'docPageSamples' }]
|
|
928
929
|
}] });
|
|
929
930
|
class DocPageSectionsContentDirective {
|
|
930
931
|
}
|
|
931
|
-
/** @nocollapse */ DocPageSectionsContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
932
|
-
/** @nocollapse */ DocPageSectionsContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
933
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
932
|
+
/** @nocollapse */ DocPageSectionsContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
933
|
+
/** @nocollapse */ DocPageSectionsContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i0 });
|
|
934
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
|
|
934
935
|
type: Directive,
|
|
935
936
|
args: [{ selector: 'docPageSections' }]
|
|
936
937
|
}] });
|
|
937
938
|
class DocPageAccessibilityContentDirective {
|
|
938
939
|
}
|
|
939
|
-
/** @nocollapse */ DocPageAccessibilityContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
940
|
-
/** @nocollapse */ DocPageAccessibilityContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
941
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
940
|
+
/** @nocollapse */ DocPageAccessibilityContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
941
|
+
/** @nocollapse */ DocPageAccessibilityContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i0 });
|
|
942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
|
|
942
943
|
type: Directive,
|
|
943
944
|
args: [{ selector: 'docPageAccessibility' }]
|
|
944
945
|
}] });
|
|
945
946
|
class DocPageApiContentDirective {
|
|
946
947
|
}
|
|
947
|
-
/** @nocollapse */ DocPageApiContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
948
|
-
/** @nocollapse */ DocPageApiContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
949
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
948
|
+
/** @nocollapse */ DocPageApiContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
949
|
+
/** @nocollapse */ DocPageApiContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageApiContentDirective, selector: "docPageApi", ngImport: i0 });
|
|
950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
|
|
950
951
|
type: Directive,
|
|
951
952
|
args: [{ selector: 'docPageApi' }]
|
|
952
953
|
}] });
|
|
953
954
|
class DocPageThemingContentDirective {
|
|
954
955
|
}
|
|
955
|
-
/** @nocollapse */ DocPageThemingContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
956
|
-
/** @nocollapse */ DocPageThemingContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
957
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
956
|
+
/** @nocollapse */ DocPageThemingContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
957
|
+
/** @nocollapse */ DocPageThemingContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i0 });
|
|
958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
|
|
958
959
|
type: Directive,
|
|
959
960
|
args: [{ selector: 'docPageTheming' }]
|
|
960
961
|
}] });
|
|
@@ -962,9 +963,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
962
963
|
class DocSampleApiComponent {
|
|
963
964
|
constructor() { }
|
|
964
965
|
}
|
|
965
|
-
/** @nocollapse */ DocSampleApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
966
|
-
/** @nocollapse */ DocSampleApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
967
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
966
|
+
/** @nocollapse */ DocSampleApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
967
|
+
/** @nocollapse */ DocSampleApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" });
|
|
968
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleApiComponent, decorators: [{
|
|
968
969
|
type: Component,
|
|
969
970
|
args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
|
|
970
971
|
}], ctorParameters: function () { return []; } });
|
|
@@ -981,9 +982,9 @@ class DocSectionCodeComponent {
|
|
|
981
982
|
return object;
|
|
982
983
|
}
|
|
983
984
|
}
|
|
984
|
-
/** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
985
|
-
/** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
985
|
+
/** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
986
|
+
/** @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]" }] });
|
|
987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
|
|
987
988
|
type: Component,
|
|
988
989
|
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"] }]
|
|
989
990
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
@@ -1020,49 +1021,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
1020
1021
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1021
1022
|
class DocSectionCodeDescriptionTagDirective {
|
|
1022
1023
|
}
|
|
1023
|
-
/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1024
|
-
/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1025
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1024
|
+
/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1025
|
+
/** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i0 });
|
|
1026
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
|
|
1026
1027
|
type: Directive,
|
|
1027
1028
|
args: [{ selector: 'sectionDescription' }]
|
|
1028
1029
|
}] });
|
|
1029
1030
|
class DocSectionCodeHtmlTagDirective {
|
|
1030
1031
|
}
|
|
1031
|
-
/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1032
|
-
/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1033
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1032
|
+
/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1033
|
+
/** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i0 });
|
|
1034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
|
|
1034
1035
|
type: Directive,
|
|
1035
1036
|
args: [{ selector: 'sectionCodeHTML' }]
|
|
1036
1037
|
}] });
|
|
1037
1038
|
class DocSectionCodeTsTagDirective {
|
|
1038
1039
|
}
|
|
1039
|
-
/** @nocollapse */ DocSectionCodeTsTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1040
|
-
/** @nocollapse */ DocSectionCodeTsTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1040
|
+
/** @nocollapse */ DocSectionCodeTsTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1041
|
+
/** @nocollapse */ DocSectionCodeTsTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i0 });
|
|
1042
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
|
|
1042
1043
|
type: Directive,
|
|
1043
1044
|
args: [{ selector: 'sectionCodeTS' }]
|
|
1044
1045
|
}] });
|
|
1045
1046
|
class DocSectionCodeServiceTagDirective {
|
|
1046
1047
|
}
|
|
1047
|
-
/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1048
|
-
/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1048
|
+
/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1049
|
+
/** @nocollapse */ DocSectionCodeServiceTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i0 });
|
|
1050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
|
|
1050
1051
|
type: Directive,
|
|
1051
1052
|
args: [{ selector: 'sectionCodeSERVICE' }]
|
|
1052
1053
|
}] });
|
|
1053
1054
|
class DocSectionCodeCssTagDirective {
|
|
1054
1055
|
}
|
|
1055
|
-
/** @nocollapse */ DocSectionCodeCssTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1056
|
-
/** @nocollapse */ DocSectionCodeCssTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1057
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1056
|
+
/** @nocollapse */ DocSectionCodeCssTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1057
|
+
/** @nocollapse */ DocSectionCodeCssTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i0 });
|
|
1058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
|
|
1058
1059
|
type: Directive,
|
|
1059
1060
|
args: [{ selector: 'sectionCodeCSS' }]
|
|
1060
1061
|
}] });
|
|
1061
1062
|
class DocSectionCodeDocTagDirective {
|
|
1062
1063
|
}
|
|
1063
|
-
/** @nocollapse */ DocSectionCodeDocTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1064
|
-
/** @nocollapse */ DocSectionCodeDocTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1065
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1064
|
+
/** @nocollapse */ DocSectionCodeDocTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1065
|
+
/** @nocollapse */ DocSectionCodeDocTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i0 });
|
|
1066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
|
|
1066
1067
|
type: Directive,
|
|
1067
1068
|
args: [{ selector: 'sectionCodeDOC' }]
|
|
1068
1069
|
}] });
|
|
@@ -1085,9 +1086,9 @@ class DocPageCodeFabComponent {
|
|
|
1085
1086
|
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
1086
1087
|
}
|
|
1087
1088
|
}
|
|
1088
|
-
/** @nocollapse */ DocPageCodeFabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1089
|
-
/** @nocollapse */ DocPageCodeFabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
1090
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1089
|
+
/** @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 });
|
|
1090
|
+
/** @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"] }] });
|
|
1091
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
|
|
1091
1092
|
type: Component,
|
|
1092
1093
|
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" }]
|
|
1093
1094
|
}], ctorParameters: function () { return [{ type: i2.UxAppShellService }]; }, propDecorators: { codeFolder: [{
|
|
@@ -1104,9 +1105,9 @@ class LoremIpsumSampleComponent {
|
|
|
1104
1105
|
this.textSize = 'large';
|
|
1105
1106
|
}
|
|
1106
1107
|
}
|
|
1107
|
-
/** @nocollapse */ LoremIpsumSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1108
|
-
/** @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"] }] });
|
|
1109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1108
|
+
/** @nocollapse */ LoremIpsumSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1109
|
+
/** @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"] }] });
|
|
1110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
|
|
1110
1111
|
type: Component,
|
|
1111
1112
|
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" }]
|
|
1112
1113
|
}], propDecorators: { textSize: [{
|
|
@@ -1116,23 +1117,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
1116
1117
|
/* eslint-disable */
|
|
1117
1118
|
class DocPagePatternSampleDirective {
|
|
1118
1119
|
}
|
|
1119
|
-
/** @nocollapse */ DocPagePatternSampleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1120
|
-
/** @nocollapse */ DocPagePatternSampleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1120
|
+
/** @nocollapse */ DocPagePatternSampleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1121
|
+
/** @nocollapse */ DocPagePatternSampleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i0 });
|
|
1122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
|
|
1122
1123
|
type: Directive,
|
|
1123
1124
|
args: [{ selector: 'docPagePatternSample' }]
|
|
1124
1125
|
}] });
|
|
1125
1126
|
class DocPagePatternDocDirective {
|
|
1126
1127
|
}
|
|
1127
|
-
/** @nocollapse */ DocPagePatternDocDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1128
|
-
/** @nocollapse */ DocPagePatternDocDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0
|
|
1129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1128
|
+
/** @nocollapse */ DocPagePatternDocDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1129
|
+
/** @nocollapse */ DocPagePatternDocDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i0 });
|
|
1130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
|
|
1130
1131
|
type: Directive,
|
|
1131
1132
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
1132
1133
|
}] });
|
|
1133
1134
|
class DocPagePatternComponent extends BaseDirective {
|
|
1134
|
-
constructor() {
|
|
1135
|
+
constructor(sanitizer) {
|
|
1135
1136
|
super();
|
|
1137
|
+
this.sanitizer = sanitizer;
|
|
1136
1138
|
this.anatomyRefs = [];
|
|
1137
1139
|
this.dos = [];
|
|
1138
1140
|
this.donts = [];
|
|
@@ -1142,13 +1144,19 @@ class DocPagePatternComponent extends BaseDirective {
|
|
|
1142
1144
|
super.getCssClasses('doc-page-pattern'),
|
|
1143
1145
|
].join(' ').trim();
|
|
1144
1146
|
}
|
|
1147
|
+
ngOnInit() {
|
|
1148
|
+
if (this.figmaEmbedSrc) {
|
|
1149
|
+
this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
|
|
1150
|
+
const iFrame = document.getElementById('iframe-figma');
|
|
1151
|
+
}
|
|
1152
|
+
}
|
|
1145
1153
|
}
|
|
1146
|
-
/** @nocollapse */ DocPagePatternComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1147
|
-
/** @nocollapse */ DocPagePatternComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0
|
|
1148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1154
|
+
/** @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 });
|
|
1155
|
+
/** @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", anatomyRefs: "anatomyRefs", 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 <h3 class=\"mt-5\">Anatomy</h3>\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\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 <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n </ng-template>\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 <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,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\">\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a 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: 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 });
|
|
1156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternComponent, decorators: [{
|
|
1149
1157
|
type: Component,
|
|
1150
|
-
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\">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
|
|
1151
|
-
}], ctorParameters: function () { return []; }, propDecorators: { cssClasses: [{
|
|
1158
|
+
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\">Anatomy</h3>\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\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 <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n </ng-template>\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 <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,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\">\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a 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"] }]
|
|
1159
|
+
}], ctorParameters: function () { return [{ type: i3$2.DomSanitizer }]; }, propDecorators: { cssClasses: [{
|
|
1152
1160
|
type: HostBinding,
|
|
1153
1161
|
args: ['class']
|
|
1154
1162
|
}], sampleContent: [{
|
|
@@ -1173,6 +1181,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
|
|
|
1173
1181
|
type: Input
|
|
1174
1182
|
}], figmaUrl: [{
|
|
1175
1183
|
type: Input
|
|
1184
|
+
}], figmaEmbedSrc: [{
|
|
1185
|
+
type: Input
|
|
1176
1186
|
}] } });
|
|
1177
1187
|
|
|
1178
1188
|
const COMPONENTS = [
|
|
@@ -1205,8 +1215,8 @@ const COMPONENTS = [
|
|
|
1205
1215
|
];
|
|
1206
1216
|
class EuiShowcaseModule {
|
|
1207
1217
|
}
|
|
1208
|
-
/** @nocollapse */ EuiShowcaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0
|
|
1209
|
-
/** @nocollapse */ EuiShowcaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0
|
|
1218
|
+
/** @nocollapse */ EuiShowcaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1219
|
+
/** @nocollapse */ EuiShowcaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
|
|
1210
1220
|
DocPageComponent,
|
|
1211
1221
|
DocPageCodeComponent,
|
|
1212
1222
|
DocPageCodeFabComponent,
|
|
@@ -1266,7 +1276,7 @@ class EuiShowcaseModule {
|
|
|
1266
1276
|
DocPagePatternComponent,
|
|
1267
1277
|
DocPagePatternDocDirective,
|
|
1268
1278
|
DocPagePatternSampleDirective] });
|
|
1269
|
-
/** @nocollapse */ EuiShowcaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0
|
|
1279
|
+
/** @nocollapse */ EuiShowcaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, imports: [CommonModule,
|
|
1270
1280
|
EuiCardModule,
|
|
1271
1281
|
EuiButtonModule,
|
|
1272
1282
|
EuiTabsModule,
|
|
@@ -1276,7 +1286,7 @@ class EuiShowcaseModule {
|
|
|
1276
1286
|
EuiAlertModule,
|
|
1277
1287
|
EuiBlockContentModule,
|
|
1278
1288
|
EuiBadgeModule] });
|
|
1279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0
|
|
1289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, decorators: [{
|
|
1280
1290
|
type: NgModule,
|
|
1281
1291
|
args: [{
|
|
1282
1292
|
declarations: [...COMPONENTS],
|