@eui/showcase 15.0.0-rc.7 → 15.0.0-rc.9

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.
Files changed (19) hide show
  1. package/esm2020/lib/components/doc-page/doc-page.component.mjs +25 -25
  2. package/esm2020/lib/components/doc-page-code/doc-page-code.component.mjs +4 -4
  3. package/esm2020/lib/components/doc-page-code-fab/doc-page-code-fab.component.mjs +4 -4
  4. package/esm2020/lib/components/doc-page-pattern/doc-page-pattern.component.mjs +28 -18
  5. package/esm2020/lib/components/doc-sample/doc-sample.component.mjs +4 -4
  6. package/esm2020/lib/components/doc-sample-api/doc-sample-api.component.mjs +4 -4
  7. package/esm2020/lib/components/doc-section/doc-section.component.mjs +4 -4
  8. package/esm2020/lib/components/doc-section-code/doc-section-code.component.mjs +22 -22
  9. package/esm2020/lib/components/eui-code-highlighter/eui-code-highlighter.component.mjs +4 -4
  10. package/esm2020/lib/components/lorem-ipsum/lorem-ipsum-sample.component.mjs +4 -4
  11. package/esm2020/lib/components/playground/playground.component.mjs +4 -4
  12. package/esm2020/lib/eui-showcase.module.mjs +5 -5
  13. package/fesm2015/eui-showcase.mjs +99 -90
  14. package/fesm2015/eui-showcase.mjs.map +1 -1
  15. package/fesm2020/eui-showcase.mjs +99 -90
  16. package/fesm2020/eui-showcase.mjs.map +1 -1
  17. package/lib/components/doc-page-pattern/doc-page-pattern.component.d.ts +7 -2
  18. package/lib/components/doc-page-pattern/doc-page-pattern.component.d.ts.map +1 -1
  19. package/package.json +1 -1
package/fesm2020/eui-showcase.mjs CHANGED
@@ -2,13 +2,13 @@ import * as i0 from '@angular/core';
2
2
  import { Directive, ElementRef, Component, Input, ViewChild, ViewEncapsulation, ContentChildren, forwardRef, ContentChild, HostBinding, NgModule } from '@angular/core';
3
3
  import * as i4 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
- import * as i2$2 from '@eui/components/eui-card';
5
+ import * as i3$1 from '@eui/components/eui-card';
6
6
  import { EuiCardModule } from '@eui/components/eui-card';
7
- import * as i2$3 from '@eui/components/eui-button';
7
+ import * as i2$2 from '@eui/components/eui-button';
8
8
  import { EuiButtonModule } from '@eui/components/eui-button';
9
- import * as i3$1 from '@eui/components/eui-tabs';
9
+ import * as i6 from '@eui/components/eui-tabs';
10
10
  import { EuiTabsModule } from '@eui/components/eui-tabs';
11
- import * as i6 from '@eui/components/eui-page';
11
+ import * as i6$1 from '@eui/components/eui-page';
12
12
  import { EuiPageModule } from '@eui/components/eui-page';
13
13
  import * as i7 from '@eui/components/eui-chip';
14
14
  import { EuiChipModule } from '@eui/components/eui-chip';
@@ -18,7 +18,7 @@ import * as i8 from '@eui/components/eui-alert';
18
18
  import { EuiAlertModule } from '@eui/components/eui-alert';
19
19
  import * as i3 from '@eui/components/eui-block-content';
20
20
  import { EuiBlockContentModule } from '@eui/components/eui-block-content';
21
- import * as i4$1 from '@eui/components/eui-badge';
21
+ import * as i5 from '@eui/components/eui-badge';
22
22
  import { EuiBadgeModule } from '@eui/components/eui-badge';
23
23
  import { lastValueFrom, forkJoin, Observable } from 'rxjs';
24
24
  import { map, catchError } from 'rxjs/operators';
@@ -39,9 +39,9 @@ class EuiCodeHighlighterDirective {
39
39
  }
40
40
  }
41
41
  }
42
- /** @nocollapse */ EuiCodeHighlighterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
43
- /** @nocollapse */ EuiCodeHighlighterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i0 });
44
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
42
+ /** @nocollapse */ EuiCodeHighlighterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
43
+ /** @nocollapse */ EuiCodeHighlighterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i0 });
44
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiCodeHighlighterDirective, decorators: [{
45
45
  type: Directive,
46
46
  args: [{
47
47
  selector: '[euiCode]'
@@ -431,9 +431,9 @@ class PlaygroundComponent {
431
431
  return `import { BrowserModule } from '@angular/platform-browser';\n${contents}`;
432
432
  }
433
433
  }
434
- /** @nocollapse */ PlaygroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: PlaygroundComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.UxAppShellService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
435
- /** @nocollapse */ PlaygroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i3.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["isBlocked"] }] });
436
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: PlaygroundComponent, decorators: [{
434
+ /** @nocollapse */ PlaygroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: PlaygroundComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.UxAppShellService }, { token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
435
+ /** @nocollapse */ PlaygroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz\"></iframe>\n</eui-block-content>\n", dependencies: [{ kind: "component", type: i3.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["isBlocked"] }] });
436
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: PlaygroundComponent, decorators: [{
437
437
  type: Component,
438
438
  args: [{ selector: 'eui-playground', template: "<eui-block-content [isBlocked]=\"!isLoaded\">\n <iframe #container id=\"stackblitz\"></iframe>\n</eui-block-content>\n" }]
439
439
  }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.UxAppShellService }, { type: i2$1.HttpClient }]; }, propDecorators: { title: [{
@@ -576,9 +576,9 @@ class DocSampleComponent {
576
576
  }
577
577
  }
578
578
  }
579
- /** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleComponent, deps: [{ token: i2$1.HttpClient }, { token: i2.UxAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
580
- /** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n <div class=\"doc-sample-title__items\">\n <button euiButton\n [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n <euiTabLabel>\n Playground\n <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <eui-playground [typescriptContent]=\"tsContent\"\n [htmlContent]=\"htmlContent\"\n [activated]=\"playground_activated\"></eui-playground>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i2$2.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i3$1.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i3$1.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: PlaygroundComponent, selector: "eui-playground", inputs: ["title", "htmlContent", "typescriptContent", "activated", "modules"] }] });
581
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleComponent, decorators: [{
579
+ /** @nocollapse */ DocSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleComponent, deps: [{ token: i2$1.HttpClient }, { token: i2.UxAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
580
+ /** @nocollapse */ DocSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n <div class=\"doc-sample-title__items\">\n <button euiButton\n [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n <euiTabLabel>\n Playground\n <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <eui-playground [typescriptContent]=\"tsContent\"\n [htmlContent]=\"htmlContent\"\n [activated]=\"playground_activated\"></eui-playground>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i3$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: PlaygroundComponent, selector: "eui-playground", inputs: ["title", "htmlContent", "typescriptContent", "activated", "modules"] }] });
581
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleComponent, decorators: [{
582
582
  type: Component,
583
583
  args: [{ selector: 'eui-showcase-doc-sample', template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\"><strong>{{label}}</strong></div>\n <div class=\"doc-sample-title__items\">\n <button euiButton\n [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"onToggleCode()\"\n [isLoading]=\"isCodeLoading\" [euiDisabled]=\"isCodeLoading\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab euiWarning [isVisible]=\"htmlContent && tsContent\">\n <euiTabLabel>\n Playground\n <euiTabSubLabel>Stackblitz <eui-chip euiSizeS euiWarning>Experimental</eui-chip></euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <eui-playground [typescriptContent]=\"tsContent\"\n [htmlContent]=\"htmlContent\"\n [activated]=\"playground_activated\"></eui-playground>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}.doc-sample-title__label{font-size:var(--eui-base-font-size-xl)}.doc-sample-title__items{display:flex;margin-left:auto}\n"] }]
584
584
  }], ctorParameters: function () { return [{ type: i2$1.HttpClient }, { type: i2.UxAppShellService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
@@ -601,9 +601,9 @@ class DocSectionComponent {
601
601
  }
602
602
  }
603
603
  }
604
- /** @nocollapse */ DocSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
605
- /** @nocollapse */ DocSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionComponent, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info mb-3\">{{label}}</h4>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl)}.doc-section-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}\n"] });
606
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionComponent, decorators: [{
604
+ /** @nocollapse */ DocSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
605
+ /** @nocollapse */ DocSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionComponent, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, ngImport: i0, template: "<h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info mb-3\">{{label}}</h4>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl)}.doc-section-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}\n"] });
606
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionComponent, decorators: [{
607
607
  type: Component,
608
608
  args: [{ selector: 'eui-showcase-doc-section', template: "<h4 id=\"sections\" class=\"eui-u-font-bold eui-u-color-info mb-3\">{{label}}</h4>\n\n<ng-content></ng-content>\n", styles: [":host{display:block;margin-bottom:var(--eui-base-spacing-2xl)}.doc-section-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-15)}\n"] }]
609
609
  }], ctorParameters: function () { return []; }, propDecorators: { id: [{
@@ -625,9 +625,9 @@ class DocPageCodeComponent {
625
625
  window.open(sourceRootPath + this.codeFolder, '_blank');
626
626
  }
627
627
  }
628
- /** @nocollapse */ DocPageCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
629
- /** @nocollapse */ DocPageCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass=\"eui-icon eui-icon-code\"></span>\n</button>\n", dependencies: [{ kind: "component", type: i2$3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }] });
630
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageCodeComponent, decorators: [{
628
+ /** @nocollapse */ DocPageCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
629
+ /** @nocollapse */ DocPageCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass=\"eui-icon eui-icon-code\"></span>\n</button>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }] });
630
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeComponent, decorators: [{
631
631
  type: Component,
632
632
  args: [{ selector: 'eui-showcase-doc-page-code', template: "<button euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass=\"eui-icon eui-icon-code\"></span>\n</button>\n" }]
633
633
  }], ctorParameters: function () { return []; }, propDecorators: { codeFolder: [{
@@ -840,9 +840,9 @@ class DocPageComponent {
840
840
  return result;
841
841
  }
842
842
  }
843
- /** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.UxAppShellService }, { token: i3$2.DomSanitizer }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
844
- /** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return DocPageThemingContentDirective; }) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n <div class=\"doc-page-main-column\">\n <eui-page>\n <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'DEPRECATED'\" [euiDanger]=\"isLegacy\">\n <span euiLabel><strong>{{stateLabel}}</strong></span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-page-content>\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger>\n <p>\n This component will be <strong class=\"eui-u-color-danger\">removed</strong> in the next version of eUI !!\n </p>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>\n <!-- <div *ngIf=\"cmp.cmpReplacementUrl\">\n <br><br>\n You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a>\n </div> -->\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n This component will be <strong class=\"eui-u-color-danger\">discontinued in future version of eUI</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{cmp.cmpReplacementNote}}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning>\n <p>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n </p>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI, it is kept for <strong class=\"eui-u-color-warning\">historical usage only</strong>\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel>\n API\n </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{apiUrl}}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n A11Y\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h3>\n <ng-content select=\"docPageAccessibility\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n OPTIONS & SAMPLES\n </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <h3 class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Module import</h3>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br>\n </ng-container>\n\n <h3 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Overview & setup</h3>\n <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n <ng-template #noOverview>\n Coming soon...\n </ng-template>\n <br>\n\n <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2\">Options & samples</h3>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel>\n THEMING\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h3>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{pageInteractiveContent.first.title}}\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n {{pageInteractiveContent.first.subTitle}}\n </h3>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <h3 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h3>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n </eui-page-content>\n </eui-page>\n </div>\n\n <div *ngIf=\"isNavigationVisible\" class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n <div id=\"doc-page-nav\">\n <div class=\"doc-page-navigation-title\">In this page</div>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <!-- ALWAYS PRESENT in each page-->\n <!-- <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li> -->\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 0)\"><span>API</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 1)\"><span>A11Y</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 2)\"><span>OPTIONS & SAMPLES</span></li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 2)\"><span>{{sample.label}}</span></li>\n </ul>\n </li>\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 3)\"><span>THEMING</span></li>\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n <span>{{pageInteractiveContent.first.title}}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 3)\">\n <span>{{pageInteractiveContent.first.title}}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i3$1.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
845
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageComponent, decorators: [{
843
+ /** @nocollapse */ DocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.UxAppShellService }, { token: i3$2.DomSanitizer }, { token: i4.Location }], target: i0.ɵɵFactoryTarget.Component });
844
+ /** @nocollapse */ DocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(function () { return DocPageOverviewContentDirective; }) }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(function () { return DocPageSamplesContentDirective; }) }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(function () { return DocPageSectionsContentDirective; }) }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(function () { return DocPageInteractiveContentDirective; }) }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(function () { return DocPageAccessibilityContentDirective; }) }, { propertyName: "pageApiContent", predicate: i0.forwardRef(function () { return DocPageApiContentDirective; }) }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(function () { return DocPageThemingContentDirective; }) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i0, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n <div class=\"doc-page-main-column\">\n <eui-page>\n <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'DEPRECATED'\" [euiDanger]=\"isLegacy\">\n <span euiLabel><strong>{{stateLabel}}</strong></span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-page-content>\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger>\n <p>\n This component will be <strong class=\"eui-u-color-danger\">removed</strong> in the next version of eUI !!\n </p>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>\n <!-- <div *ngIf=\"cmp.cmpReplacementUrl\">\n <br><br>\n You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a>\n </div> -->\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n This component will be <strong class=\"eui-u-color-danger\">discontinued in future version of eUI</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{cmp.cmpReplacementNote}}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning>\n <p>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n </p>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI, it is kept for <strong class=\"eui-u-color-warning\">historical usage only</strong>\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel>\n API\n </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{apiUrl}}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n A11Y\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h3>\n <ng-content select=\"docPageAccessibility\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n OPTIONS & SAMPLES\n </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <h3 class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Module import</h3>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br>\n </ng-container>\n\n <h3 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Overview & setup</h3>\n <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n <ng-template #noOverview>\n Coming soon...\n </ng-template>\n <br>\n\n <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2\">Options & samples</h3>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel>\n THEMING\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h3>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{pageInteractiveContent.first.title}}\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n {{pageInteractiveContent.first.subTitle}}\n </h3>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <h3 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h3>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n </eui-page-content>\n </eui-page>\n </div>\n\n <div *ngIf=\"isNavigationVisible\" class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n <div id=\"doc-page-nav\">\n <div class=\"doc-page-navigation-title\">In this page</div>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <!-- ALWAYS PRESENT in each page-->\n <!-- <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li> -->\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 0)\"><span>API</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 1)\"><span>A11Y</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 2)\"><span>OPTIONS & SAMPLES</span></li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 2)\"><span>{{sample.label}}</span></li>\n </ul>\n </li>\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 3)\"><span>THEMING</span></li>\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n <span>{{pageInteractiveContent.first.title}}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 3)\">\n <span>{{pageInteractiveContent.first.title}}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i6$1.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i6$1.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i6$1.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "isCollapsible", "isCollapsed", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "directive", type: i6$1.EuiPageHeaderActionItemsContentDirective, selector: "eui-page-header-action-items" }, { kind: "component", type: i7.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i8.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["euiAlertMuted", "isCloseable"], outputs: ["close"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
845
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageComponent, decorators: [{
846
846
  type: Component,
847
847
  args: [{ selector: 'eui-showcase-doc-page', encapsulation: ViewEncapsulation.None, template: "<div class=\"doc-page-navigation-wrapper\" [class.eui-u-hidden]=\"isLoading\">\n <div class=\"doc-page-main-column\">\n <eui-page>\n <eui-page-header label=\"{{label}}\" subLabel=\"{{subLabel}}\">\n <eui-page-header-action-items>\n <eui-showcase-doc-page-code *ngIf=\"codeFolder\" codeFolder=\"{{codeFolder}}\" showcase=\"{{showcase}}\"></eui-showcase-doc-page-code>\n <eui-chip *ngIf=\"stateLabel\" [euiSuccess]=\"stateLabel === 'ACTIVE'\" [euiWarning]=\"stateLabel === 'DEPRECATED'\" [euiDanger]=\"isLegacy\">\n <span euiLabel><strong>{{stateLabel}}</strong></span>\n </eui-chip>\n </eui-page-header-action-items>\n </eui-page-header>\n\n <eui-page-content>\n <eui-alert *ngIf=\"stateLabel === 'LEGACY' || isLegacy\" euiDanger>\n <p>\n This component will be <strong class=\"eui-u-color-danger\">removed</strong> in the next version of eUI !!\n </p>\n <div *ngIf=\"cmp\">\n <div *ngIf=\"cmp.cmpReplacement !== 'NONE'\">\n It has been replaced by : <strong class=\"eui-u-color-success-darkest\">{{cmp.cmpReplacement}}</strong>\n <!-- <div *ngIf=\"cmp.cmpReplacementUrl\">\n <br><br>\n You can find more information on the new component here : <a [routerLink]=\"cmp.cmpReplacementUrl\">{{cmp.cmpReplacementUrl}}</a>\n </div> -->\n </div>\n <div *ngIf=\"cmp.cmpReplacement === 'NONE'\">\n This component will be <strong class=\"eui-u-color-danger\">discontinued in future version of eUI</strong>\n </div>\n <div *ngIf=\"cmp.cmpReplacementNote\">\n <strong class=\"eui-u-color-warning\">{{cmp.cmpReplacementNote}}</strong>\n </div>\n </div>\n </eui-alert>\n\n <eui-alert *ngIf=\"stateLabel === 'DEPRECATED' || isDeprecated\" euiWarning>\n <p>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n </p>\n <div *ngIf=\"cmp\">\n This component has no replacement in current version AND won't have replacement in next version of eUI, it is kept for <strong class=\"eui-u-color-warning\">historical usage only</strong>\n </div>\n </eui-alert>\n\n <div *ngIf=\"(stateLabel || isNotReady || isDeprecated) && stateLabel !== 'ACTIVE'\" class=\"mb-5\"></div>\n\n\n <eui-tabs #tabsContent *ngIf=\"pageSectionsContent.length === 0\" (tabSelected)=\"onTabSelected($event)\">\n <eui-tab>\n <euiTabLabel>\n API\n </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"apiUrlSafe\">\n <div class=\"flex-container\">\n <a href=\"{{apiUrl}}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\"></iframe>\n </div>\n </ng-container>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n A11Y\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"accessibility\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Accessibility</h3>\n <ng-content select=\"docPageAccessibility\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab>\n <euiTabLabel>\n OPTIONS & SAMPLES\n </euiTabLabel>\n <euiTabContent>\n <ng-container *ngIf=\"cmp && cmp.metadata\">\n <h3 class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Module import</h3>\n <pre><code class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpModuleImport }}</code></pre>\n <br>\n </ng-container>\n\n <h3 id=\"overview\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-3\">Overview & setup</h3>\n <div *ngIf=\"pageOverviewContent.length > 0; else noOverview\">\n <ng-content select=\"docPageOverview\"></ng-content>\n </div>\n <ng-template #noOverview>\n Coming soon...\n </ng-template>\n <br>\n\n <h3 id=\"samples\" class=\"eui-u-font-bold eui-u-color-info mt-8 mb-2\">Options & samples</h3>\n <ng-content select=\"docPageSamples\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageThemingContent.length > 0\">\n <euiTabLabel>\n THEMING\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"theming\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Theming</h3>\n <ng-content select=\"docPageTheming\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <eui-tab *ngIf=\"pageInteractiveContent.length > 0\">\n <euiTabLabel>\n {{pageInteractiveContent.first.title}}\n </euiTabLabel>\n <euiTabContent>\n <h3 id=\"interactive\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">\n {{pageInteractiveContent.first.subTitle}}\n </h3>\n <ng-content select=\"docPageInteractive\"></ng-content>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <h3 id=\"demo\" *ngIf=\"sections.length === 0\" class=\"eui-u-font-bold eui-u-color-info mt-3 mb-2\">Demo</h3>\n <ng-content select=\"docPageSections\"></ng-content>\n </ng-container>\n </eui-page-content>\n </eui-page>\n </div>\n\n <div *ngIf=\"isNavigationVisible\" class=\"doc-page-navigation-column eui-u-hidden-desktop-down\">\n <div id=\"doc-page-nav\">\n <div class=\"doc-page-navigation-title\">In this page</div>\n <div class=\"doc-page-navigation-content\" tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n <ng-container *ngIf=\"pageSectionsContent.length === 0\">\n <!-- ALWAYS PRESENT in each page-->\n <!-- <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'overview'\" (click)=\"onNavClick('overview', 0)\"><span>OVERVIEW</span></li> -->\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\" (click)=\"onNavClick('api', 0)\"><span>API</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\" (click)=\"onNavClick('a11y', 1)\"><span>A11Y</span></li>\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\" (click)=\"onNavClick('samples', 2)\"><span>OPTIONS & SAMPLES</span></li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let sample of samples\" class=\"doc-page-navigation-list\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id\" (click)=\"onNavClick(sample.id, 2)\"><span>{{sample.label}}</span></li>\n </ul>\n </li>\n\n <!-- OPTIONAL TABS-->\n <ng-container *ngIf=\"pageThemingContent.length > 0\">\n <li *ngIf=\"pageThemingContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\" (click)=\"onNavClick('theming', 3)\"><span>THEMING</span></li>\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 4)\">\n <span>{{pageInteractiveContent.first.title}}</span>\n </li>\n </ng-container>\n <ng-container *ngIf=\"pageThemingContent.length === 0\">\n <li *ngIf=\"pageInteractiveContent.length > 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\" (click)=\"onNavClick('advanced', 3)\">\n <span>{{pageInteractiveContent.first.title}}</span>\n </li>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"pageSectionsContent.length > 0\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\" (click)=\"onNavClick('sections', null)\"><span>Sections</span></li>\n <li *ngIf=\"sections.length === 0\" class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\" (click)=\"onNavClick('demo', null)\"><span>Demo</span></li>\n <li *ngIf=\"sections.length > 0\" class=\"doc-page-navigation-item doc-page-navigation-sub\">\n <ul *ngFor=\"let section of sections\">\n <li class=\"doc-page-navigation-item\" [class.doc-page-navigation-item--selected]=\"fragmentId === section.id\" (click)=\"onNavClick(section.id, null)\"><span>{{section.label}}</span></li>\n </ul>\n </li>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n</div>\n", styles: [".doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-10)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}@media screen and (max-width: 767px){.doc-page-navigation-wrapper .doc-page-main-column{padding-right:0;width:100%}.doc-page-navigation-wrapper .doc-page-navigation-column{display:none;width:0}}@media screen and (min-width: 768px) and (max-width: 995px){.doc-page-navigation-wrapper .doc-page-main-column{width:80%}.doc-page-navigation-wrapper .doc-page-navigation-column{width:20%}}@media screen and (max-width: 1550px){.doc-page-api-iframe-wrapper{display:none}}\n"] }]
848
848
  }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.UxAppShellService }, { type: i3$2.DomSanitizer }, { type: i4.Location }]; }, propDecorators: { id: [{
@@ -897,9 +897,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
897
897
  /* eslint-disable @angular-eslint/directive-selector */
898
898
  class DocPageOverviewContentDirective {
899
899
  }
900
- /** @nocollapse */ DocPageOverviewContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
901
- /** @nocollapse */ DocPageOverviewContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i0 });
902
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
900
+ /** @nocollapse */ DocPageOverviewContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageOverviewContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
901
+ /** @nocollapse */ DocPageOverviewContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i0 });
902
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageOverviewContentDirective, decorators: [{
903
903
  type: Directive,
904
904
  args: [{ selector: 'docPageOverview' }]
905
905
  }] });
@@ -909,9 +909,9 @@ class DocPageInteractiveContentDirective {
909
909
  this.subTitle = 'Advanced use cases';
910
910
  }
911
911
  }
912
- /** @nocollapse */ DocPageInteractiveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
913
- /** @nocollapse */ DocPageInteractiveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 });
914
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
912
+ /** @nocollapse */ DocPageInteractiveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageInteractiveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
913
+ /** @nocollapse */ DocPageInteractiveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0 });
914
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageInteractiveContentDirective, decorators: [{
915
915
  type: Directive,
916
916
  args: [{ selector: 'docPageInteractive' }]
917
917
  }], propDecorators: { title: [{
@@ -921,41 +921,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
921
921
  }] } });
922
922
  class DocPageSamplesContentDirective {
923
923
  }
924
- /** @nocollapse */ DocPageSamplesContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
925
- /** @nocollapse */ DocPageSamplesContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i0 });
926
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
924
+ /** @nocollapse */ DocPageSamplesContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSamplesContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
925
+ /** @nocollapse */ DocPageSamplesContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i0 });
926
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSamplesContentDirective, decorators: [{
927
927
  type: Directive,
928
928
  args: [{ selector: 'docPageSamples' }]
929
929
  }] });
930
930
  class DocPageSectionsContentDirective {
931
931
  }
932
- /** @nocollapse */ DocPageSectionsContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
933
- /** @nocollapse */ DocPageSectionsContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i0 });
934
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
932
+ /** @nocollapse */ DocPageSectionsContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSectionsContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
933
+ /** @nocollapse */ DocPageSectionsContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i0 });
934
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageSectionsContentDirective, decorators: [{
935
935
  type: Directive,
936
936
  args: [{ selector: 'docPageSections' }]
937
937
  }] });
938
938
  class DocPageAccessibilityContentDirective {
939
939
  }
940
- /** @nocollapse */ DocPageAccessibilityContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
941
- /** @nocollapse */ DocPageAccessibilityContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i0 });
942
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
940
+ /** @nocollapse */ DocPageAccessibilityContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageAccessibilityContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
941
+ /** @nocollapse */ DocPageAccessibilityContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i0 });
942
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageAccessibilityContentDirective, decorators: [{
943
943
  type: Directive,
944
944
  args: [{ selector: 'docPageAccessibility' }]
945
945
  }] });
946
946
  class DocPageApiContentDirective {
947
947
  }
948
- /** @nocollapse */ DocPageApiContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
949
- /** @nocollapse */ DocPageApiContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageApiContentDirective, selector: "docPageApi", ngImport: i0 });
950
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
948
+ /** @nocollapse */ DocPageApiContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageApiContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
949
+ /** @nocollapse */ DocPageApiContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageApiContentDirective, selector: "docPageApi", ngImport: i0 });
950
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageApiContentDirective, decorators: [{
951
951
  type: Directive,
952
952
  args: [{ selector: 'docPageApi' }]
953
953
  }] });
954
954
  class DocPageThemingContentDirective {
955
955
  }
956
- /** @nocollapse */ DocPageThemingContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
957
- /** @nocollapse */ DocPageThemingContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i0 });
958
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
956
+ /** @nocollapse */ DocPageThemingContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageThemingContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
957
+ /** @nocollapse */ DocPageThemingContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i0 });
958
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageThemingContentDirective, decorators: [{
959
959
  type: Directive,
960
960
  args: [{ selector: 'docPageTheming' }]
961
961
  }] });
@@ -963,9 +963,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
963
963
  class DocSampleApiComponent {
964
964
  constructor() { }
965
965
  }
966
- /** @nocollapse */ DocSampleApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
967
- /** @nocollapse */ DocSampleApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" });
968
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSampleApiComponent, decorators: [{
966
+ /** @nocollapse */ DocSampleApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
967
+ /** @nocollapse */ DocSampleApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i0, template: "" });
968
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSampleApiComponent, decorators: [{
969
969
  type: Component,
970
970
  args: [{ selector: 'eui-showcase-doc-sample-api', template: "" }]
971
971
  }], ctorParameters: function () { return []; } });
@@ -982,9 +982,9 @@ class DocSectionCodeComponent {
982
982
  return object;
983
983
  }
984
984
  }
985
- /** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
986
- /** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeComponent, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDescriptionTagDirective; }), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeHtmlTagDirective; }), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeTsTagDirective; }), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeServiceTagDirective; }), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeCssTagDirective; }), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDocTagDirective; }), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{styleClass}}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated\">\n {{label}}\n </div>\n <div class=\"ml-auto\">\n <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{versionLabel}}</span>\n <button euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n <euiTabLabel>Service</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n <euiTabLabel>CSS</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n <euiTabLabel>\n DOC\n <euiTabSubLabel>Documentation</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i3$1.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i3$1.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
987
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
985
+ /** @nocollapse */ DocSectionCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
986
+ /** @nocollapse */ DocSectionCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeComponent, selector: "eui-showcase-doc-section-code", inputs: { label: "label", content: "content", styleClass: "styleClass", versionLabel: "versionLabel", isDeprecated: "isDeprecated", isCodeExpanded: "isCodeExpanded" }, queries: [{ propertyName: "sectionDescription", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDescriptionTagDirective; }), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeHtmlTagDirective; }), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeTsTagDirective; }), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeServiceTagDirective; }), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeCssTagDirective; }), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i0.forwardRef(function () { return DocSectionCodeDocTagDirective; }), descendants: true }], ngImport: i0, template: "<h5 class=\"section-title {{styleClass}}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated\">\n {{label}}\n </div>\n <div class=\"ml-auto\">\n <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{versionLabel}}</span>\n <button euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n <euiTabLabel>Service</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n <euiTabLabel>CSS</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n <euiTabLabel>\n DOC\n <euiTabSubLabel>Documentation</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i6.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
987
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeComponent, decorators: [{
988
988
  type: Component,
989
989
  args: [{ selector: 'eui-showcase-doc-section-code', template: "<h5 class=\"section-title {{styleClass}}\">\n <div class=\"eui-u-flex eui-u-flex-justify-content-between\">\n <div [class.app-section-code--deprecated]=\"isDeprecated\">\n {{label}}\n </div>\n <div class=\"ml-auto\">\n <span *ngIf=\"versionLabel\" class=\"eui-u-color-danger\">{{versionLabel}}</span>\n <button euiButton [euiOutline]=\"!isCodeExpanded\" euiPrimary euiSizeS (click)=\"toggleCode()\">\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <span euiIcon iconClass=\"eui-icon-code\"></span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isDeprecated\">\n <small class=\"eui-u-color-danger\">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class=\"eui-u-mv\" *ngIf=\"sectionDescription\">\n <ng-content select=\"sectionDescription\"></ng-content>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-tabs>\n <eui-tab [isVisible]=\"isDefined(sectionCodeHTML)\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode><ng-content select=\"sectionCodeHTML\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeTS)\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeTS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeSERVICE)\">\n <euiTabLabel>Service</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeSERVICE\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeCSS)\">\n <euiTabLabel>CSS</euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode><ng-content select=\"sectionCodeCSS\"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"isDefined(sectionCodeDOC)\">\n <euiTabLabel>\n DOC\n <euiTabSubLabel>Documentation</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <div class=\"language-doc\"><ng-content select=\"sectionCodeDOC\"></ng-content></div>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]=\"!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS\">\n <pre class=\"only-html\"><code class=\"language-markup\" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\n", styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"] }]
990
990
  }], ctorParameters: function () { return []; }, propDecorators: { label: [{
@@ -1021,49 +1021,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
1021
1021
  /* eslint-disable @angular-eslint/directive-selector */
1022
1022
  class DocSectionCodeDescriptionTagDirective {
1023
1023
  }
1024
- /** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1025
- /** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i0 });
1026
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
1024
+ /** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1025
+ /** @nocollapse */ DocSectionCodeDescriptionTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i0 });
1026
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDescriptionTagDirective, decorators: [{
1027
1027
  type: Directive,
1028
1028
  args: [{ selector: 'sectionDescription' }]
1029
1029
  }] });
1030
1030
  class DocSectionCodeHtmlTagDirective {
1031
1031
  }
1032
- /** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1033
- /** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i0 });
1034
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
1032
+ /** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeHtmlTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1033
+ /** @nocollapse */ DocSectionCodeHtmlTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i0 });
1034
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeHtmlTagDirective, decorators: [{
1035
1035
  type: Directive,
1036
1036
  args: [{ selector: 'sectionCodeHTML' }]
1037
1037
  }] });
1038
1038
  class DocSectionCodeTsTagDirective {
1039
1039
  }
1040
- /** @nocollapse */ DocSectionCodeTsTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1041
- /** @nocollapse */ DocSectionCodeTsTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i0 });
1042
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
1040
+ /** @nocollapse */ DocSectionCodeTsTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeTsTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1041
+ /** @nocollapse */ DocSectionCodeTsTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i0 });
1042
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeTsTagDirective, decorators: [{
1043
1043
  type: Directive,
1044
1044
  args: [{ selector: 'sectionCodeTS' }]
1045
1045
  }] });
1046
1046
  class DocSectionCodeServiceTagDirective {
1047
1047
  }
1048
- /** @nocollapse */ DocSectionCodeServiceTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1049
- /** @nocollapse */ DocSectionCodeServiceTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i0 });
1050
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
1048
+ /** @nocollapse */ DocSectionCodeServiceTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeServiceTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1049
+ /** @nocollapse */ DocSectionCodeServiceTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i0 });
1050
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeServiceTagDirective, decorators: [{
1051
1051
  type: Directive,
1052
1052
  args: [{ selector: 'sectionCodeSERVICE' }]
1053
1053
  }] });
1054
1054
  class DocSectionCodeCssTagDirective {
1055
1055
  }
1056
- /** @nocollapse */ DocSectionCodeCssTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1057
- /** @nocollapse */ DocSectionCodeCssTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i0 });
1058
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
1056
+ /** @nocollapse */ DocSectionCodeCssTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeCssTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1057
+ /** @nocollapse */ DocSectionCodeCssTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i0 });
1058
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeCssTagDirective, decorators: [{
1059
1059
  type: Directive,
1060
1060
  args: [{ selector: 'sectionCodeCSS' }]
1061
1061
  }] });
1062
1062
  class DocSectionCodeDocTagDirective {
1063
1063
  }
1064
- /** @nocollapse */ DocSectionCodeDocTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1065
- /** @nocollapse */ DocSectionCodeDocTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i0 });
1066
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
1064
+ /** @nocollapse */ DocSectionCodeDocTagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDocTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1065
+ /** @nocollapse */ DocSectionCodeDocTagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i0 });
1066
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocSectionCodeDocTagDirective, decorators: [{
1067
1067
  type: Directive,
1068
1068
  args: [{ selector: 'sectionCodeDOC' }]
1069
1069
  }] });
@@ -1086,9 +1086,9 @@ class DocPageCodeFabComponent {
1086
1086
  window.open(sourceRootPath + this.codeFolder, '_blank');
1087
1087
  }
1088
1088
  }
1089
- /** @nocollapse */ DocPageCodeFabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageCodeFabComponent, deps: [{ token: i2.UxAppShellService }], target: i0.ɵɵFactoryTarget.Component });
1090
- /** @nocollapse */ DocPageCodeFabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<div class=\"eui-button-fixed\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-button--accent\">\n <span class=\"eui-icon eui-icon-code\" (click)=\"toggleCode()\"></span>\n </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\">\n <button euiButton euiAccent (click)=\"onOpenCode()\">\n <span class=\"eui-icon eui-icon-code\"></span> VIEW SOURCE\n </button>\n <br>\n <br>\n <ng-content></ng-content>\n <br>\n <p>Use the <kbd>View source</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i3$3.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "width", "height", "acceptLabel", "dismissLabel", "typeClass", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "isClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "open", "close", "dismiss", "accept"] }] });
1091
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
1089
+ /** @nocollapse */ DocPageCodeFabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeFabComponent, deps: [{ token: i2.UxAppShellService }], target: i0.ɵɵFactoryTarget.Component });
1090
+ /** @nocollapse */ DocPageCodeFabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<div class=\"eui-button-fixed\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-button--accent\">\n <span class=\"eui-icon eui-icon-code\" (click)=\"toggleCode()\"></span>\n </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\">\n <button euiButton euiAccent (click)=\"onOpenCode()\">\n <span class=\"eui-icon eui-icon-code\"></span> VIEW SOURCE\n </button>\n <br>\n <br>\n <ng-content></ng-content>\n <br>\n <p>Use the <kbd>View source</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i3$3.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "width", "height", "acceptLabel", "dismissLabel", "typeClass", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "isClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "open", "close", "dismiss", "accept"] }] });
1091
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
1092
1092
  type: Component,
1093
1093
  args: [{ selector: 'eui-showcase-doc-page-code-fab', template: "<div class=\"eui-button-fixed\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-button--accent\">\n <span class=\"eui-icon eui-icon-code\" (click)=\"toggleCode()\"></span>\n </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\">\n <button euiButton euiAccent (click)=\"onOpenCode()\">\n <span class=\"eui-icon eui-icon-code\"></span> VIEW SOURCE\n </button>\n <br>\n <br>\n <ng-content></ng-content>\n <br>\n <p>Use the <kbd>View source</kbd> button to access the code source of the page.</p>\n</eui-dialog>\n" }]
1094
1094
  }], ctorParameters: function () { return [{ type: i2.UxAppShellService }]; }, propDecorators: { codeFolder: [{
@@ -1105,9 +1105,9 @@ class LoremIpsumSampleComponent {
1105
1105
  this.textSize = 'large';
1106
1106
  }
1107
1107
  }
1108
- /** @nocollapse */ LoremIpsumSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1109
- /** @nocollapse */ LoremIpsumSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: LoremIpsumSampleComponent, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i0, template: "<div *ngIf=\"textSize === 'small'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est.\n Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt.\n Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n <div class=\"mb-3\">\n Maecenas at dui nec enim accumsan hendrerit eu et sapien.\n Praesent posuere tellus feugiat suscipit consectetur.\n Sed volutpat arcu laoreet, egestas massa venenatis, sagittis nulla.\n Praesent fermentum nulla at nulla iaculis feugiat in ac dolor.\n Vestibulum vitae nibh a purus viverra sodales.\n </div>\n <div class=\"mb-3\">\n Aenean fringilla quam at fermentum finibus.\n Fusce tempor nisl ut dictum facilisis.\n Phasellus id risus in quam convallis pretium.\n Phasellus malesuada leo eu dui vehicula tristique.\n </div>\n <div class=\"mb-3\">\n Suspendisse sagittis lacus eu erat ornare congue.\n In malesuada nunc a risus volutpat eleifend.\n Aenean hendrerit sapien vel lorem consectetur, et viverra nisi vulputate.\n Etiam finibus felis vel rutrum tristique.\n </div>\n <div class=\"mb-3\">\n Nulla at felis eget diam rutrum feugiat id vitae dui.\n Phasellus sit amet orci pharetra, sodales justo a, sagittis turpis.\n Sed vitae massa molestie nulla tincidunt molestie.\n Nullam bibendum libero rutrum bibendum ullamcorper.\n </div>\n <div class=\"mb-3\">\n Etiam eget lorem ornare, facilisis ipsum non, varius diam.\n Nulla eget metus sodales dui placerat sagittis.\n Nulla blandit tortor a dictum sollicitudin.\n </div>\n <div class=\"mb-3\">\n Nunc non dolor sollicitudin, tristique sem sed, vestibulum diam.\n Vivamus sollicitudin dui et velit auctor, dignissim egestas metus eleifend.\n Sed tincidunt dui laoreet sagittis tincidunt.\n Donec in eros feugiat, auctor lectus eget, pulvinar massa.\n Aliquam eget nunc aliquet, molestie risus ut, iaculis magna.\n </div>\n <div class=\"mb-3\">\n Mauris bibendum lorem a sem tristique commodo.\n Duis vitae magna non dui cursus rhoncus nec ac neque.\n </div>\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n<div class=\"eui-u-font-size-xs eui-u-color-info\">&lt;end of content&gt; &mdash; This last line must always be visible.</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1110
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
1108
+ /** @nocollapse */ LoremIpsumSampleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LoremIpsumSampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1109
+ /** @nocollapse */ LoremIpsumSampleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: LoremIpsumSampleComponent, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i0, template: "<div *ngIf=\"textSize === 'small'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est.\n Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt.\n Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n <div class=\"mb-3\">\n Maecenas at dui nec enim accumsan hendrerit eu et sapien.\n Praesent posuere tellus feugiat suscipit consectetur.\n Sed volutpat arcu laoreet, egestas massa venenatis, sagittis nulla.\n Praesent fermentum nulla at nulla iaculis feugiat in ac dolor.\n Vestibulum vitae nibh a purus viverra sodales.\n </div>\n <div class=\"mb-3\">\n Aenean fringilla quam at fermentum finibus.\n Fusce tempor nisl ut dictum facilisis.\n Phasellus id risus in quam convallis pretium.\n Phasellus malesuada leo eu dui vehicula tristique.\n </div>\n <div class=\"mb-3\">\n Suspendisse sagittis lacus eu erat ornare congue.\n In malesuada nunc a risus volutpat eleifend.\n Aenean hendrerit sapien vel lorem consectetur, et viverra nisi vulputate.\n Etiam finibus felis vel rutrum tristique.\n </div>\n <div class=\"mb-3\">\n Nulla at felis eget diam rutrum feugiat id vitae dui.\n Phasellus sit amet orci pharetra, sodales justo a, sagittis turpis.\n Sed vitae massa molestie nulla tincidunt molestie.\n Nullam bibendum libero rutrum bibendum ullamcorper.\n </div>\n <div class=\"mb-3\">\n Etiam eget lorem ornare, facilisis ipsum non, varius diam.\n Nulla eget metus sodales dui placerat sagittis.\n Nulla blandit tortor a dictum sollicitudin.\n </div>\n <div class=\"mb-3\">\n Nunc non dolor sollicitudin, tristique sem sed, vestibulum diam.\n Vivamus sollicitudin dui et velit auctor, dignissim egestas metus eleifend.\n Sed tincidunt dui laoreet sagittis tincidunt.\n Donec in eros feugiat, auctor lectus eget, pulvinar massa.\n Aliquam eget nunc aliquet, molestie risus ut, iaculis magna.\n </div>\n <div class=\"mb-3\">\n Mauris bibendum lorem a sem tristique commodo.\n Duis vitae magna non dui cursus rhoncus nec ac neque.\n </div>\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n<div class=\"eui-u-font-size-xs eui-u-color-info\">&lt;end of content&gt; &mdash; This last line must always be visible.</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1110
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LoremIpsumSampleComponent, decorators: [{
1111
1111
  type: Component,
1112
1112
  args: [{ selector: 'eui-showcase-doc-lorem-ipsum', template: "<div *ngIf=\"textSize === 'small'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est. Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt. Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n</div>\n\n<div *ngIf=\"textSize === 'medium'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n\n<div *ngIf=\"textSize === 'large'\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor.\n Etiam egestas magna at iaculis malesuada. Etiam vulputate quam at consectetur pharetra.\n\n <div class=\"mb-3\">\n Nunc sit amet lectus mattis, aliquam mi quis, iaculis est.\n Donec nec diam tristique, egestas lorem nec, varius neque.\n Aenean consequat nisi in sem porttitor, a eleifend lorem tincidunt.\n Phasellus scelerisque tellus eu imperdiet dictum.\n </div>\n <div class=\"mb-3\">\n Sed vitae tellus ac nisl facilisis posuere.\n Mauris cursus dui nec arcu molestie sodales.\n Morbi vel enim semper, luctus odio vitae, lacinia nisl.\n Sed sollicitudin ex et nibh bibendum, id blandit nunc pretium.\n Nunc venenatis eros a leo tincidunt gravida.\n </div>\n <div class=\"mb-3\">\n Etiam pulvinar leo sit amet sapien pharetra, porta laoreet tellus consequat.\n </div>\n <div class=\"mb-3\">\n Maecenas at dui nec enim accumsan hendrerit eu et sapien.\n Praesent posuere tellus feugiat suscipit consectetur.\n Sed volutpat arcu laoreet, egestas massa venenatis, sagittis nulla.\n Praesent fermentum nulla at nulla iaculis feugiat in ac dolor.\n Vestibulum vitae nibh a purus viverra sodales.\n </div>\n <div class=\"mb-3\">\n Aenean fringilla quam at fermentum finibus.\n Fusce tempor nisl ut dictum facilisis.\n Phasellus id risus in quam convallis pretium.\n Phasellus malesuada leo eu dui vehicula tristique.\n </div>\n <div class=\"mb-3\">\n Suspendisse sagittis lacus eu erat ornare congue.\n In malesuada nunc a risus volutpat eleifend.\n Aenean hendrerit sapien vel lorem consectetur, et viverra nisi vulputate.\n Etiam finibus felis vel rutrum tristique.\n </div>\n <div class=\"mb-3\">\n Nulla at felis eget diam rutrum feugiat id vitae dui.\n Phasellus sit amet orci pharetra, sodales justo a, sagittis turpis.\n Sed vitae massa molestie nulla tincidunt molestie.\n Nullam bibendum libero rutrum bibendum ullamcorper.\n </div>\n <div class=\"mb-3\">\n Etiam eget lorem ornare, facilisis ipsum non, varius diam.\n Nulla eget metus sodales dui placerat sagittis.\n Nulla blandit tortor a dictum sollicitudin.\n </div>\n <div class=\"mb-3\">\n Nunc non dolor sollicitudin, tristique sem sed, vestibulum diam.\n Vivamus sollicitudin dui et velit auctor, dignissim egestas metus eleifend.\n Sed tincidunt dui laoreet sagittis tincidunt.\n Donec in eros feugiat, auctor lectus eget, pulvinar massa.\n Aliquam eget nunc aliquet, molestie risus ut, iaculis magna.\n </div>\n <div class=\"mb-3\">\n Mauris bibendum lorem a sem tristique commodo.\n Duis vitae magna non dui cursus rhoncus nec ac neque.\n </div>\n <div class=\"mb-3\">\n Duis vitae nibh iaculis augue fermentum placerat vel vitae lectus.\n Curabitur venenatis eros at eros ultrices, eu feugiat eros efficitur.\n Sed quis nulla non augue scelerisque gravida vitae sed neque.\n Quisque semper dolor non diam sodales suscipit.\n </div>\n <div class=\"mb-3\">\n Donec ut tortor scelerisque, sodales neque id, tempor orci.\n Suspendisse eu augue at nibh egestas eleifend.\n Ut tristique enim in lectus aliquam, non tincidunt tortor vulputate.\n Phasellus eu nunc faucibus, porta ante nec, malesuada erat.\n </div>\n <div class=\"mb-3\">\n Vestibulum hendrerit risus a libero gravida venenatis.\n Mauris non enim sit amet odio pellentesque scelerisque in et velit.\n Quisque efficitur eros ut magna rutrum aliquet.\n Curabitur et nisi ullamcorper, pellentesque ligula vel, congue dui.\n Nullam commodo mi quis nibh euismod interdum.\n In rutrum sapien ac viverra pretium.\n </div>\n <div class=\"mb-3\">\n Ut eget tellus a magna fermentum tempor at id erat.\n Nam fringilla eros sed leo facilisis, et mollis orci elementum.\n Donec consectetur libero sed arcu rhoncus, vel elementum augue mollis.\n Cras facilisis nisl mollis imperdiet mollis.\n </div>\n <div class=\"mb-3\">\n Sed pharetra lorem in justo rhoncus tempor.\n Phasellus vel elit eget massa consectetur porttitor eu ut ex.\n Donec sed ex sit amet purus blandit pharetra.\n Nam rhoncus dolor ac felis condimentum malesuada.\n </div>\n <div class=\"mb-3\">\n Pellentesque convallis nulla in lectus molestie mollis.\n Pellentesque auctor libero eget dolor vehicula, a suscipit nunc laoreet.\n Nulla suscipit ante in sollicitudin semper.\n </div>\n <div class=\"mb-3\">\n Nullam rutrum ante vitae metus interdum, quis laoreet sem maximus.\n </div>\n <div class=\"mb-3\">\n Pellentesque gravida diam quis orci suscipit hendrerit.\n Vestibulum congue sapien sed pretium gravida.\n Nullam ornare lectus sed pulvinar fringilla.\n Nam dictum eros sit amet lectus aliquet tincidunt.\n Quisque eu augue eget felis tincidunt hendrerit.\n Aenean vel lorem vel sem consequat congue.\n </div>\n <div class=\"mb-3\">\n Phasellus finibus libero at blandit sollicitudin.\n Praesent pulvinar libero a lorem scelerisque sodales.\n </div>\n <div class=\"mb-3\">\n Donec tempor quam eget turpis dignissim egestas.\n Pellentesque vulputate nisi eu ornare euismod.\n </div>\n</div>\n<div class=\"eui-u-font-size-xs eui-u-color-info\">&lt;end of content&gt; &mdash; This last line must always be visible.</div>\n" }]
1113
1113
  }], propDecorators: { textSize: [{
@@ -1117,23 +1117,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
1117
1117
  /* eslint-disable */
1118
1118
  class DocPagePatternSampleDirective {
1119
1119
  }
1120
- /** @nocollapse */ DocPagePatternSampleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1121
- /** @nocollapse */ DocPagePatternSampleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i0 });
1122
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
1120
+ /** @nocollapse */ DocPagePatternSampleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternSampleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1121
+ /** @nocollapse */ DocPagePatternSampleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i0 });
1122
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternSampleDirective, decorators: [{
1123
1123
  type: Directive,
1124
1124
  args: [{ selector: 'docPagePatternSample' }]
1125
1125
  }] });
1126
1126
  class DocPagePatternDocDirective {
1127
1127
  }
1128
- /** @nocollapse */ DocPagePatternDocDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1129
- /** @nocollapse */ DocPagePatternDocDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i0 });
1130
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
1128
+ /** @nocollapse */ DocPagePatternDocDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternDocDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1129
+ /** @nocollapse */ DocPagePatternDocDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i0 });
1130
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternDocDirective, decorators: [{
1131
1131
  type: Directive,
1132
1132
  args: [{ selector: 'docPagePatternDoc' }]
1133
1133
  }] });
1134
1134
  class DocPagePatternComponent extends BaseDirective {
1135
- constructor() {
1135
+ constructor(sanitizer) {
1136
1136
  super();
1137
+ this.sanitizer = sanitizer;
1137
1138
  this.anatomyRefs = [];
1138
1139
  this.dos = [];
1139
1140
  this.donts = [];
@@ -1143,13 +1144,19 @@ class DocPagePatternComponent extends BaseDirective {
1143
1144
  super.getCssClasses('doc-page-pattern'),
1144
1145
  ].join(' ').trim();
1145
1146
  }
1147
+ ngOnInit() {
1148
+ if (this.figmaEmbedSrc) {
1149
+ this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(this.figmaEmbedSrc);
1150
+ const iFrame = document.getElementById('iframe-figma');
1151
+ }
1152
+ }
1146
1153
  }
1147
- /** @nocollapse */ DocPagePatternComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1148
- /** @nocollapse */ DocPagePatternComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", anatomyRefs: "anatomyRefs", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternSampleDirective; }), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternDocDirective; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<eui-tabs>\n <eui-tab>\n <euiTabLabel>\n Usage and documentation\n </euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n <h3>Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <h3 class=\"mt-5\">Anatomy</h3>\n <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n\n <ng-container *ngIf=\"anatomyRefs.length !== 0\">\n <h3 class=\"mt-5\">Ananomy references</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of anatomyRefs\">\n <td><eui-badge>{{ref.id}}</eui-badge></td>\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-success-100\">Do's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of dos\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"donts.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-danger-100\">Dont's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of donts\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <!-- v15 TEMP just for testing\n <iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"650\"\n src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FjQ9htWvSM8SWTPuk3hoigc%2FeUI-Desktop-Patterns%3Fnode-id%3D734%253A12516\" allowfullscreen></iframe> -->\n\n <h3 class=\"mt-5\">Figma resource</h3>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img width=\"32\" height=\"32\" alt=\"Figma Logo\" src=\"data:image/png;base64,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\">\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a class=\"h5 eui-u-text-link-external\" href=\"https://www.figma.com/file/E2mR8Kd0cmoVkiwpRUzHJL/{{figmaUrl}}\" target=\"blank\"><span class=\"eui-u-color-grey-75\">Layout component /</span> {{label}}</a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>\n Pattern sample\n </euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n</eui-tabs>\n\n<eui-showcase-doc-page-code-fab codeFolder=\"{{sourceUrl}}\"></eui-showcase-doc-page-code-fab>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:1.5rem;background-color:#f0f0f0}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;background-color:var(--eui-app-main-bg-color)}.doc-page-pattern .eui-tabs .eui-tabs__items{background-color:#f0f0f0}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:#fff}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:1rem}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%;background-color:var(--eui-app-main-bg-color)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i2$2.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["avatarUrl", "expandLabel", "collapseLabel", "iconClass", "avatarDerscription", "iconDescription", "isHeaderBodyOnly", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i2$2.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i2$2.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i3$1.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i3$1.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i3$1.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i3$1.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i4$1.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
1149
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: DocPagePatternComponent, decorators: [{
1154
+ /** @nocollapse */ DocPagePatternComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternComponent, deps: [{ token: i3$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
1155
+ /** @nocollapse */ DocPagePatternComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", anatomyRefs: "anatomyRefs", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternSampleDirective; }), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(function () { return DocPagePatternDocDirective; }), descendants: true }], usesInheritance: true, ngImport: i0, template: "<eui-tabs>\n <eui-tab>\n <euiTabLabel>\n Usage and documentation\n </euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n <h3>Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <h3 class=\"mt-5\">Anatomy</h3>\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n </ng-template>\n\n <ng-container *ngIf=\"anatomyRefs.length !== 0\">\n <h3 class=\"mt-5\">Ananomy references</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of anatomyRefs\">\n <td><eui-badge>{{ref.id}}</eui-badge></td>\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-success-100\">Do's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of dos\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"donts.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-danger-100\">Dont's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of donts\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <h3 class=\"mt-5\">Figma resource</h3>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img width=\"32\" height=\"32\" alt=\"Figma Logo\" src=\"data:image/png;base64,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\">\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a class=\"h5 eui-u-text-link-external\" href=\"https://www.figma.com/file/E2mR8Kd0cmoVkiwpRUzHJL/{{figmaUrl}}\" target=\"blank\"><span class=\"eui-u-color-grey-75\">Layout component /</span> {{label}}</a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>\n Pattern sample\n </euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n</eui-tabs>\n\n<eui-showcase-doc-page-code-fab codeFolder=\"{{sourceUrl}}\"></eui-showcase-doc-page-code-fab>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:1.5rem;background-color:#f0f0f0}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;background-color:var(--eui-app-main-bg-color)}.doc-page-pattern .eui-tabs .eui-tabs__items{background-color:#f0f0f0}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:#fff}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:1rem}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%;background-color:var(--eui-app-main-bg-color)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["onCollapsed", "collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["avatarUrl", "expandLabel", "collapseLabel", "iconClass", "avatarDerscription", "iconDescription", "isHeaderBodyOnly", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i3$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i3$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i6.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isSubTabs", "isVerticalTabs"], outputs: ["tabClosed", "tabSelected", "tabClose", "tabSelect"] }, { kind: "component", type: i6.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i6.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i6.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i5.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: ["codeFolder", "showcase"] }], encapsulation: i0.ViewEncapsulation.None });
1156
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DocPagePatternComponent, decorators: [{
1150
1157
  type: Component,
1151
- args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, template: "<eui-tabs>\n <eui-tab>\n <euiTabLabel>\n Usage and documentation\n </euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n <h3>Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <h3 class=\"mt-5\">Anatomy</h3>\n <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n\n <ng-container *ngIf=\"anatomyRefs.length !== 0\">\n <h3 class=\"mt-5\">Ananomy references</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of anatomyRefs\">\n <td><eui-badge>{{ref.id}}</eui-badge></td>\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-success-100\">Do's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of dos\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"donts.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-danger-100\">Dont's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of donts\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <!-- v15 TEMP just for testing\n <iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"650\"\n src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FjQ9htWvSM8SWTPuk3hoigc%2FeUI-Desktop-Patterns%3Fnode-id%3D734%253A12516\" allowfullscreen></iframe> -->\n\n <h3 class=\"mt-5\">Figma resource</h3>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img width=\"32\" height=\"32\" alt=\"Figma Logo\" src=\"data:image/png;base64,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\">\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a class=\"h5 eui-u-text-link-external\" href=\"https://www.figma.com/file/E2mR8Kd0cmoVkiwpRUzHJL/{{figmaUrl}}\" target=\"blank\"><span class=\"eui-u-color-grey-75\">Layout component /</span> {{label}}</a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>\n Pattern sample\n </euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n</eui-tabs>\n\n<eui-showcase-doc-page-code-fab codeFolder=\"{{sourceUrl}}\"></eui-showcase-doc-page-code-fab>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:1.5rem;background-color:#f0f0f0}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;background-color:var(--eui-app-main-bg-color)}.doc-page-pattern .eui-tabs .eui-tabs__items{background-color:#f0f0f0}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:#fff}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:1rem}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%;background-color:var(--eui-app-main-bg-color)}\n"] }]
1152
- }], ctorParameters: function () { return []; }, propDecorators: { cssClasses: [{
1158
+ args: [{ selector: 'eui-showcase-doc-page-pattern', encapsulation: ViewEncapsulation.None, template: "<eui-tabs>\n <eui-tab>\n <euiTabLabel>\n Usage and documentation\n </euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-color-primary-100\">{{label}}</h2>\n\n <h3>Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <h3 class=\"mt-5\">Anatomy</h3>\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <img src=\"assets/images/design-system/{{anatomyImage}}.png\" width=\"60%\"/>\n </ng-template>\n\n <ng-container *ngIf=\"anatomyRefs.length !== 0\">\n <h3 class=\"mt-5\">Ananomy references</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of anatomyRefs\">\n <td><eui-badge>{{ref.id}}</eui-badge></td>\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-success-100\">Do's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of dos\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"donts.length !== 0\">\n <h3 class=\"mt-5 eui-u-color-danger-100\">Dont's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of donts\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <h3 class=\"mt-5\">Figma resource</h3>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img width=\"32\" height=\"32\" alt=\"Figma Logo\" src=\"data:image/png;base64,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\">\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a class=\"h5 eui-u-text-link-external\" href=\"https://www.figma.com/file/E2mR8Kd0cmoVkiwpRUzHJL/{{figmaUrl}}\" target=\"blank\"><span class=\"eui-u-color-grey-75\">Layout component /</span> {{label}}</a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>\n Pattern sample\n </euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n</eui-tabs>\n\n<eui-showcase-doc-page-code-fab codeFolder=\"{{sourceUrl}}\"></eui-showcase-doc-page-code-fab>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:1.5rem;background-color:#f0f0f0}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;background-color:var(--eui-app-main-bg-color)}.doc-page-pattern .eui-tabs .eui-tabs__items{background-color:#f0f0f0}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:#fff}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:1rem}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%;background-color:var(--eui-app-main-bg-color)}\n"] }]
1159
+ }], ctorParameters: function () { return [{ type: i3$2.DomSanitizer }]; }, propDecorators: { cssClasses: [{
1153
1160
  type: HostBinding,
1154
1161
  args: ['class']
1155
1162
  }], sampleContent: [{
@@ -1174,6 +1181,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
1174
1181
  type: Input
1175
1182
  }], figmaUrl: [{
1176
1183
  type: Input
1184
+ }], figmaEmbedSrc: [{
1185
+ type: Input
1177
1186
  }] } });
1178
1187
 
1179
1188
  const COMPONENTS = [
@@ -1206,8 +1215,8 @@ const COMPONENTS = [
1206
1215
  ];
1207
1216
  class EuiShowcaseModule {
1208
1217
  }
1209
- /** @nocollapse */ EuiShowcaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1210
- /** @nocollapse */ EuiShowcaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
1218
+ /** @nocollapse */ EuiShowcaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1219
+ /** @nocollapse */ EuiShowcaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, declarations: [EuiCodeHighlighterDirective,
1211
1220
  DocPageComponent,
1212
1221
  DocPageCodeComponent,
1213
1222
  DocPageCodeFabComponent,
@@ -1267,7 +1276,7 @@ class EuiShowcaseModule {
1267
1276
  DocPagePatternComponent,
1268
1277
  DocPagePatternDocDirective,
1269
1278
  DocPagePatternSampleDirective] });
1270
- /** @nocollapse */ EuiShowcaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, imports: [CommonModule,
1279
+ /** @nocollapse */ EuiShowcaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, imports: [CommonModule,
1271
1280
  EuiCardModule,
1272
1281
  EuiButtonModule,
1273
1282
  EuiTabsModule,
@@ -1277,7 +1286,7 @@ class EuiShowcaseModule {
1277
1286
  EuiAlertModule,
1278
1287
  EuiBlockContentModule,
1279
1288
  EuiBadgeModule] });
1280
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: EuiShowcaseModule, decorators: [{
1289
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiShowcaseModule, decorators: [{
1281
1290
  type: NgModule,
1282
1291
  args: [{
1283
1292
  declarations: [...COMPONENTS],