@eui/showcase 17.0.0-next.6 → 17.0.0-next.8
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/esm2022/lib/components/doc-page/doc-page.component.mjs +26 -26
- package/esm2022/lib/components/doc-page-code/doc-page-code.component.mjs +3 -3
- package/esm2022/lib/components/doc-page-code-fab/doc-page-code-fab.component.mjs +5 -5
- package/esm2022/lib/components/doc-page-pattern/doc-page-pattern.component.mjs +11 -11
- package/esm2022/lib/components/doc-sample/doc-sample.component.mjs +7 -5
- package/esm2022/lib/components/doc-sample-api/doc-sample-api.component.mjs +3 -3
- package/esm2022/lib/components/doc-section/doc-section.component.mjs +3 -3
- package/esm2022/lib/components/doc-section-code/doc-section-code.component.mjs +22 -22
- package/esm2022/lib/components/eui-code-highlighter/eui-code-highlighter.component.mjs +4 -4
- package/esm2022/lib/components/lorem-ipsum/lorem-ipsum-sample.component.mjs +3 -3
- package/esm2022/lib/components/playground/playground.component.mjs +5 -5
- package/esm2022/lib/eui-showcase.module.mjs +4 -4
- package/fesm2022/eui-showcase.mjs +90 -88
- package/fesm2022/eui-showcase.mjs.map +1 -1
- package/lib/components/doc-sample/doc-sample.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -43,15 +43,15 @@ class EuiCodeHighlighterDirective {
|
|
|
43
43
|
window['Prism'].highlightElement(this.el.nativeElement);
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
47
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
46
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
47
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i0 }); }
|
|
48
48
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
|
|
50
50
|
type: Directive,
|
|
51
51
|
args: [{
|
|
52
52
|
selector: '[euiCode]',
|
|
53
53
|
}]
|
|
54
|
-
}], ctorParameters:
|
|
54
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
55
55
|
|
|
56
56
|
const polyfillsFile = `import 'zone.js/dist/zone';`;
|
|
57
57
|
const mainFile = (moduleName) => `
|
|
@@ -432,13 +432,13 @@ class PlaygroundComponent {
|
|
|
432
432
|
// appends import of BrowserModule
|
|
433
433
|
return `import { BrowserModule } from '@angular/platform-browser';\n${contents}`;
|
|
434
434
|
}
|
|
435
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
436
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
435
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: PlaygroundComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.EuiAppShellService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
436
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", 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"] }] }); }
|
|
437
437
|
}
|
|
438
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
438
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: PlaygroundComponent, decorators: [{
|
|
439
439
|
type: Component,
|
|
440
440
|
args: [{ selector: 'eui-playground', template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz\"></iframe>\n</eui-block-content>\n" }]
|
|
441
|
-
}], ctorParameters:
|
|
441
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.EuiAppShellService }, { type: i2$1.HttpClient }], propDecorators: { title: [{
|
|
442
442
|
type: Input
|
|
443
443
|
}], htmlContent: [{
|
|
444
444
|
type: Input
|
|
@@ -578,7 +578,9 @@ class DocSampleComponent {
|
|
|
578
578
|
const moduleRegex = /@NgModule\(([\s\S]*?)\)\nexport class \w+ \{([\s\S]*?)\}/g;
|
|
579
579
|
code = code.replace(moduleRegex, '');
|
|
580
580
|
// filter out extra imports
|
|
581
|
+
// eslint-disable-next-line
|
|
581
582
|
code = code.replace("import { EuiAllModule } from '@eui/components';\n", '');
|
|
583
|
+
// eslint-disable-next-line
|
|
582
584
|
code = code.replace("import { NgModule } from '@angular/core';\n", '');
|
|
583
585
|
return code;
|
|
584
586
|
}
|
|
@@ -598,13 +600,13 @@ class DocSampleComponent {
|
|
|
598
600
|
], [])
|
|
599
601
|
: [];
|
|
600
602
|
}
|
|
601
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
602
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
603
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSampleComponent, deps: [{ token: i2$1.HttpClient }, { token: i2.EuiAppShellService }, { token: i0.ChangeDetectorRef }, { token: i2.EuiGrowlService }, { token: i3$1.Clipboard }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
604
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass", renderPlayground: "renderPlayground" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\">\n <strong>{{ label }}</strong>\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)=\"copyCurrentUrlToClipboard(id)\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"link\" set=\"outline\" size=\"l\" fillColor=\"grey-75\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"doc-sample-title__items\">\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onToggleCode()\"\n [isLoading]=\"isCodeLoading\"\n [euiDisabled]=\"isCodeLoading\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent && renderPlayground\">\n <euiTabLabel>\n Playground\n <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <eui-playground\n [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: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.eui-showcase-doc-sample .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)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;font-size:var(--eui-base-font-size-xl);min-height:var(--eui-base-spacing-xl);width:100%}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-base-spacing-m)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i7.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i5.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i5.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i9.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i10.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i9$1.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: PlaygroundComponent, selector: "eui-playground", inputs: ["title", "htmlContent", "typescriptContent", "activated", "modules"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
603
605
|
}
|
|
604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSampleComponent, decorators: [{
|
|
605
607
|
type: Component,
|
|
606
608
|
args: [{ selector: 'eui-showcase-doc-sample', encapsulation: ViewEncapsulation.None, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\">\n <strong>{{ label }}</strong>\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)=\"copyCurrentUrlToClipboard(id)\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"link\" set=\"outline\" size=\"l\" fillColor=\"grey-75\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"doc-sample-title__items\">\n <button\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onToggleCode()\"\n [isLoading]=\"isCodeLoading\"\n [euiDisabled]=\"isCodeLoading\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent && renderPlayground\">\n <euiTabLabel>\n Playground\n <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <eui-playground\n [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: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.eui-showcase-doc-sample .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)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;font-size:var(--eui-base-font-size-xl);min-height:var(--eui-base-spacing-xl);width:100%}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-base-spacing-m)}\n"] }]
|
|
607
|
-
}], ctorParameters:
|
|
609
|
+
}], ctorParameters: () => [{ type: i2$1.HttpClient }, { type: i2.EuiAppShellService }, { type: i0.ChangeDetectorRef }, { type: i2.EuiGrowlService }, { type: i3$1.Clipboard }, { type: i1.Router }], propDecorators: { id: [{
|
|
608
610
|
type: Input
|
|
609
611
|
}], label: [{
|
|
610
612
|
type: Input
|
|
@@ -628,10 +630,10 @@ class DocSectionComponent {
|
|
|
628
630
|
this.label = this.id;
|
|
629
631
|
}
|
|
630
632
|
}
|
|
631
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
632
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
633
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
634
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", 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 eui-u-text-h4 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"] }); }
|
|
633
635
|
}
|
|
634
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
636
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionComponent, decorators: [{
|
|
635
637
|
type: Component,
|
|
636
638
|
args: [{ selector: 'eui-showcase-doc-section', template: "<h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3\">{{ label }}</h4>\n\n<ng-content></ng-content>\n", styles: [":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"] }]
|
|
637
639
|
}], propDecorators: { id: [{
|
|
@@ -652,10 +654,10 @@ class DocPageCodeComponent {
|
|
|
652
654
|
const sourceRootPath = `https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/app-eui-showcase-${this.showcase}/browse/src/app/`;
|
|
653
655
|
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
654
656
|
}
|
|
655
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
656
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
657
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
658
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass=\"eui-icon eui-icon-code\"></span>\n</button>\n", dependencies: [{ kind: "component", type: i7.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i9$1.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] }); }
|
|
657
659
|
}
|
|
658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageCodeComponent, decorators: [{
|
|
659
661
|
type: Component,
|
|
660
662
|
args: [{ selector: 'eui-showcase-doc-page-code', template: "<button type=\"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" }]
|
|
661
663
|
}], propDecorators: { codeFolder: [{
|
|
@@ -881,13 +883,13 @@ class DocPageComponent {
|
|
|
881
883
|
}
|
|
882
884
|
return result;
|
|
883
885
|
}
|
|
884
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
885
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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", hasApi: "hasApi", hasA11y: "hasA11y" }, 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\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiWarning]=\"stateLabel === 'DEPRECATED - will be removed in eUI 18'\"\n [euiDanger]=\"isLegacy\">\n <span euiLabel>\n <strong>{{ stateLabel }}</strong>\n </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 <strong class=\"eui-u-color-danger\">This component will be removed in eUI 18 release (end of 2023)</strong>\n </p>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n <!-- <div *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 <strong class=\"eui-u-color-danger\"> This component will be removed in eUI 18 release (end of 2023)</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\n <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,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo>\n <p>\n This component is\n <strong class=\"eui-u-color-info\">NOT READY</strong>\n </p>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelect)=\"onTabSelected($event)\">\n <eui-tab *ngIf=\"hasApi\">\n <euiTabLabel> API </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 *ngIf=\"hasA11y\">\n <euiTabLabel> A11Y </euiTabLabel>\n <euiTabContent>\n <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2 eui-u-text-h3\">Accessibility</h3>\n <ng-content select=\"docPageAccessibility\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel> OPTIONS & SAMPLES </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 eui-u-text-h3\">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 eui-u-text-h3\">Overview & setup</h3>\n <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n <ng-template #noOverview> Coming soon... </ng-template>\n <br />\n\n <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2 eui-u-text-h3\">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> THEMING </euiTabLabel>\n <euiTabContent>\n <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2 eui-u-text-h3\">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 eui-u-text-h3\">\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 eui-u-text-h3\">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\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 0)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 1)\">\n <span>A11Y</span>\n </li>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 2)\">\n <span>OPTIONS & SAMPLES</span>\n </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\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 2)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </li>\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n </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-5)}.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-35)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);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: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i5.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: i9.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: "component", type: i9$1.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
886
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.EuiAppShellService }, { token: i3$3.DomSanitizer }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
887
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", 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", hasApi: "hasApi", hasA11y: "hasA11y" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<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\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiWarning]=\"stateLabel === 'DEPRECATED - will be removed in eUI 18'\"\n [euiDanger]=\"isLegacy\">\n <span euiLabel>\n <strong>{{ stateLabel }}</strong>\n </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 <strong class=\"eui-u-color-danger\">This component will be removed in eUI 18 release (end of 2023)</strong>\n </p>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n <!-- <div *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 <strong class=\"eui-u-color-danger\"> This component will be removed in eUI 18 release (end of 2023)</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\n <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,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo>\n <p>\n This component is\n <strong class=\"eui-u-color-info\">NOT READY</strong>\n </p>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelect)=\"onTabSelected($event)\">\n <eui-tab *ngIf=\"hasApi\">\n <euiTabLabel> API </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 *ngIf=\"hasA11y\">\n <euiTabLabel> A11Y </euiTabLabel>\n <euiTabContent>\n <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2 eui-u-text-h3\">Accessibility</h3>\n <ng-content select=\"docPageAccessibility\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel> OPTIONS & SAMPLES </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 eui-u-text-h3\">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 eui-u-text-h3\">Overview & setup</h3>\n <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n <ng-template #noOverview> Coming soon... </ng-template>\n <br />\n\n <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2 eui-u-text-h3\">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> THEMING </euiTabLabel>\n <euiTabContent>\n <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2 eui-u-text-h3\">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 eui-u-text-h3\">\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 eui-u-text-h3\">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\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 0)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 1)\">\n <span>A11Y</span>\n </li>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 2)\">\n <span>OPTIONS & SAMPLES</span>\n </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\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 2)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </li>\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n </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-5)}.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-35)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);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: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i5.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", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i9.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: "component", type: i9$1.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
886
888
|
}
|
|
887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageComponent, decorators: [{
|
|
888
890
|
type: Component,
|
|
889
891
|
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\n *ngIf=\"codeFolder\"\n codeFolder=\"{{ codeFolder }}\"\n showcase=\"{{ showcase }}\"></eui-showcase-doc-page-code>\n <eui-chip\n *ngIf=\"stateLabel\"\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiWarning]=\"stateLabel === 'DEPRECATED - will be removed in eUI 18'\"\n [euiDanger]=\"isLegacy\">\n <span euiLabel>\n <strong>{{ stateLabel }}</strong>\n </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 <strong class=\"eui-u-color-danger\">This component will be removed in eUI 18 release (end of 2023)</strong>\n </p>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n <!-- <div *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 <strong class=\"eui-u-color-danger\"> This component will be removed in eUI 18 release (end of 2023)</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\n <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,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 18 release (end of 2023)</strong>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'NOT_READY' || isNotReady\" euiInfo>\n <p>\n This component is\n <strong class=\"eui-u-color-info\">NOT READY</strong>\n </p>\n <div *ngIf=\"cmp\">\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelect)=\"onTabSelected($event)\">\n <eui-tab *ngIf=\"hasApi\">\n <euiTabLabel> API </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 *ngIf=\"hasA11y\">\n <euiTabLabel> A11Y </euiTabLabel>\n <euiTabContent>\n <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2 eui-u-text-h3\">Accessibility</h3>\n <ng-content select=\"docPageAccessibility\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel> OPTIONS & SAMPLES </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 eui-u-text-h3\">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 eui-u-text-h3\">Overview & setup</h3>\n <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n <ng-template #noOverview> Coming soon... </ng-template>\n <br />\n\n <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2 eui-u-text-h3\">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> THEMING </euiTabLabel>\n <euiTabContent>\n <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2 eui-u-text-h3\">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 eui-u-text-h3\">\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 eui-u-text-h3\">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\n *ngIf=\"hasApi\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onNavClick('api', 0)\">\n <span>API</span>\n </li>\n <li\n *ngIf=\"hasA11y\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onNavClick('a11y', 1)\">\n <span>A11Y</span>\n </li>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onNavClick('samples', 2)\">\n <span>OPTIONS & SAMPLES</span>\n </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\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\"\n (click)=\"onNavClick(sample.id, 2)\">\n <span>{{ sample.label }}</span>\n </li>\n </ul>\n </li>\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li\n *ngIf=\"pageThemingContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li\n *ngIf=\"pageInteractiveContent.length > 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 3)\">\n <span>{{ pageInteractiveContent.first.title }}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n <li\n *ngIf=\"sections.length === 0\"\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\"\n (click)=\"onNavClick(section.id, null)\">\n <span>{{ section.label }}</span>\n </li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n </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-5)}.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-35)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);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"] }]
|
|
890
|
-
}], ctorParameters:
|
|
892
|
+
}], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.EuiAppShellService }, { type: i3$3.DomSanitizer }, { type: i4.Location }], propDecorators: { id: [{
|
|
891
893
|
type: Input
|
|
892
894
|
}], label: [{
|
|
893
895
|
type: Input
|
|
@@ -942,10 +944,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4",
|
|
|
942
944
|
}] } });
|
|
943
945
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
944
946
|
class DocPageOverviewContentDirective {
|
|
945
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
946
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
947
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
948
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i0 }); }
|
|
947
949
|
}
|
|
948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
|
|
949
951
|
type: Directive,
|
|
950
952
|
args: [{ selector: 'docPageOverview' }]
|
|
951
953
|
}] });
|
|
@@ -954,10 +956,10 @@ class DocPageInteractiveContentDirective {
|
|
|
954
956
|
this.title = 'ADVANCED EXAMPLES';
|
|
955
957
|
this.subTitle = 'Advanced use cases';
|
|
956
958
|
}
|
|
957
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
958
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
959
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
960
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 }); }
|
|
959
961
|
}
|
|
960
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
962
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
|
|
961
963
|
type: Directive,
|
|
962
964
|
args: [{ selector: 'docPageInteractive' }]
|
|
963
965
|
}], propDecorators: { title: [{
|
|
@@ -966,51 +968,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4",
|
|
|
966
968
|
type: Input
|
|
967
969
|
}] } });
|
|
968
970
|
class DocPageSamplesContentDirective {
|
|
969
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
970
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
971
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
972
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i0 }); }
|
|
971
973
|
}
|
|
972
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
|
|
973
975
|
type: Directive,
|
|
974
976
|
args: [{ selector: 'docPageSamples' }]
|
|
975
977
|
}] });
|
|
976
978
|
class DocPageSectionsContentDirective {
|
|
977
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
978
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
979
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
980
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i0 }); }
|
|
979
981
|
}
|
|
980
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
982
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
|
|
981
983
|
type: Directive,
|
|
982
984
|
args: [{ selector: 'docPageSections' }]
|
|
983
985
|
}] });
|
|
984
986
|
class DocPageAccessibilityContentDirective {
|
|
985
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
986
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
987
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
988
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i0 }); }
|
|
987
989
|
}
|
|
988
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
990
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
|
|
989
991
|
type: Directive,
|
|
990
992
|
args: [{ selector: 'docPageAccessibility' }]
|
|
991
993
|
}] });
|
|
992
994
|
class DocPageApiContentDirective {
|
|
993
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
994
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
995
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
996
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPageApiContentDirective, selector: "docPageApi", ngImport: i0 }); }
|
|
995
997
|
}
|
|
996
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
998
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
|
|
997
999
|
type: Directive,
|
|
998
1000
|
args: [{ selector: 'docPageApi' }]
|
|
999
1001
|
}] });
|
|
1000
1002
|
class DocPageThemingContentDirective {
|
|
1001
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1002
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1003
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1004
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i0 }); }
|
|
1003
1005
|
}
|
|
1004
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1006
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
|
|
1005
1007
|
type: Directive,
|
|
1006
1008
|
args: [{ selector: 'docPageTheming' }]
|
|
1007
1009
|
}] });
|
|
1008
1010
|
|
|
1009
1011
|
class DocSampleApiComponent {
|
|
1010
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1011
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1012
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1013
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" }); }
|
|
1012
1014
|
}
|
|
1013
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSampleApiComponent, decorators: [{
|
|
1014
1016
|
type: Component,
|
|
1015
1017
|
args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
|
|
1016
1018
|
}] });
|
|
@@ -1027,10 +1029,10 @@ class DocSectionCodeComponent {
|
|
|
1027
1029
|
isDefined(object) {
|
|
1028
1030
|
return object;
|
|
1029
1031
|
}
|
|
1030
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1031
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1032
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1033
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", 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(() => DocSectionCodeDescriptionTagDirective), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{ styleClass }}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated\">\n {{ label }}\n </div>\n <div class=\"ml-auto\">\n <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{ versionLabel }}</span>\n <button type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n <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\">\n <ng-content select=\"sectionCodeDOC\"></ng-content>\n </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: i7.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i5.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i5.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i10.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i9$1.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] }); }
|
|
1032
1034
|
}
|
|
1033
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
|
|
1034
1036
|
type: Component,
|
|
1035
1037
|
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 type=\"button\" euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n <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\">\n <ng-content select=\"sectionCodeDOC\"></ng-content>\n </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"] }]
|
|
1036
1038
|
}], propDecorators: { label: [{
|
|
@@ -1066,50 +1068,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4",
|
|
|
1066
1068
|
}] } });
|
|
1067
1069
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
1068
1070
|
class DocSectionCodeDescriptionTagDirective {
|
|
1069
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1070
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1071
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1072
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i0 }); }
|
|
1071
1073
|
}
|
|
1072
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1074
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
|
|
1073
1075
|
type: Directive,
|
|
1074
1076
|
args: [{ selector: 'sectionDescription' }]
|
|
1075
1077
|
}] });
|
|
1076
1078
|
class DocSectionCodeHtmlTagDirective {
|
|
1077
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1078
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1079
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1080
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i0 }); }
|
|
1079
1081
|
}
|
|
1080
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1082
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
|
|
1081
1083
|
type: Directive,
|
|
1082
1084
|
args: [{ selector: 'sectionCodeHTML' }]
|
|
1083
1085
|
}] });
|
|
1084
1086
|
class DocSectionCodeTsTagDirective {
|
|
1085
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1086
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1087
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1088
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i0 }); }
|
|
1087
1089
|
}
|
|
1088
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1090
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
|
|
1089
1091
|
type: Directive,
|
|
1090
1092
|
args: [{ selector: 'sectionCodeTS' }]
|
|
1091
1093
|
}] });
|
|
1092
1094
|
class DocSectionCodeServiceTagDirective {
|
|
1093
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1094
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1095
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1096
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i0 }); }
|
|
1095
1097
|
}
|
|
1096
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
|
|
1097
1099
|
type: Directive,
|
|
1098
1100
|
args: [{ selector: 'sectionCodeSERVICE' }]
|
|
1099
1101
|
}] });
|
|
1100
1102
|
class DocSectionCodeCssTagDirective {
|
|
1101
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1102
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1103
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1104
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i0 }); }
|
|
1103
1105
|
}
|
|
1104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
|
|
1105
1107
|
type: Directive,
|
|
1106
1108
|
args: [{ selector: 'sectionCodeCSS' }]
|
|
1107
1109
|
}] });
|
|
1108
1110
|
class DocSectionCodeDocTagDirective {
|
|
1109
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1110
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1111
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1112
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i0 }); }
|
|
1111
1113
|
}
|
|
1112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
|
|
1113
1115
|
type: Directive,
|
|
1114
1116
|
args: [{ selector: 'sectionCodeDOC' }]
|
|
1115
1117
|
}] });
|
|
@@ -1131,13 +1133,13 @@ class DocPageCodeFabComponent {
|
|
|
1131
1133
|
const sourceRootPath = `https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/app-eui-showcase-${this.showcase}/browse/src/app/features/`;
|
|
1132
1134
|
window.open(sourceRootPath + this.codeFolder, '_blank');
|
|
1133
1135
|
}
|
|
1134
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1135
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1136
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageCodeFabComponent, deps: [{ token: i2.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1137
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", 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()\" [width]=\"'50vw'\">\n <button type=\"button\" *ngIf=\"codeFolder\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\"></eui-icon-svg> VIEW SOURCES\n </button>\n <ng-content></ng-content>\n <p>Use the <kbd>View sources</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i4$1.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "isClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "open", "close", "dismiss", "accept"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }] }); }
|
|
1136
1138
|
}
|
|
1137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
|
|
1138
1140
|
type: Component,
|
|
1139
1141
|
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()\" [width]=\"'50vw'\">\n <button type=\"button\" *ngIf=\"codeFolder\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\"></eui-icon-svg> VIEW SOURCES\n </button>\n <ng-content></ng-content>\n <p>Use the <kbd>View sources</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n" }]
|
|
1140
|
-
}], ctorParameters:
|
|
1142
|
+
}], ctorParameters: () => [{ type: i2.EuiAppShellService }], propDecorators: { codeFolder: [{
|
|
1141
1143
|
type: Input
|
|
1142
1144
|
}], showcase: [{
|
|
1143
1145
|
type: Input
|
|
@@ -1150,10 +1152,10 @@ class LoremIpsumSampleComponent {
|
|
|
1150
1152
|
constructor() {
|
|
1151
1153
|
this.textSize = 'large';
|
|
1152
1154
|
}
|
|
1153
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1154
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.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. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n\n <!--\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n <div class=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Mauris bibendum lorem a sem tristique commodo.\n Duis vitae magna non dui cursus rhoncus nec ac neque.\n </div>\n <div class=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n -->\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"] }] }); }
|
|
1155
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1156
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", 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. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n\n <!--\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n <div class=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Mauris bibendum lorem a sem tristique commodo.\n Duis vitae magna non dui cursus rhoncus nec ac neque.\n </div>\n <div class=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n -->\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"] }] }); }
|
|
1155
1157
|
}
|
|
1156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
|
|
1157
1159
|
type: Component,
|
|
1158
1160
|
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. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque. Aenean\n consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed vitae tellus ac nisl facilisis posuere. Mauris cursus dui nec arcu molestie sodales. Morbi vel enim semper, luctus odio vitae,\n lacinia nisl. Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium. Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"eui-u-mb-m\">Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.</div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis\n malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"eui-u-mb-m\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus. Curabitur venenatis eros at eros ultrices, eu feugiat eros\n efficitur. Sed quis nulla non augue scelerisque gravida vitae sed neque. Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci. Suspendisse eu augue at nibh egestas eleifend. Ut tristique enim in\n lectus aliquam, non tincidunt tortor vulputate. Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"eui-u-mb-m\">\n Vestibulum hendrerit risus a libero gravida venenatis. Mauris non enim sit amet odio pellentesque scelerisque in et velit. Quisque\n efficitur eros ut magna rutrum aliquet. Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui. Nullam commodo mi quis\n nibh euismod interdum. In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"eui-u-mb-m\">\n Ut eget tellus a magna fermentum tempor at id erat. Nam fringilla eros sed leo facilisis, et mollis orci elementum. Donec\n consectetur libero sed arcu rhoncus, vel elementum augue mollis. Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"eui-u-mb-m\">\n Sed pharetra lorem in justo rhoncus tempor. Phasellus vel elit eget massa consectetur porttitor eu ut ex. Donec sed ex sit amet\n purus blandit pharetra. Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"eui-u-mb-m\">\n Pellentesque convallis nulla in lectus molestie mollis. Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"eui-u-mb-m\">Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.</div>\n <div class=\"eui-u-mb-m\">\n Pellentesque gravida diam quis orci suscipit hendrerit. Vestibulum congue sapien sed pretium gravida. Nullam ornare lectus sed\n pulvinar fringilla. Nam dictum eros sit amet lectus aliquet tincidunt. Quisque eu augue eget felis tincidunt hendrerit. Aenean vel\n lorem vel sem consequat congue.\n </div>\n <div class=\"eui-u-mb-m\">Phasellus finibus libero at blandit sollicitudin. Praesent pulvinar libero a lorem scelerisque sodales.</div>\n <div class=\"eui-u-mb-m\">Donec tempor quam eget turpis dignissim egestas. Pellentesque vulputate nisi eu ornare euismod.</div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n <div class=\"eui-u-mb-m\">\n Lorem ipsum dolor sit amet consectetur. Nec maecenas turpis eget curabitur. Neque accumsan nulla vestibulum vulputate. Etiam lorem\n sit leo aliquam. Penatibus suspendisse sit in metus sodales pretium erat tempor. Congue aliquam varius nec pellentesque. Diam\n tincidunt neque aliquam a natoque egestas nibh in urna. Volutpat enim erat magna sociis blandit odio ut convallis. Montes blandit\n maecenas pellentesque magna. Ipsum at porta justo massa aliquet vulputate sit. Nec non semper urna morbi nec ut in eu. Tristique\n morbi nam tempus id.\n </div>\n <div class=\"eui-u-mb-m\">\n Amet eu phasellus dignissim lacus. Pellentesque tristique sed leo eu mattis quam ut sem sed. Id lacus erat urna arcu ac risus\n sodales. Scelerisque risus auctor erat mattis habitant facilisis. Orci velit nunc fermentum condimentum volutpat. Nec tellus at\n risus cras. Malesuada ultrices vestibulum arcu sagittis quis purus. Sit ultricies suspendisse ante augue malesuada mattis eget\n fermentum et. Lobortis et ridiculus turpis elit a mi faucibus. Sit vitae nunc etiam euismod massa nisi nibh arcu nulla. Elit ipsum\n lorem vestibulum nulla senectus curabitur. Turpis non eu eu rhoncus. Dictum porttitor pulvinar commodo nec sapien est at erat et.\n Nisl pellentesque pellentesque tempus tristique commodo eget urna tempor. Porta mi accumsan senectus risus eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Velit vulputate amet id tellus. Quam aliquet eros hendrerit cursus id et amet in nam. Eget elementum diam ut magna porttitor. Cursus\n neque vulputate malesuada congue enim. Ac in sed et justo adipiscing habitasse elit tincidunt dictum. Dui ornare ac ligula duis. Sit\n mi a eu dictum est magna morbi. Morbi hendrerit non senectus sit platea gravida id. Fermentum vulputate arcu pretium cras elit.\n </div>\n <div class=\"eui-u-mb-m\">\n Enim et nunc eget ac commodo sagittis. Turpis facilisi enim enim nisi eu sed. Amet viverra felis in ac orci ullamcorper. At\n ridiculus enim nec velit nulla luctus lorem non ultricies. Urna gravida sem curabitur quis diam ut porttitor aliquam sapien. Id\n adipiscing libero feugiat imperdiet senectus mattis non nulla condimentum.\n </div>\n <div class=\"eui-u-mb-m\">\n Etiam felis parturient et amet. Enim neque eu risus ante tristique nisl nisl vulputate. Arcu turpis semper vitae ultrices sit\n ultrices. Sed arcu pharetra vel sapien in. Turpis vestibulum tellus quis arcu egestas viverra cursus quisque. Eu volutpat mauris\n sagittis integer fermentum fringilla penatibus. Velit et quis et arcu velit tortor.\n </div>\n <div class=\"eui-u-mb-m\">\n Nisl fringilla nibh eu nunc pellentesque dignissim vestibulum mus porttitor. Consequat non eu nulla lectus ultrices. Viverra duis\n enim aliquet ut massa laoreet consequat. Sociis dignissim sodales vitae maecenas nec aliquam. Volutpat feugiat urna id sed. In\n fringilla dui neque montes ut et lorem velit consequat. Ut fermentum amet dictum proin et. Aenean odio ac quisque ultrices tellus\n mattis posuere et curabitur. Proin est suspendisse iaculis nullam eros sit amet aliquam laoreet. Libero tincidunt quis et odio\n imperdiet risus neque. Odio et dui duis odio accumsan. Lacus nibh urna at risus euismod lobortis cursus. Porta risus mi gravida\n aliquet. Leo viverra diam vulputate sollicitudin cursus erat sed.\n </div>\n <div class=\"eui-u-mb-m\">\n Erat consectetur sem nulla sed viverra ipsum adipiscing nunc. Porttitor eget sodales integer maecenas tortor quam sit pharetra\n lorem. Egestas ut mauris urna vitae a mollis. Nam cursus amet sit dolor. Mattis mattis laoreet sed massa proin tristique ullamcorper\n commodo. Sit in tortor posuere nec lorem fringilla.\n </div>\n <div class=\"eui-u-mb-m\">\n Fringilla elementum quisque vitae pharetra risus pellentesque eu nulla. Enim egestas velit est tempor ut vulputate tellus tincidunt\n ut. Non enim lorem nec in mattis. Vitae nulla vitae lectus varius aliquet massa lectus morbi. Placerat vel consectetur commodo nibh\n ullamcorper vitae tellus sed. Nisi lacus quis at malesuada elementum. Turpis et ut egestas adipiscing et ac. Auctor aliquam dictum\n dolor diam sit tellus tempus. Elementum venenatis arcu id a. Duis imperdiet id elementum tempor facilisis rhoncus rhoncus posuere\n egestas. Imperdiet odio lorem posuere sit. Molestie amet quisque tellus phasellus nisi. Lobortis mi faucibus elit semper. Ipsum eu\n adipiscing fringilla at felis maecenas. Egestas tortor odio laoreet neque.\n </div>\n <div class=\"eui-u-mb-m\">\n Sollicitudin rhoncus nunc ultricies lorem massa sagittis integer elit. Consequat mauris elementum sed imperdiet libero odio non\n amet. Tortor condimentum non convallis posuere pulvinar. Neque malesuada volutpat sit quis. Ac justo gravida vitae mollis. Ut tellus\n nunc ultrices egestas vitae tellus sed. Pellentesque nunc id quisque scelerisque et pellentesque eu ultricies.\n </div>\n <div class=\"eui-u-mb-m\">\n Dolor rhoncus tempor netus sit mauris. Turpis curabitur amet eu lectus sem habitant magna non. Eros lorem eu lectus proin venenatis\n tellus. Velit praesent consectetur ligula venenatis magna sed dictum. Quisque vivamus ipsum mattis morbi pulvinar bibendum. Netus\n risus sit adipiscing augue augue eget est.\n </div>\n <div class=\"eui-u-mb-m\">\n Justo feugiat duis fames in luctus elit. Sit id in turpis quam habitasse amet ut sed sem. Ut luctus amet sit lacinia sed eu sed a\n senectus. Fusce gravida augue quis bibendum aliquet. Quam egestas quam iaculis urna condimentum amet. Odio aliquam massa vel\n vestibulum tincidunt dolor tincidunt netus facilisi. Ut sociis metus pellentesque leo amet. Diam lectus pretium id tincidunt\n habitasse. Eget tortor quisque tristique scelerisque quam vestibulum morbi ornare pellentesque. Nunc eget volutpat id mauris amet ut\n aliquet nunc dictumst. Elit blandit a suspendisse commodo. Velit quis ut varius leo pharetra risus leo eget.\n </div>\n <div class=\"eui-u-mb-m\">\n Consequat phasellus ullamcorper mauris id tortor ultrices nunc. Lacinia eu sapien rhoncus lacinia sed augue justo molestie ornare.\n Integer ridiculus gravida pulvinar iaculis nisl eleifend senectus. Imperdiet vitae orci massa ac eget etiam est nulla. Netus nibh\n ipsum auctor eros nunc aliquam enim. Donec pretium vel amet blandit sed quisque sed. Tempor ipsum nunc leo ultricies ut. Odio tellus\n ultricies diam cras. Diam maecenas amet gravida nunc. Feugiat egestas eget ullamcorper consequat. Varius faucibus nisl dolor dolor\n diam ultrices odio iaculis lorem. Egestas tristique est egestas ornare. Tortor eu orci orci posuere blandit amet sit semper\n pharetra. Sed dictumst dolor phasellus urna nisl auctor sit in vulputate.\n </div>\n\n <!--\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n <div class=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Mauris bibendum lorem a sem tristique commodo.\n Duis vitae magna non dui cursus rhoncus nec ac neque.\n </div>\n <div class=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"eui-u-mb-m\">\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=\"eui-u-mb-m\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"eui-u-mb-m\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n -->\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" }]
|
|
1159
1161
|
}], propDecorators: { textSize: [{
|
|
@@ -1163,18 +1165,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4",
|
|
|
1163
1165
|
/* eslint-disable max-len */
|
|
1164
1166
|
/* eslint-disable */
|
|
1165
1167
|
class DocPagePatternSampleDirective {
|
|
1166
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1167
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1168
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1169
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i0 }); }
|
|
1168
1170
|
}
|
|
1169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
|
|
1170
1172
|
type: Directive,
|
|
1171
1173
|
args: [{ selector: 'docPagePatternSample' }]
|
|
1172
1174
|
}] });
|
|
1173
1175
|
class DocPagePatternDocDirective {
|
|
1174
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1175
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1176
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1177
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i0 }); }
|
|
1176
1178
|
}
|
|
1177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
|
|
1178
1180
|
type: Directive,
|
|
1179
1181
|
args: [{ selector: 'docPagePatternDoc' }]
|
|
1180
1182
|
}] });
|
|
@@ -1224,13 +1226,13 @@ class DocPagePatternComponent extends BaseDirective {
|
|
|
1224
1226
|
behavior: 'smooth',
|
|
1225
1227
|
});
|
|
1226
1228
|
}
|
|
1227
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1228
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.4", type: DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, 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 (tabSelect)=\"onTabSelect($event)\">\n <eui-tab>\n <euiTabLabel>Usage and documentation</euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100 eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-shadow-6 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-size-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-color-success-100 eui-u-text-h3\">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=\"eui-u-mt-2xl eui-u-color-danger-100 eui-u-text-h3\">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=\"eui-u-mt-2xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>Pattern sample</euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <euiTabsRightContent>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <span class=\"eui-icon eui-icon-code\"></span>\n View sources\n </button>\n </euiTabsRightContent>\n</eui-tabs>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-shadow-8\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding: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)}.doc-page-pattern .html{display:block;line-height:var(--eui-base-line-height);position:relative;text-align:left}\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$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["avatarUrl", "expandLabel", "collapseLabel", "iconClass", "avatarDerscription", "iconDescription", "isHeaderBodyOnly", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i3$2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i7.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "directive", type: i5.EuiTabsRightContentTagDirective, selector: "euiTabsRightContent" }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i5.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i9.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i7$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i9$1.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1229
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPagePatternComponent, deps: [{ token: i3$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1230
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], usesInheritance: true, ngImport: i0, template: "<eui-tabs (tabSelect)=\"onTabSelect($event)\">\n <eui-tab>\n <euiTabLabel>Usage and documentation</euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100 eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-shadow-6 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-size-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-color-success-100 eui-u-text-h3\">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=\"eui-u-mt-2xl eui-u-color-danger-100 eui-u-text-h3\">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=\"eui-u-mt-2xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>Pattern sample</euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <euiTabsRightContent>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <span class=\"eui-icon eui-icon-code\"></span>\n View sources\n </button>\n </euiTabsRightContent>\n</eui-tabs>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-shadow-8\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding: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)}.doc-page-pattern .html{display:block;line-height:var(--eui-base-line-height);position:relative;text-align:left}\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$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["avatarUrl", "expandLabel", "collapseLabel", "iconClass", "avatarDerscription", "iconDescription", "isHeaderBodyOnly", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i3$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i3$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i3$2.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i7.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i5.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "directive", type: i5.EuiTabsRightContentTagDirective, selector: "euiTabsRightContent" }, { kind: "component", type: i5.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i5.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i9.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i7$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i9$1.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1229
1231
|
}
|
|
1230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: DocPagePatternComponent, decorators: [{
|
|
1231
1233
|
type: Component,
|
|
1232
1234
|
args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, template: "<eui-tabs (tabSelect)=\"onTabSelect($event)\">\n <eui-tab>\n <euiTabLabel>Usage and documentation</euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100 eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-shadow-6 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-size-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-color-success-100 eui-u-text-h3\">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=\"eui-u-mt-2xl eui-u-color-danger-100 eui-u-text-h3\">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=\"eui-u-mt-2xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>Pattern sample</euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <euiTabsRightContent>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <span class=\"eui-icon eui-icon-code\"></span>\n View sources\n </button>\n </euiTabsRightContent>\n</eui-tabs>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-shadow-8\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding: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)}.doc-page-pattern .html{display:block;line-height:var(--eui-base-line-height);position:relative;text-align:left}\n"] }]
|
|
1233
|
-
}], ctorParameters:
|
|
1235
|
+
}], ctorParameters: () => [{ type: i3$3.DomSanitizer }], propDecorators: { cssClasses: [{
|
|
1234
1236
|
type: HostBinding,
|
|
1235
1237
|
args: ['class']
|
|
1236
1238
|
}], sampleContent: [{
|
|
@@ -1291,8 +1293,8 @@ const COMPONENTS = [
|
|
|
1291
1293
|
DocPagePatternSampleDirective,
|
|
1292
1294
|
];
|
|
1293
1295
|
class EuiShowcaseModule {
|
|
1294
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1295
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.
|
|
1296
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1297
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
|
|
1296
1298
|
DocPageComponent,
|
|
1297
1299
|
DocPageCodeComponent,
|
|
1298
1300
|
DocPageCodeFabComponent,
|
|
@@ -1354,7 +1356,7 @@ class EuiShowcaseModule {
|
|
|
1354
1356
|
DocPagePatternComponent,
|
|
1355
1357
|
DocPagePatternDocDirective,
|
|
1356
1358
|
DocPagePatternSampleDirective] }); }
|
|
1357
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1359
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiShowcaseModule, imports: [CommonModule,
|
|
1358
1360
|
EuiCardModule,
|
|
1359
1361
|
EuiButtonModule,
|
|
1360
1362
|
EuiTabsModule,
|
|
@@ -1367,7 +1369,7 @@ class EuiShowcaseModule {
|
|
|
1367
1369
|
EuiIconModule,
|
|
1368
1370
|
EuiLabelModule] }); }
|
|
1369
1371
|
}
|
|
1370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.
|
|
1372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiShowcaseModule, decorators: [{
|
|
1371
1373
|
type: NgModule,
|
|
1372
1374
|
args: [{
|
|
1373
1375
|
declarations: [...COMPONENTS],
|