@eui/showcase 18.0.0-next.38 → 18.0.0-next.39

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.
@@ -407,13 +407,13 @@ ${contents}`;
407
407
  return lastValueFrom(this.http.get("assets/app-metadata.json", { responseType: "json" })).then((res) => res?.appVersion || "latest");
408
408
  }
409
409
  static {
410
- this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: _StackblitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
410
+ this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: _StackblitzService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
411
411
  }
412
412
  static {
413
- this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: _StackblitzService });
413
+ this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: _StackblitzService });
414
414
  }
415
415
  };
416
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: StackblitzService, decorators: [{
416
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i0, type: StackblitzService, decorators: [{
417
417
  type: Injectable
418
418
  }] });
419
419
 
@@ -430,13 +430,13 @@ var EuiCodeHighlighterDirective = class _EuiCodeHighlighterDirective {
430
430
  }
431
431
  }
432
432
  static {
433
- this.ɵfac = i02.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i02, type: _EuiCodeHighlighterDirective, deps: [{ token: i02.ElementRef }], target: i02.ɵɵFactoryTarget.Directive });
433
+ this.ɵfac = i02.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i02, type: _EuiCodeHighlighterDirective, deps: [{ token: i02.ElementRef }], target: i02.ɵɵFactoryTarget.Directive });
434
434
  }
435
435
  static {
436
- this.ɵdir = i02.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i02 });
436
+ this.ɵdir = i02.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _EuiCodeHighlighterDirective, selector: "[euiCode]", ngImport: i02 });
437
437
  }
438
438
  };
439
- i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i02, type: EuiCodeHighlighterDirective, decorators: [{
439
+ i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i02, type: EuiCodeHighlighterDirective, decorators: [{
440
440
  type: Directive,
441
441
  args: [{
442
442
  selector: "[euiCode]"
@@ -611,13 +611,13 @@ var DocSampleComponent = class _DocSampleComponent {
611
611
  }));
612
612
  }
613
613
  static {
614
- this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: _DocSampleComponent, deps: [{ token: StackblitzService }, { token: i2.HttpClient }, { token: i3.EuiAppShellService }, { token: i03.ChangeDetectorRef }, { token: i3.EuiGrowlService }, { token: i4.Clipboard }, { token: i5.Router }], target: i03.ɵɵFactoryTarget.Component });
614
+ this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i03, type: _DocSampleComponent, deps: [{ token: StackblitzService }, { token: i2.HttpClient }, { token: i3.EuiAppShellService }, { token: i03.ChangeDetectorRef }, { token: i3.EuiGrowlService }, { token: i4.Clipboard }, { token: i5.Router }], target: i03.ɵɵFactoryTarget.Component });
615
615
  }
616
616
  static {
617
- this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute], isInnerSection: ["isInnerSection", "isInnerSection", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i03, template: '<div class="doc-sample-title">\n <div class="doc-sample-title__label" [class.doc-sample-title__label--inner]="isInnerSection">\n {{ label }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)="copyCurrentUrlToClipboard(id)"\n class="doc-sample-title__link"\n tabindex="-1">\n <eui-icon-svg icon="link" set="outline" size="l" fillColor="grey-75"></eui-icon-svg>\n </button>\n </div>\n <div *ngIf="renderPlayground" class="doc-sample-title__items" style="margin-right: 3px">\n <button\n *ngIf="isCodeButtonVisible"\n type="button"\n euiButton\n [euiOutline]="!isCodeExpanded"\n euiPrimary\n euiSizeS\n (click)="onStackblitzOpen()">\n <span *ngIf="!isCodeExpanded" euiLabel>Stackblitz</span>\n <eui-icon-svg set="sharp" icon="expand"></eui-icon-svg>\n </button>\n </div>\n <div class="doc-sample-title__items">\n <button\n *ngIf="isCodeButtonVisible"\n type="button"\n euiButton\n [euiOutline]="!isCodeExpanded"\n euiPrimary\n euiSizeS\n (click)="onToggleCode()"\n [euiDisabled]="isCodeLoading">\n <eui-icon-svg *ngIf="isCodeLoading" isLoading></eui-icon-svg>\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-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-base-spacing-2xl);margin-top:var(--eui-base-spacing-4xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-c-secondary-bg)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%;letter-spacing:-.75px;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-secondary-light);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;letter-spacing:-.5px;margin:var(--eui-base-spacing-2xl) 0 var(--eui-base-spacing-xs) 0!important;width:auto;display:table;color:var(--eui-c-info-dark);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-base-spacing-m)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i7.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i8.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i9.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i9.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i9.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i9.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i9.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i11.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }], encapsulation: i03.ViewEncapsulation.None });
617
+ this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.5", type: _DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute], isInnerSection: ["isInnerSection", "isInnerSection", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i03, template: '<div class="doc-sample-title">\n <div class="doc-sample-title__label" [class.doc-sample-title__label--inner]="isInnerSection">\n {{ label }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)="copyCurrentUrlToClipboard(id)"\n class="doc-sample-title__link"\n tabindex="-1">\n <eui-icon-svg icon="link" set="outline" size="l" fillColor="grey-75"></eui-icon-svg>\n </button>\n </div>\n <div *ngIf="renderPlayground" class="doc-sample-title__items" style="margin-right: 3px">\n <button\n *ngIf="isCodeButtonVisible"\n type="button"\n euiButton\n [euiOutline]="!isCodeExpanded"\n euiPrimary\n euiSizeS\n (click)="onStackblitzOpen()">\n <span *ngIf="!isCodeExpanded" euiLabel>Stackblitz</span>\n <eui-icon-svg set="sharp" icon="expand"></eui-icon-svg>\n </button>\n </div>\n <div class="doc-sample-title__items">\n <button\n *ngIf="isCodeButtonVisible"\n type="button"\n euiButton\n [euiOutline]="!isCodeExpanded"\n euiPrimary\n euiSizeS\n (click)="onToggleCode()"\n [euiDisabled]="isCodeLoading">\n <eui-icon-svg *ngIf="isCodeLoading" isLoading></eui-icon-svg>\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-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-base-spacing-2xl);margin-top:var(--eui-base-spacing-4xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-c-secondary-bg)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%;letter-spacing:-.75px;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-secondary-light);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;letter-spacing:-.5px;margin:var(--eui-base-spacing-2xl) 0 var(--eui-base-spacing-xs) 0!important;width:auto;display:table;color:var(--eui-c-info-dark);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-base-spacing-m)!important}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i7.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i8.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i9.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i9.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i9.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i9.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i9.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i11.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }], encapsulation: i03.ViewEncapsulation.None });
618
618
  }
619
619
  };
620
- i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: DocSampleComponent, decorators: [{
620
+ i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i03, type: DocSampleComponent, decorators: [{
621
621
  type: Component,
622
622
  args: [{ selector: "eui-showcase-doc-sample", encapsulation: ViewEncapsulation.None, template: '<div class="doc-sample-title">\n <div class="doc-sample-title__label" [class.doc-sample-title__label--inner]="isInnerSection">\n {{ label }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)="copyCurrentUrlToClipboard(id)"\n class="doc-sample-title__link"\n tabindex="-1">\n <eui-icon-svg icon="link" set="outline" size="l" fillColor="grey-75"></eui-icon-svg>\n </button>\n </div>\n <div *ngIf="renderPlayground" class="doc-sample-title__items" style="margin-right: 3px">\n <button\n *ngIf="isCodeButtonVisible"\n type="button"\n euiButton\n [euiOutline]="!isCodeExpanded"\n euiPrimary\n euiSizeS\n (click)="onStackblitzOpen()">\n <span *ngIf="!isCodeExpanded" euiLabel>Stackblitz</span>\n <eui-icon-svg set="sharp" icon="expand"></eui-icon-svg>\n </button>\n </div>\n <div class="doc-sample-title__items">\n <button\n *ngIf="isCodeButtonVisible"\n type="button"\n euiButton\n [euiOutline]="!isCodeExpanded"\n euiPrimary\n euiSizeS\n (click)="onToggleCode()"\n [euiDisabled]="isCodeLoading">\n <eui-icon-svg *ngIf="isCodeLoading" isLoading></eui-icon-svg>\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-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-base-spacing-2xl);margin-top:var(--eui-base-spacing-4xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-c-secondary-bg)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%;letter-spacing:-.75px;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-secondary-light);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;letter-spacing:-.5px;margin:var(--eui-base-spacing-2xl) 0 var(--eui-base-spacing-xs) 0!important;width:auto;display:table;color:var(--eui-c-info-dark);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-base-spacing-m)!important}\n"] }]
623
623
  }], ctorParameters: () => [{ type: StackblitzService }, { type: i2.HttpClient }, { type: i3.EuiAppShellService }, { type: i03.ChangeDetectorRef }, { type: i3.EuiGrowlService }, { type: i4.Clipboard }, { type: i5.Router }], propDecorators: { id: [{
@@ -662,13 +662,13 @@ var DocSectionComponent = class _DocSectionComponent {
662
662
  }
663
663
  }
664
664
  static {
665
- this.ɵfac = i04.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i04, type: _DocSectionComponent, deps: [], target: i04.ɵɵFactoryTarget.Component });
665
+ this.ɵfac = i04.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i04, type: _DocSectionComponent, deps: [], target: i04.ɵɵFactoryTarget.Component });
666
666
  }
667
667
  static {
668
- this.ɵcmp = i04.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocSectionComponent, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, host: { properties: { "class": "this.string" } }, ngImport: i04, template: '<div id="sections" class="doc-section-title">{{label}}</div>\n<!-- <h4 id="sections" class="eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3">{{ label }}</h4> -->\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-base-spacing-4xl)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-base-spacing-m);margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-xs);border-bottom:1px solid var(--eui-c-secondary-lightest);font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-secondary-lighter);letter-spacing:-.25px;margin:var(--eui-base-spacing-2xl) 0 var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-2xs);width:auto;display:table;color:var(--eui-base-color-primary-120);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family)}.doc-sample-section-title:first-child{margin-top:0}\n"], encapsulation: i04.ViewEncapsulation.None });
668
+ this.ɵcmp = i04.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocSectionComponent, selector: "eui-showcase-doc-section", inputs: { id: "id", label: "label", styleClass: "styleClass" }, host: { properties: { "class": "this.string" } }, ngImport: i04, template: '<div id="sections" class="doc-section-title">{{label}}</div>\n<!-- <h4 id="sections" class="eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3">{{ label }}</h4> -->\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-base-spacing-4xl)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-base-spacing-m);margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-xs);border-bottom:1px solid var(--eui-c-secondary-lightest);font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-secondary-lighter);letter-spacing:-.25px;margin:var(--eui-base-spacing-2xl) 0 var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-2xs);width:auto;display:table;color:var(--eui-base-color-primary-120);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family)}.doc-sample-section-title:first-child{margin-top:0}\n"], encapsulation: i04.ViewEncapsulation.None });
669
669
  }
670
670
  };
671
- i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i04, type: DocSectionComponent, decorators: [{
671
+ i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i04, type: DocSectionComponent, decorators: [{
672
672
  type: Component2,
673
673
  args: [{ selector: "eui-showcase-doc-section", encapsulation: ViewEncapsulation3.None, template: '<div id="sections" class="doc-section-title">{{label}}</div>\n<!-- <h4 id="sections" class="eui-u-font-bold eui-u-color-info eui-u-text-h4 mb-3">{{ label }}</h4> -->\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-section{display:block;margin-bottom:var(--eui-base-spacing-4xl)}.doc-section-title{display:flex;align-items:center;width:100%;margin-top:var(--eui-base-spacing-m);margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-xs);border-bottom:1px solid var(--eui-c-secondary-lightest);font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family);font-weight:700}.doc-sample-section-title{border-bottom:1px solid var(--eui-c-secondary-lighter);letter-spacing:-.25px;margin:var(--eui-base-spacing-2xl) 0 var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-2xs);width:auto;display:table;color:var(--eui-base-color-primary-120);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family)}.doc-sample-section-title:first-child{margin-top:0}\n"] }]
674
674
  }], propDecorators: { string: [{
@@ -697,13 +697,13 @@ var DocPageCodeComponent = class _DocPageCodeComponent {
697
697
  window.open(sourceRootPath + this.codeFolder, "_blank");
698
698
  }
699
699
  static {
700
- this.ɵfac = i05.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i05, type: _DocPageCodeComponent, deps: [], target: i05.ɵɵFactoryTarget.Component });
700
+ this.ɵfac = i05.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i05, type: _DocPageCodeComponent, deps: [], target: i05.ɵɵFactoryTarget.Component });
701
701
  }
702
702
  static {
703
- this.ɵcmp = i05.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i05, template: '<button type="button" euiButton euiAccent (click)="onOpenCode()">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass="eui-icon eui-icon-code"></span>\n</button>\n', dependencies: [{ kind: "component", type: i1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i22.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] });
703
+ this.ɵcmp = i05.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i05, template: '<button type="button" euiButton euiAccent (click)="onOpenCode()">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass="eui-icon eui-icon-code"></span>\n</button>\n', dependencies: [{ kind: "component", type: i1.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i22.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] });
704
704
  }
705
705
  };
706
- i05.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i05, type: DocPageCodeComponent, decorators: [{
706
+ i05.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i05, type: DocPageCodeComponent, decorators: [{
707
707
  type: Component3,
708
708
  args: [{ selector: "eui-showcase-doc-page-code", template: '<button type="button" euiButton euiAccent (click)="onOpenCode()">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass="eui-icon eui-icon-code"></span>\n</button>\n' }]
709
709
  }], propDecorators: { codeFolder: [{
@@ -953,10 +953,10 @@ var DocPageComponent = class _DocPageComponent {
953
953
  return result;
954
954
  }
955
955
  static {
956
- this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: _DocPageComponent, deps: [{ token: i12.Router }, { token: i12.ActivatedRoute }, { token: i23.EuiAppShellService }, { token: i32.DomSanitizer }, { token: i42.Location }], target: i06.ɵɵFactoryTarget.Component });
956
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: _DocPageComponent, deps: [{ token: i12.Router }, { token: i12.ActivatedRoute }, { token: i23.EuiAppShellService }, { token: i32.DomSanitizer }, { token: i42.Location }], target: i06.ɵɵFactoryTarget.Component });
957
957
  }
958
958
  static {
959
- this.ɵcmp = i06.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i06.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i06.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i06.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i06.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i06.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i06.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i06.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i06.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i06, template: `<div class="doc-page-navigation-wrapper" [class.eui-u-hidden]="isLoading">
959
+ this.ɵcmp = i06.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageComponent, selector: "eui-showcase-doc-page", inputs: { id: "id", label: "label", subLabel: "subLabel", isNotReady: "isNotReady", isDeprecated: "isDeprecated", isLegacy: "isLegacy", codeFolder: "codeFolder", showcase: "showcase", isNavigationVisible: "isNavigationVisible", hasApi: "hasApi", hasA11y: "hasA11y" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true }, { propertyName: "pageOverviewContent", predicate: i06.forwardRef(() => DocPageOverviewContentDirective) }, { propertyName: "pageOverviewDefaultContent", predicate: i06.forwardRef(() => DocPageOverviewDefaultContentDirective) }, { propertyName: "pageSamplesContent", predicate: i06.forwardRef(() => DocPageSamplesContentDirective) }, { propertyName: "pageSectionsContent", predicate: i06.forwardRef(() => DocPageSectionsContentDirective) }, { propertyName: "pageInteractiveContent", predicate: i06.forwardRef(() => DocPageInteractiveContentDirective) }, { propertyName: "pageAccessibilityContent", predicate: i06.forwardRef(() => DocPageAccessibilityContentDirective) }, { propertyName: "pageApiContent", predicate: i06.forwardRef(() => DocPageApiContentDirective) }, { propertyName: "pageThemingContent", predicate: i06.forwardRef(() => DocPageThemingContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], ngImport: i06, template: `<div class="doc-page-navigation-wrapper" [class.eui-u-hidden]="isLoading">
960
960
  <div class="doc-page-main-column">
961
961
  <eui-page>
962
962
  <eui-page-header label="{{ label }}" subLabel="{{ subLabel }}">
@@ -968,7 +968,8 @@ var DocPageComponent = class _DocPageComponent {
968
968
  <eui-chip
969
969
  *ngIf="stateLabel"
970
970
  [euiSuccess]="stateLabel === 'ACTIVE'"
971
- [euiWarning]="stateLabel === 'DEPRECATED - will be removed in eUI 18'"
971
+ [euiInfo]="isNotReady"
972
+ [euiWarning]="isDeprecated"
972
973
  [euiDanger]="isLegacy">
973
974
  <span euiLabel>
974
975
  <strong>{{ stateLabel }}</strong>
@@ -980,7 +981,7 @@ var DocPageComponent = class _DocPageComponent {
980
981
  <eui-page-content>
981
982
  <eui-alert *ngIf="stateLabel === 'LEGACY' || isLegacy" euiDanger class="eui-u-mb-xl">
982
983
  <eui-alert-title>LEGACY component</eui-alert-title>
983
- <strong class="eui-u-color-danger">This component will be removed in eUI 18 release (end of 2023)</strong>
984
+ <strong class="eui-u-color-danger">This component will be removed in eUI 19 release (end of 2024)</strong>
984
985
  <div *ngIf="cmp">
985
986
  <div *ngIf="cmp.cmpReplacement !== 'NONE'">
986
987
  It has been replaced by :
@@ -1301,7 +1302,7 @@ var DocPageComponent = class _DocPageComponent {
1301
1302
  `, 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-c-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-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-wrapper .language-javascript [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:0!important;transition:none}.doc-page-navigation-title{padding:var(--eui-base-spacing-s);font:normal normal 400 1.75rem/2.5rem var(--eui-base-font-family)}.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-c-secondary-bg-light)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-c-bg0);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-lighter)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-bg-light);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-c-info-dark);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;color:var(--eui-c-info-dark);padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-bg-light);border-left:2px solid var(--eui-c-info-dark)}.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-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-bg-light);border-left:2px solid var(--eui-c-secondary-lightest)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-info-bg);border-left:2px solid var(--eui-c-info-dark)}.doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-base-spacing-l)}.doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-base-spacing-m);color:var(--eui-c-text);margin-top:var(--eui-base-spacing-m);font-weight:700}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-base-spacing-2xl);margin-bottom:var(--eui-base-spacing-xl);color:var(--eui-c-info-dark);letter-spacing:-1px;font:normal normal 400 1.75rem/2.5rem var(--eui-base-font-family);font-weight:700}.doc-page-section-subtitle{border-bottom:1px solid var(--eui-c-secondary-lighter);font-size:var(--eui-base-font-size-l);font-weight:500;letter-spacing:-.25px;margin:var(--eui-base-spacing-xl) 0 var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-2xs);width:auto;display:table;color:var(--eui-c-secondary-light)}@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: i42.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i42.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i52.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i52.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i52.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i52.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i62.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i62.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i62.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i62.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i72.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i82.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["ariaDescribedBy", "e2eAttr", "isMuted", "isCloseable", "isFocusable"], outputs: ["closeAlert"] }, { kind: "component", type: i82.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i92.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }, { kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }], encapsulation: i06.ViewEncapsulation.None });
1302
1303
  }
1303
1304
  };
1304
- i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: DocPageComponent, decorators: [{
1305
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: DocPageComponent, decorators: [{
1305
1306
  type: Component4,
1306
1307
  args: [{ selector: "eui-showcase-doc-page", encapsulation: ViewEncapsulation5.None, template: `<div class="doc-page-navigation-wrapper" [class.eui-u-hidden]="isLoading">
1307
1308
  <div class="doc-page-main-column">
@@ -1315,7 +1316,8 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
1315
1316
  <eui-chip
1316
1317
  *ngIf="stateLabel"
1317
1318
  [euiSuccess]="stateLabel === 'ACTIVE'"
1318
- [euiWarning]="stateLabel === 'DEPRECATED - will be removed in eUI 18'"
1319
+ [euiInfo]="isNotReady"
1320
+ [euiWarning]="isDeprecated"
1319
1321
  [euiDanger]="isLegacy">
1320
1322
  <span euiLabel>
1321
1323
  <strong>{{ stateLabel }}</strong>
@@ -1327,7 +1329,7 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
1327
1329
  <eui-page-content>
1328
1330
  <eui-alert *ngIf="stateLabel === 'LEGACY' || isLegacy" euiDanger class="eui-u-mb-xl">
1329
1331
  <eui-alert-title>LEGACY component</eui-alert-title>
1330
- <strong class="eui-u-color-danger">This component will be removed in eUI 18 release (end of 2023)</strong>
1332
+ <strong class="eui-u-color-danger">This component will be removed in eUI 19 release (end of 2024)</strong>
1331
1333
  <div *ngIf="cmp">
1332
1334
  <div *ngIf="cmp.cmpReplacement !== 'NONE'">
1333
1335
  It has been replaced by :
@@ -1704,25 +1706,25 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
1704
1706
  }] } });
1705
1707
  var DocPageOverviewContentDirective = class _DocPageOverviewContentDirective {
1706
1708
  static {
1707
- this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: _DocPageOverviewContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1709
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: _DocPageOverviewContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1708
1710
  }
1709
1711
  static {
1710
- this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i06 });
1712
+ this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageOverviewContentDirective, selector: "docPageOverview", ngImport: i06 });
1711
1713
  }
1712
1714
  };
1713
- i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: DocPageOverviewContentDirective, decorators: [{
1715
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: DocPageOverviewContentDirective, decorators: [{
1714
1716
  type: Directive2,
1715
1717
  args: [{ selector: "docPageOverview" }]
1716
1718
  }] });
1717
1719
  var DocPageOverviewDefaultContentDirective = class _DocPageOverviewDefaultContentDirective {
1718
1720
  static {
1719
- this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: _DocPageOverviewDefaultContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1721
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: _DocPageOverviewDefaultContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1720
1722
  }
1721
1723
  static {
1722
- this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageOverviewDefaultContentDirective, selector: "docPageOverviewDefault", ngImport: i06 });
1724
+ this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageOverviewDefaultContentDirective, selector: "docPageOverviewDefault", ngImport: i06 });
1723
1725
  }
1724
1726
  };
1725
- i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: DocPageOverviewDefaultContentDirective, decorators: [{
1727
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: DocPageOverviewDefaultContentDirective, decorators: [{
1726
1728
  type: Directive2,
1727
1729
  args: [{ selector: "docPageOverviewDefault" }]
1728
1730
  }] });
@@ -1732,13 +1734,13 @@ var DocPageInteractiveContentDirective = class _DocPageInteractiveContentDirecti
1732
1734
  this.subTitle = "Advanced use cases";
1733
1735
  }
1734
1736
  static {
1735
- this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: _DocPageInteractiveContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1737
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: _DocPageInteractiveContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1736
1738
  }
1737
1739
  static {
1738
- this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i06 });
1740
+ this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageInteractiveContentDirective, selector: "docPageInteractive", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i06 });
1739
1741
  }
1740
1742
  };
1741
- i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: DocPageInteractiveContentDirective, decorators: [{
1743
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: DocPageInteractiveContentDirective, decorators: [{
1742
1744
  type: Directive2,
1743
1745
  args: [{ selector: "docPageInteractive" }]
1744
1746
  }], propDecorators: { title: [{
@@ -1748,61 +1750,61 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
1748
1750
  }] } });
1749
1751
  var DocPageSamplesContentDirective = class _DocPageSamplesContentDirective {
1750
1752
  static {
1751
- this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: _DocPageSamplesContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1753
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: _DocPageSamplesContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1752
1754
  }
1753
1755
  static {
1754
- this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i06 });
1756
+ this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageSamplesContentDirective, selector: "docPageSamples", ngImport: i06 });
1755
1757
  }
1756
1758
  };
1757
- i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: DocPageSamplesContentDirective, decorators: [{
1759
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: DocPageSamplesContentDirective, decorators: [{
1758
1760
  type: Directive2,
1759
1761
  args: [{ selector: "docPageSamples" }]
1760
1762
  }] });
1761
1763
  var DocPageSectionsContentDirective = class _DocPageSectionsContentDirective {
1762
1764
  static {
1763
- this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: _DocPageSectionsContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1765
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: _DocPageSectionsContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1764
1766
  }
1765
1767
  static {
1766
- this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i06 });
1768
+ this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageSectionsContentDirective, selector: "docPageSections", ngImport: i06 });
1767
1769
  }
1768
1770
  };
1769
- i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: DocPageSectionsContentDirective, decorators: [{
1771
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: DocPageSectionsContentDirective, decorators: [{
1770
1772
  type: Directive2,
1771
1773
  args: [{ selector: "docPageSections" }]
1772
1774
  }] });
1773
1775
  var DocPageAccessibilityContentDirective = class _DocPageAccessibilityContentDirective {
1774
1776
  static {
1775
- this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: _DocPageAccessibilityContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1777
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: _DocPageAccessibilityContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1776
1778
  }
1777
1779
  static {
1778
- this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i06 });
1780
+ this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageAccessibilityContentDirective, selector: "docPageAccessibility", ngImport: i06 });
1779
1781
  }
1780
1782
  };
1781
- i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: DocPageAccessibilityContentDirective, decorators: [{
1783
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: DocPageAccessibilityContentDirective, decorators: [{
1782
1784
  type: Directive2,
1783
1785
  args: [{ selector: "docPageAccessibility" }]
1784
1786
  }] });
1785
1787
  var DocPageApiContentDirective = class _DocPageApiContentDirective {
1786
1788
  static {
1787
- this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: _DocPageApiContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1789
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: _DocPageApiContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1788
1790
  }
1789
1791
  static {
1790
- this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageApiContentDirective, selector: "docPageApi", ngImport: i06 });
1792
+ this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageApiContentDirective, selector: "docPageApi", ngImport: i06 });
1791
1793
  }
1792
1794
  };
1793
- i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: DocPageApiContentDirective, decorators: [{
1795
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: DocPageApiContentDirective, decorators: [{
1794
1796
  type: Directive2,
1795
1797
  args: [{ selector: "docPageApi" }]
1796
1798
  }] });
1797
1799
  var DocPageThemingContentDirective = class _DocPageThemingContentDirective {
1798
1800
  static {
1799
- this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: _DocPageThemingContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1801
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: _DocPageThemingContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1800
1802
  }
1801
1803
  static {
1802
- this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i06 });
1804
+ this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageThemingContentDirective, selector: "docPageTheming", ngImport: i06 });
1803
1805
  }
1804
1806
  };
1805
- i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i06, type: DocPageThemingContentDirective, decorators: [{
1807
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i06, type: DocPageThemingContentDirective, decorators: [{
1806
1808
  type: Directive2,
1807
1809
  args: [{ selector: "docPageTheming" }]
1808
1810
  }] });
@@ -1812,13 +1814,13 @@ import { Component as Component5 } from "@angular/core";
1812
1814
  import * as i07 from "@angular/core";
1813
1815
  var DocSampleApiComponent = class _DocSampleApiComponent {
1814
1816
  static {
1815
- this.ɵfac = i07.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i07, type: _DocSampleApiComponent, deps: [], target: i07.ɵɵFactoryTarget.Component });
1817
+ this.ɵfac = i07.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i07, type: _DocSampleApiComponent, deps: [], target: i07.ɵɵFactoryTarget.Component });
1816
1818
  }
1817
1819
  static {
1818
- this.ɵcmp = i07.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i07, template: "" });
1820
+ this.ɵcmp = i07.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocSampleApiComponent, selector: "eui-showcase-doc-sample-api", ngImport: i07, template: "" });
1819
1821
  }
1820
1822
  };
1821
- i07.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i07, type: DocSampleApiComponent, decorators: [{
1823
+ i07.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i07, type: DocSampleApiComponent, decorators: [{
1822
1824
  type: Component5,
1823
1825
  args: [{ selector: "eui-showcase-doc-sample-api", template: "" }]
1824
1826
  }] });
@@ -1843,13 +1845,13 @@ var DocSectionCodeComponent = class _DocSectionCodeComponent {
1843
1845
  return object;
1844
1846
  }
1845
1847
  static {
1846
- this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: _DocSectionCodeComponent, deps: [], target: i08.ɵɵFactoryTarget.Component });
1848
+ this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: _DocSectionCodeComponent, deps: [], target: i08.ɵɵFactoryTarget.Component });
1847
1849
  }
1848
1850
  static {
1849
- this.ɵcmp = i08.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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: i08.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i08.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i08.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i08.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i08.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i08.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true }], ngImport: i08, template: '<h5 class="section-title {{ styleClass }}">\n <div class="eui-u-flex eui-u-flex-justify-content-between">\n <div [class.app-section-code--deprecated]="isDeprecated">\n {{ label }}\n </div>\n <div class="ml-auto">\n <span *ngIf="versionLabel" class="eui-u-color-danger">{{ versionLabel }}</span>\n <button type="button" euiButton [euiOutline]="!isCodeExpanded" euiPrimary euiSizeS (click)="toggleCode()">\n <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n <span euiIcon iconClass="eui-icon-code"></span>\n </button>\n </div>\n </div>\n <div *ngIf="isDeprecated">\n <small class="eui-u-color-danger">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class="eui-u-mv" *ngIf="sectionDescription">\n <ng-content select="sectionDescription"></ng-content>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n <eui-tabs>\n <eui-tab [isVisible]="isDefined(sectionCodeHTML)">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-markup" euiCode><ng-content select="sectionCodeHTML"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeTS)">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeTS"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeSERVICE)">\n <euiTabLabel>Service</euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeSERVICE"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeCSS)">\n <euiTabLabel>CSS</euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeCSS"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeDOC)">\n <euiTabLabel>\n DOC\n <euiTabSubLabel>Documentation</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <div class="language-doc">\n <ng-content select="sectionCodeDOC"></ng-content>\n </div>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]="!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS">\n <pre class="only-html"><code class="language-markup" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\n', styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i24.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i33.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i33.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i33.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i33.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i33.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i43.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
1851
+ this.ɵcmp = i08.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", 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: i08.forwardRef(() => DocSectionCodeDescriptionTagDirective), descendants: true }, { propertyName: "sectionCodeHTML", first: true, predicate: i08.forwardRef(() => DocSectionCodeHtmlTagDirective), descendants: true }, { propertyName: "sectionCodeTS", first: true, predicate: i08.forwardRef(() => DocSectionCodeTsTagDirective), descendants: true }, { propertyName: "sectionCodeSERVICE", first: true, predicate: i08.forwardRef(() => DocSectionCodeServiceTagDirective), descendants: true }, { propertyName: "sectionCodeCSS", first: true, predicate: i08.forwardRef(() => DocSectionCodeCssTagDirective), descendants: true }, { propertyName: "sectionCodeDOC", first: true, predicate: i08.forwardRef(() => DocSectionCodeDocTagDirective), descendants: true }], ngImport: i08, template: '<h5 class="section-title {{ styleClass }}">\n <div class="eui-u-flex eui-u-flex-justify-content-between">\n <div [class.app-section-code--deprecated]="isDeprecated">\n {{ label }}\n </div>\n <div class="ml-auto">\n <span *ngIf="versionLabel" class="eui-u-color-danger">{{ versionLabel }}</span>\n <button type="button" euiButton [euiOutline]="!isCodeExpanded" euiPrimary euiSizeS (click)="toggleCode()">\n <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n <span euiIcon iconClass="eui-icon-code"></span>\n </button>\n </div>\n </div>\n <div *ngIf="isDeprecated">\n <small class="eui-u-color-danger">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class="eui-u-mv" *ngIf="sectionDescription">\n <ng-content select="sectionDescription"></ng-content>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n <eui-tabs>\n <eui-tab [isVisible]="isDefined(sectionCodeHTML)">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-markup" euiCode><ng-content select="sectionCodeHTML"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeTS)">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeTS"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeSERVICE)">\n <euiTabLabel>Service</euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeSERVICE"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeCSS)">\n <euiTabLabel>CSS</euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeCSS"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeDOC)">\n <euiTabLabel>\n DOC\n <euiTabSubLabel>Documentation</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <div class="language-doc">\n <ng-content select="sectionCodeDOC"></ng-content>\n </div>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]="!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS">\n <pre class="only-html"><code class="language-markup" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\n', styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"], dependencies: [{ kind: "directive", type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i24.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i33.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i33.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "component", type: i33.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i33.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i33.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i43.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }] });
1850
1852
  }
1851
1853
  };
1852
- i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: DocSectionCodeComponent, decorators: [{
1854
+ i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: DocSectionCodeComponent, decorators: [{
1853
1855
  type: Component6,
1854
1856
  args: [{ selector: "eui-showcase-doc-section-code", template: '<h5 class="section-title {{ styleClass }}">\n <div class="eui-u-flex eui-u-flex-justify-content-between">\n <div [class.app-section-code--deprecated]="isDeprecated">\n {{ label }}\n </div>\n <div class="ml-auto">\n <span *ngIf="versionLabel" class="eui-u-color-danger">{{ versionLabel }}</span>\n <button type="button" euiButton [euiOutline]="!isCodeExpanded" euiPrimary euiSizeS (click)="toggleCode()">\n <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n <span euiIcon iconClass="eui-icon-code"></span>\n </button>\n </div>\n </div>\n <div *ngIf="isDeprecated">\n <small class="eui-u-color-danger">Deprecated in 3.x</small>\n </div>\n</h5>\n\n<div class="eui-u-mv" *ngIf="sectionDescription">\n <ng-content select="sectionDescription"></ng-content>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n <eui-tabs>\n <eui-tab [isVisible]="isDefined(sectionCodeHTML)">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-markup" euiCode><ng-content select="sectionCodeHTML"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeTS)">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeTS"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeSERVICE)">\n <euiTabLabel>Service</euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeSERVICE"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeCSS)">\n <euiTabLabel>CSS</euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode><ng-content select="sectionCodeCSS"></ng-content></code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="isDefined(sectionCodeDOC)">\n <euiTabLabel>\n DOC\n <euiTabSubLabel>Documentation</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <div class="language-doc">\n <ng-content select="sectionCodeDOC"></ng-content>\n </div>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n <ng-template [ngIf]="!sectionCodeHTML && !sectionCodeTS && !sectionCodeCSS">\n <pre class="only-html"><code class="language-markup" euiCode><ng-content></ng-content></code></pre>\n </ng-template>\n</ng-template>\n', styles: [".eui-showcase-doc-section-code--deprecated{color:red;text-decoration:line-through}.language-doc{background-color:#f5f8fb;border-left:10px solid #358ccb;box-shadow:-1px 0 #358ccb,0 0 0 1px #dfdfdf;display:block;height:inherit;max-height:inherit;overflow:auto;padding:1rem;position:relative}.first-section{margin-top:0;padding-top:10px}\n"] }]
1855
1857
  }], propDecorators: { label: [{
@@ -1885,73 +1887,73 @@ i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
1885
1887
  }] } });
1886
1888
  var DocSectionCodeDescriptionTagDirective = class _DocSectionCodeDescriptionTagDirective {
1887
1889
  static {
1888
- this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: _DocSectionCodeDescriptionTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1890
+ this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: _DocSectionCodeDescriptionTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1889
1891
  }
1890
1892
  static {
1891
- this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i08 });
1893
+ this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocSectionCodeDescriptionTagDirective, selector: "sectionDescription", ngImport: i08 });
1892
1894
  }
1893
1895
  };
1894
- i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: DocSectionCodeDescriptionTagDirective, decorators: [{
1896
+ i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: DocSectionCodeDescriptionTagDirective, decorators: [{
1895
1897
  type: Directive3,
1896
1898
  args: [{ selector: "sectionDescription" }]
1897
1899
  }] });
1898
1900
  var DocSectionCodeHtmlTagDirective = class _DocSectionCodeHtmlTagDirective {
1899
1901
  static {
1900
- this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: _DocSectionCodeHtmlTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1902
+ this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: _DocSectionCodeHtmlTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1901
1903
  }
1902
1904
  static {
1903
- this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i08 });
1905
+ this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocSectionCodeHtmlTagDirective, selector: "sectionCodeHTML", ngImport: i08 });
1904
1906
  }
1905
1907
  };
1906
- i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: DocSectionCodeHtmlTagDirective, decorators: [{
1908
+ i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: DocSectionCodeHtmlTagDirective, decorators: [{
1907
1909
  type: Directive3,
1908
1910
  args: [{ selector: "sectionCodeHTML" }]
1909
1911
  }] });
1910
1912
  var DocSectionCodeTsTagDirective = class _DocSectionCodeTsTagDirective {
1911
1913
  static {
1912
- this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: _DocSectionCodeTsTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1914
+ this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: _DocSectionCodeTsTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1913
1915
  }
1914
1916
  static {
1915
- this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i08 });
1917
+ this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocSectionCodeTsTagDirective, selector: "sectionCodeTS", ngImport: i08 });
1916
1918
  }
1917
1919
  };
1918
- i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: DocSectionCodeTsTagDirective, decorators: [{
1920
+ i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: DocSectionCodeTsTagDirective, decorators: [{
1919
1921
  type: Directive3,
1920
1922
  args: [{ selector: "sectionCodeTS" }]
1921
1923
  }] });
1922
1924
  var DocSectionCodeServiceTagDirective = class _DocSectionCodeServiceTagDirective {
1923
1925
  static {
1924
- this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: _DocSectionCodeServiceTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1926
+ this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: _DocSectionCodeServiceTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1925
1927
  }
1926
1928
  static {
1927
- this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i08 });
1929
+ this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocSectionCodeServiceTagDirective, selector: "sectionCodeSERVICE", ngImport: i08 });
1928
1930
  }
1929
1931
  };
1930
- i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: DocSectionCodeServiceTagDirective, decorators: [{
1932
+ i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: DocSectionCodeServiceTagDirective, decorators: [{
1931
1933
  type: Directive3,
1932
1934
  args: [{ selector: "sectionCodeSERVICE" }]
1933
1935
  }] });
1934
1936
  var DocSectionCodeCssTagDirective = class _DocSectionCodeCssTagDirective {
1935
1937
  static {
1936
- this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: _DocSectionCodeCssTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1938
+ this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: _DocSectionCodeCssTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1937
1939
  }
1938
1940
  static {
1939
- this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i08 });
1941
+ this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocSectionCodeCssTagDirective, selector: "sectionCodeCSS", ngImport: i08 });
1940
1942
  }
1941
1943
  };
1942
- i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: DocSectionCodeCssTagDirective, decorators: [{
1944
+ i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: DocSectionCodeCssTagDirective, decorators: [{
1943
1945
  type: Directive3,
1944
1946
  args: [{ selector: "sectionCodeCSS" }]
1945
1947
  }] });
1946
1948
  var DocSectionCodeDocTagDirective = class _DocSectionCodeDocTagDirective {
1947
1949
  static {
1948
- this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: _DocSectionCodeDocTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1950
+ this.ɵfac = i08.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: _DocSectionCodeDocTagDirective, deps: [], target: i08.ɵɵFactoryTarget.Directive });
1949
1951
  }
1950
1952
  static {
1951
- this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i08 });
1953
+ this.ɵdir = i08.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocSectionCodeDocTagDirective, selector: "sectionCodeDOC", ngImport: i08 });
1952
1954
  }
1953
1955
  };
1954
- i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i08, type: DocSectionCodeDocTagDirective, decorators: [{
1956
+ i08.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i08, type: DocSectionCodeDocTagDirective, decorators: [{
1955
1957
  type: Directive3,
1956
1958
  args: [{ selector: "sectionCodeDOC" }]
1957
1959
  }] });
@@ -1975,13 +1977,13 @@ var DocPageCodeModalComponent = class _DocPageCodeModalComponent {
1975
1977
  this.dialog.closeDialog();
1976
1978
  }
1977
1979
  static {
1978
- this.ɵfac = i09.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i09, type: _DocPageCodeModalComponent, deps: [{ token: i14.EuiAppShellService }], target: i09.ɵɵFactoryTarget.Component });
1980
+ this.ɵfac = i09.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i09, type: _DocPageCodeModalComponent, deps: [{ token: i14.EuiAppShellService }], target: i09.ɵɵFactoryTarget.Component });
1979
1981
  }
1980
1982
  static {
1981
- this.ɵcmp = i09.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPageCodeModalComponent, selector: "eui-showcase-doc-page-code-modal", inputs: { width: "width" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i09, template: '<button type="button" euiButton euiAccent (click)="toggleCode()">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass="eui-icon eui-icon-code"></span>\n</button>\n\n<eui-dialog #dialog title="Page source code" [hasFooter]="false" (close)="onClose()" [width]="width">\n <ng-content></ng-content>\n</eui-dialog>\n', dependencies: [{ kind: "component", type: i25.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i34.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i44.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] });
1983
+ this.ɵcmp = i09.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageCodeModalComponent, selector: "eui-showcase-doc-page-code-modal", inputs: { width: "width" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i09, template: '<button type="button" euiButton euiAccent (click)="toggleCode()">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass="eui-icon eui-icon-code"></span>\n</button>\n\n<eui-dialog #dialog title="Page source code" [hasFooter]="false" (close)="onClose()" [width]="width">\n <ng-content></ng-content>\n</eui-dialog>\n', dependencies: [{ kind: "component", type: i25.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i34.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i44.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] });
1982
1984
  }
1983
1985
  };
1984
- i09.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i09, type: DocPageCodeModalComponent, decorators: [{
1986
+ i09.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i09, type: DocPageCodeModalComponent, decorators: [{
1985
1987
  type: Component7,
1986
1988
  args: [{ selector: "eui-showcase-doc-page-code-modal", template: '<button type="button" euiButton euiAccent (click)="toggleCode()">\n <span euiLabel>Check the code</span>\n <span euiIcon iconClass="eui-icon eui-icon-code"></span>\n</button>\n\n<eui-dialog #dialog title="Page source code" [hasFooter]="false" (close)="onClose()" [width]="width">\n <ng-content></ng-content>\n</eui-dialog>\n' }]
1987
1989
  }], ctorParameters: () => [{ type: i14.EuiAppShellService }], propDecorators: { width: [{
@@ -2016,10 +2018,10 @@ var DocPageCodeFabComponent = class _DocPageCodeFabComponent {
2016
2018
  window.open(sourceRootPath + this.codeFolder, "_blank");
2017
2019
  }
2018
2020
  static {
2019
- this.ɵfac = i010.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i010, type: _DocPageCodeFabComponent, deps: [{ token: i15.EuiAppShellService }], target: i010.ɵɵFactoryTarget.Component });
2021
+ this.ɵfac = i010.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i010, type: _DocPageCodeFabComponent, deps: [{ token: i15.EuiAppShellService }], target: i010.ɵɵFactoryTarget.Component });
2020
2022
  }
2021
2023
  static {
2022
- this.ɵcmp = i010.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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: i010, template: `<div class="eui-button-fixed">
2024
+ this.ɵcmp = i010.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i010, template: `<div class="eui-button-fixed">
2023
2025
  <div class="eui-button-floating eui-button--size-2xl eui-button--icon-only eui-button--accent">
2024
2026
  <span class="eui-icon eui-icon-code" (click)="toggleCode()"></span>
2025
2027
  </div>
@@ -2035,7 +2037,7 @@ var DocPageCodeFabComponent = class _DocPageCodeFabComponent {
2035
2037
  `, dependencies: [{ kind: "directive", type: i26.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i35.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i45.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i53.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] });
2036
2038
  }
2037
2039
  };
2038
- i010.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i010, type: DocPageCodeFabComponent, decorators: [{
2040
+ i010.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i010, type: DocPageCodeFabComponent, decorators: [{
2039
2041
  type: Component8,
2040
2042
  args: [{ selector: "eui-showcase-doc-page-code-fab", template: `<div class="eui-button-fixed">
2041
2043
  <div class="eui-button-floating eui-button--size-2xl eui-button--icon-only eui-button--accent">
@@ -2069,10 +2071,10 @@ var LoremIpsumSampleComponent = class _LoremIpsumSampleComponent {
2069
2071
  this.textSize = "large";
2070
2072
  }
2071
2073
  static {
2072
- this.ɵfac = i011.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i011, type: _LoremIpsumSampleComponent, deps: [], target: i011.ɵɵFactoryTarget.Component });
2074
+ this.ɵfac = i011.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i011, type: _LoremIpsumSampleComponent, deps: [], target: i011.ɵɵFactoryTarget.Component });
2073
2075
  }
2074
2076
  static {
2075
- this.ɵcmp = i011.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _LoremIpsumSampleComponent, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i011, template: `<div *ngIf="textSize === 'small'">
2077
+ this.ɵcmp = i011.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _LoremIpsumSampleComponent, selector: "eui-showcase-doc-lorem-ipsum", inputs: { textSize: "textSize" }, ngImport: i011, template: `<div *ngIf="textSize === 'small'">
2076
2078
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis
2077
2079
  malesuada. Etiam vulputate quam at consectetur pharetra.
2078
2080
 
@@ -2208,7 +2210,7 @@ var LoremIpsumSampleComponent = class _LoremIpsumSampleComponent {
2208
2210
  `, dependencies: [{ kind: "directive", type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2209
2211
  }
2210
2212
  };
2211
- i011.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i011, type: LoremIpsumSampleComponent, decorators: [{
2213
+ i011.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i011, type: LoremIpsumSampleComponent, decorators: [{
2212
2214
  type: Component9,
2213
2215
  args: [{ selector: "eui-showcase-doc-lorem-ipsum", template: `<div *ngIf="textSize === 'small'">
2214
2216
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut volutpat enim. Etiam a mattis tortor. Etiam egestas magna at iaculis
@@ -2411,13 +2413,13 @@ var PlaygroundComponent = class _PlaygroundComponent {
2411
2413
  });
2412
2414
  }
2413
2415
  static {
2414
- this.ɵfac = i012.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i012, type: _PlaygroundComponent, deps: [], target: i012.ɵɵFactoryTarget.Component });
2416
+ this.ɵfac = i012.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i012, type: _PlaygroundComponent, deps: [], target: i012.ɵɵFactoryTarget.Component });
2415
2417
  }
2416
2418
  static {
2417
- this.ɵcmp = i012.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", sampleId: "sampleId", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef2, static: true }], usesOnChanges: true, ngImport: i012, template: '<eui-block-content [isBlocked]="!isLoaded">\n <iframe #container id="stackblitz-{{sampleId}}"></iframe>\n</eui-block-content>\n', dependencies: [{ kind: "component", type: i17.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] });
2419
+ this.ɵcmp = i012.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _PlaygroundComponent, selector: "eui-playground", inputs: { title: "title", htmlContent: "htmlContent", sampleId: "sampleId", typescriptContent: "typescriptContent", activated: "activated", modules: "modules" }, viewQueries: [{ propertyName: "stackblitzElWrapper", first: true, predicate: ["container"], descendants: true, read: ElementRef2, static: true }], usesOnChanges: true, ngImport: i012, template: '<eui-block-content [isBlocked]="!isLoaded">\n <iframe #container id="stackblitz-{{sampleId}}"></iframe>\n</eui-block-content>\n', dependencies: [{ kind: "component", type: i17.EuiBlockContentComponent, selector: "eui-block-content", inputs: ["role", "ariaLabel", "isBlocked"] }] });
2418
2420
  }
2419
2421
  };
2420
- i012.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i012, type: PlaygroundComponent, decorators: [{
2422
+ i012.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i012, type: PlaygroundComponent, decorators: [{
2421
2423
  type: Component10,
2422
2424
  args: [{ selector: "eui-playground", template: '<eui-block-content [isBlocked]="!isLoaded">\n <iframe #container id="stackblitz-{{sampleId}}"></iframe>\n</eui-block-content>\n' }]
2423
2425
  }], propDecorators: { title: [{
@@ -2452,25 +2454,25 @@ import * as i83 from "@eui/components/eui-icon";
2452
2454
  import * as i93 from "@eui/components/eui-label";
2453
2455
  var DocPagePatternSampleDirective = class _DocPagePatternSampleDirective {
2454
2456
  static {
2455
- this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i013, type: _DocPagePatternSampleDirective, deps: [], target: i013.ɵɵFactoryTarget.Directive });
2457
+ this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i013, type: _DocPagePatternSampleDirective, deps: [], target: i013.ɵɵFactoryTarget.Directive });
2456
2458
  }
2457
2459
  static {
2458
- this.ɵdir = i013.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i013 });
2460
+ this.ɵdir = i013.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPagePatternSampleDirective, selector: "docPagePatternSample", ngImport: i013 });
2459
2461
  }
2460
2462
  };
2461
- i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i013, type: DocPagePatternSampleDirective, decorators: [{
2463
+ i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i013, type: DocPagePatternSampleDirective, decorators: [{
2462
2464
  type: Directive4,
2463
2465
  args: [{ selector: "docPagePatternSample" }]
2464
2466
  }] });
2465
2467
  var DocPagePatternDocDirective = class _DocPagePatternDocDirective {
2466
2468
  static {
2467
- this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i013, type: _DocPagePatternDocDirective, deps: [], target: i013.ɵɵFactoryTarget.Directive });
2469
+ this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i013, type: _DocPagePatternDocDirective, deps: [], target: i013.ɵɵFactoryTarget.Directive });
2468
2470
  }
2469
2471
  static {
2470
- this.ɵdir = i013.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i013 });
2472
+ this.ɵdir = i013.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPagePatternDocDirective, selector: "docPagePatternDoc", ngImport: i013 });
2471
2473
  }
2472
2474
  };
2473
- i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i013, type: DocPagePatternDocDirective, decorators: [{
2475
+ i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i013, type: DocPagePatternDocDirective, decorators: [{
2474
2476
  type: Directive4,
2475
2477
  args: [{ selector: "docPagePatternDoc" }]
2476
2478
  }] });
@@ -2519,10 +2521,10 @@ var DocPagePatternComponent = class _DocPagePatternComponent extends BaseDirecti
2519
2521
  });
2520
2522
  }
2521
2523
  static {
2522
- this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i013, type: _DocPagePatternComponent, deps: [{ token: i18.DomSanitizer }], target: i013.ɵɵFactoryTarget.Component });
2524
+ this.ɵfac = i013.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i013, type: _DocPagePatternComponent, deps: [{ token: i18.DomSanitizer }], target: i013.ɵɵFactoryTarget.Component });
2523
2525
  }
2524
2526
  static {
2525
- this.ɵcmp = i013.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i013.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i013.forwardRef(() => DocPagePatternDocDirective), descendants: true }], usesInheritance: true, ngImport: i013, template: `<eui-tabs (tabSelect)="onTabSelect($event)">
2527
+ this.ɵcmp = i013.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.5", type: _DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i013.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i013.forwardRef(() => DocPagePatternDocDirective), descendants: true }], usesInheritance: true, ngImport: i013, template: `<eui-tabs (tabSelect)="onTabSelect($event)">
2526
2528
  <eui-tab>
2527
2529
  <euiTabLabel>Usage and documentation</euiTabLabel>
2528
2530
  <euiTabContent>
@@ -2686,10 +2688,10 @@ var DocPagePatternComponent = class _DocPagePatternComponent extends BaseDirecti
2686
2688
  <!-- 👆 -->
2687
2689
  <eui-icon-svg icon="eui-arrow-up" set="eui" size="l" fillColor="grey-50"></eui-icon-svg>
2688
2690
  </button>
2689
- `, styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-base-spacing-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:var(--eui-c-white)}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-m)}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;line-height:var(--eui-base-line-height);position:relative;text-align:left}\n"], dependencies: [{ kind: "directive", type: i27.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i27.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i36.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i36.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["avatarUrl", "expandLabel", "collapseLabel", "iconClass", "avatarDerscription", "iconDescription", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i36.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i36.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i36.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i36.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i46.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i54.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i54.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "directive", type: i54.EuiTabsRightContentTagDirective, selector: "euiTabsRightContent" }, { kind: "component", type: i54.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i54.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i63.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i73.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i83.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i93.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i013.ViewEncapsulation.None });
2691
+ `, styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-base-spacing-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:var(--eui-c-white)}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-m)}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;line-height:var(--eui-base-line-height);position:relative;text-align:left}\n"], dependencies: [{ kind: "directive", type: i27.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i27.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i36.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i36.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i36.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i36.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i36.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i36.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i46.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i54.EuiTabsComponent, selector: "eui-tabs", inputs: ["styleClass", "tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i54.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "hasBackgroundFilled", "isHandleCloseOnClose"] }, { kind: "directive", type: i54.EuiTabsRightContentTagDirective, selector: "euiTabsRightContent" }, { kind: "component", type: i54.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i54.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i63.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i73.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }, { kind: "component", type: i83.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i93.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i013.ViewEncapsulation.None });
2690
2692
  }
2691
2693
  };
2692
- i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i013, type: DocPagePatternComponent, decorators: [{
2694
+ i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i013, type: DocPagePatternComponent, decorators: [{
2693
2695
  type: Component11,
2694
2696
  args: [{ selector: "eui-showcase-doc-page-pattern", encapsulation: ViewEncapsulation7.None, template: `<eui-tabs (tabSelect)="onTabSelect($event)">
2695
2697
  <eui-tab>
@@ -2935,10 +2937,10 @@ var COMPONENTS = [
2935
2937
  ];
2936
2938
  var EuiShowcaseModule = class _EuiShowcaseModule {
2937
2939
  static {
2938
- this.ɵfac = i014.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i014, type: _EuiShowcaseModule, deps: [], target: i014.ɵɵFactoryTarget.NgModule });
2940
+ this.ɵfac = i014.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i014, type: _EuiShowcaseModule, deps: [], target: i014.ɵɵFactoryTarget.NgModule });
2939
2941
  }
2940
2942
  static {
2941
- this.ɵmod = i014.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.4", ngImport: i014, type: _EuiShowcaseModule, declarations: [
2943
+ this.ɵmod = i014.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.0-next.5", ngImport: i014, type: _EuiShowcaseModule, declarations: [
2942
2944
  EuiCodeHighlighterDirective,
2943
2945
  DocPageComponent,
2944
2946
  DocPageCodeComponent,
@@ -3012,7 +3014,7 @@ var EuiShowcaseModule = class _EuiShowcaseModule {
3012
3014
  ] });
3013
3015
  }
3014
3016
  static {
3015
- this.ɵinj = i014.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i014, type: _EuiShowcaseModule, providers: [StackblitzService], imports: [
3017
+ this.ɵinj = i014.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i014, type: _EuiShowcaseModule, providers: [StackblitzService], imports: [
3016
3018
  CommonModule,
3017
3019
  EuiCardModule,
3018
3020
  EuiButtonModule,
@@ -3028,7 +3030,7 @@ var EuiShowcaseModule = class _EuiShowcaseModule {
3028
3030
  ] });
3029
3031
  }
3030
3032
  };
3031
- i014.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i014, type: EuiShowcaseModule, decorators: [{
3033
+ i014.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.5", ngImport: i014, type: EuiShowcaseModule, decorators: [{
3032
3034
  type: NgModule,
3033
3035
  args: [{
3034
3036
  declarations: [...COMPONENTS],