@eui/showcase 18.0.0-next.21 → 18.0.0-next.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/esm2022/lib/components/doc-page/doc-page.component.mjs +31 -3
  2. package/esm2022/lib/components/doc-page-code-fab/doc-page-code-fab.component.mjs +1 -1
  3. package/esm2022/lib/components/doc-page-pattern/doc-page-pattern.component.mjs +1 -1
  4. package/esm2022/lib/components/doc-sample/doc-sample.component.mjs +13 -3
  5. package/esm2022/lib/eui-showcase.module.mjs +5 -2
  6. package/fesm2022/eui-showcase.mjs +272 -41
  7. package/fesm2022/eui-showcase.mjs.map +2 -2
  8. package/lib/components/doc-page/doc-page.component.d.ts +12 -1
  9. package/lib/components/doc-page/doc-page.component.d.ts.map +1 -1
  10. package/lib/components/doc-sample/doc-sample.component.d.ts +6 -1
  11. package/lib/components/doc-sample/doc-sample.component.d.ts.map +1 -1
  12. package/lib/eui-showcase.module.d.ts +1 -1
  13. package/lib/eui-showcase.module.d.ts.map +1 -1
  14. package/package.json +3 -3
package/fesm2022/eui-showcase.mjs CHANGED
@@ -472,6 +472,7 @@ var DocSampleComponent = class _DocSampleComponent {
472
472
  this.styleClass = "";
473
473
  this.renderPlayground = false;
474
474
  this.isCodeButtonVisible = true;
475
+ this.isInnerSection = false;
475
476
  this.classes = "eui-showcase-doc-sample";
476
477
  this.isCodeLoaded = false;
477
478
  this.isCodeLoading = false;
@@ -613,16 +614,22 @@ var DocSampleComponent = class _DocSampleComponent {
613
614
  this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", 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
615
  }
615
616
  static {
616
- this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.3", type: _DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i03, template: '<div class="doc-sample-title">\n <div class="doc-sample-title__label">\n <strong>{{ label }}</strong>\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)="copyCurrentUrlToClipboard(id)"\n class="doc-sample-title__link"\n tabindex="-1">\n <eui-icon-svg icon="link" set="outline" size="l" fillColor="grey-75"></eui-icon-svg>\n </button>\n </div>\n <div *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 [isLoading]="isCodeLoading"\n [euiDisabled]="isCodeLoading">\n <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n <span euiIcon iconClass="eui-icon-code"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)="onSelectedTab($event)">\n <eui-tab [isVisible]="htmlContent">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-markup" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="tsContent">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-25)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);margin-top:var(--eui-base-spacing-xl);width:100%;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-title__label:first-child{margin-top:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-section-title{border-bottom:1px solid var(--eui-base-color-grey-25);font-size:var(--eui-base-font-size-l);font-weight:500;letter-spacing:-.25px;margin:var(--eui-base-spacing-3xl) 0 var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-2xs);width:auto;display:table;color:var(--eui-base-color-info-110)}.eui-showcase-doc-sample .doc-sample-section-title:first-child{margin-top:var(--eui-base-spacing-m)}\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", "isLoading", "euiIconButton", "euiLineWrap"], 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", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { 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.3", 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 <strong>{{ label }}</strong>\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)="copyCurrentUrlToClipboard(id)"\n class="doc-sample-title__link"\n tabindex="-1">\n <eui-icon-svg icon="link" set="outline" size="l" fillColor="grey-75"></eui-icon-svg>\n </button>\n </div>\n <div *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 [isLoading]="isCodeLoading"\n [euiDisabled]="isCodeLoading">\n <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n <span euiIcon iconClass="eui-icon-code"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)="onSelectedTab($event)">\n <eui-tab [isVisible]="htmlContent">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-markup" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="tsContent">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-25)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);margin-top:var(--eui-base-spacing-xl);width:100%;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-title__label:first-child{margin-top:var(--eui-base-spacing-m)}.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-base-color-grey-75);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{border-bottom:1px solid var(--eui-base-color-grey-25);font-size:var(--eui-base-font-size-l);font-weight:500;letter-spacing:-.25px;margin:var(--eui-base-spacing-3xl) 0 var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-2xs);width:auto;display:table;color:var(--eui-base-color-info-110)}.eui-showcase-doc-sample .doc-sample-section-title:first-child{margin-top:var(--eui-base-spacing-m)}\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", "isLoading", "euiIconButton", "euiLineWrap"], 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", "size", "fillColor", "set", "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
618
  }
618
619
  };
619
620
  i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i03, type: DocSampleComponent, decorators: [{
620
621
  type: Component,
621
- args: [{ selector: "eui-showcase-doc-sample", encapsulation: ViewEncapsulation.None, template: '<div class="doc-sample-title">\n <div class="doc-sample-title__label">\n <strong>{{ label }}</strong>\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)="copyCurrentUrlToClipboard(id)"\n class="doc-sample-title__link"\n tabindex="-1">\n <eui-icon-svg icon="link" set="outline" size="l" fillColor="grey-75"></eui-icon-svg>\n </button>\n </div>\n <div *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 [isLoading]="isCodeLoading"\n [euiDisabled]="isCodeLoading">\n <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n <span euiIcon iconClass="eui-icon-code"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)="onSelectedTab($event)">\n <eui-tab [isVisible]="htmlContent">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-markup" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="tsContent">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-25)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);margin-top:var(--eui-base-spacing-xl);width:100%;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-title__label:first-child{margin-top:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-base-spacing-m)}.eui-showcase-doc-sample .doc-sample-section-title{border-bottom:1px solid var(--eui-base-color-grey-25);font-size:var(--eui-base-font-size-l);font-weight:500;letter-spacing:-.25px;margin:var(--eui-base-spacing-3xl) 0 var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-2xs);width:auto;display:table;color:var(--eui-base-color-info-110)}.eui-showcase-doc-sample .doc-sample-section-title:first-child{margin-top:var(--eui-base-spacing-m)}\n"] }]
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 <strong>{{ label }}</strong>\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)="copyCurrentUrlToClipboard(id)"\n class="doc-sample-title__link"\n tabindex="-1">\n <eui-icon-svg icon="link" set="outline" size="l" fillColor="grey-75"></eui-icon-svg>\n </button>\n </div>\n <div *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 [isLoading]="isCodeLoading"\n [euiDisabled]="isCodeLoading">\n <span *ngIf="!isCodeExpanded" euiLabel>Code</span>\n <span *ngIf="isCodeExpanded" euiLabel>Hide Code</span>\n <span euiIcon iconClass="eui-icon-code"></span>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]="isCodeExpanded">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)="onSelectedTab($event)">\n <eui-tab [isVisible]="htmlContent">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-markup" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]="tsContent">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class="language-javascript" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n', styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-base-spacing-2xl);width:100%}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-base-spacing-m);padding-bottom:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-25)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);margin-top:var(--eui-base-spacing-xl);width:100%;font:normal normal 400 1.5rem/2.25rem var(--eui-base-font-family)}.eui-showcase-doc-sample .doc-sample-title__label:first-child{margin-top:var(--eui-base-spacing-m)}.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-base-color-grey-75);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{border-bottom:1px solid var(--eui-base-color-grey-25);font-size:var(--eui-base-font-size-l);font-weight:500;letter-spacing:-.25px;margin:var(--eui-base-spacing-3xl) 0 var(--eui-base-spacing-s);padding-bottom:var(--eui-base-spacing-2xs);width:auto;display:table;color:var(--eui-base-color-info-110)}.eui-showcase-doc-sample .doc-sample-section-title:first-child{margin-top:var(--eui-base-spacing-m)}\n"] }]
622
623
  }], ctorParameters: () => [{ type: StackblitzService }, { type: i2.HttpClient }, { type: i3.EuiAppShellService }, { type: i03.ChangeDetectorRef }, { type: i3.EuiGrowlService }, { type: i4.Clipboard }, { type: i5.Router }], propDecorators: { id: [{
623
624
  type: Input
624
625
  }], label: [{
625
626
  type: Input
627
+ }], category: [{
628
+ type: Input
629
+ }], description: [{
630
+ type: Input
631
+ }], defaultValue: [{
632
+ type: Input
626
633
  }], styleClass: [{
627
634
  type: Input
628
635
  }], renderPlayground: [{
@@ -631,6 +638,9 @@ i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3",
631
638
  }], isCodeButtonVisible: [{
632
639
  type: Input,
633
640
  args: [{ transform: booleanAttribute }]
641
+ }], isInnerSection: [{
642
+ type: Input,
643
+ args: [{ transform: booleanAttribute }]
634
644
  }], classes: [{
635
645
  type: HostBinding,
636
646
  args: ["class"]
@@ -730,6 +740,12 @@ var DocPageComponent = class _DocPageComponent {
730
740
  this.hasA11y = true;
731
741
  this.isLoading = true;
732
742
  this.isNavClicked = true;
743
+ this.samplesInput = [];
744
+ this.samplesContent = [];
745
+ this.samplesVariant = [];
746
+ this.samplesOther = [];
747
+ this.samplesDefault = [];
748
+ this.hasCategories = false;
733
749
  this.TABS_DEF = [
734
750
  { index: 0, id: "samples" },
735
751
  { index: 1, id: "api" },
@@ -797,6 +813,14 @@ var DocPageComponent = class _DocPageComponent {
797
813
  } else {
798
814
  tabIndex = tab.index;
799
815
  }
816
+ if (this.samples) {
817
+ this.samplesDefault = this.samples.filter((s) => s.id === "_default");
818
+ this.samplesInput = this.samples.filter((s) => s.category === "INPUT");
819
+ this.samplesContent = this.samples.filter((s) => s.category === "SUB_CONTENT");
820
+ this.samplesVariant = this.samples.filter((s) => s.category === "VARIANT");
821
+ this.samplesOther = this.samples.filter((s) => s.category !== "SUB_CONTENT" && s.category !== "INPUT" && s.category !== "VARIANT" && s.id !== "_default");
822
+ this.hasCategories = this.samplesOther.length !== this.samples.length;
823
+ }
800
824
  this._scrollToFragment(this.fragmentId, tabIndex, true, true);
801
825
  setTimeout(() => {
802
826
  this.asService.isBlockDocumentActive = false;
@@ -930,7 +954,7 @@ var DocPageComponent = class _DocPageComponent {
930
954
  this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i06, type: _DocPageComponent, deps: [{ token: i12.Router }, { token: i12.ActivatedRoute }, { token: i23.EuiAppShellService }, { token: i32.DomSanitizer }, { token: i42.Location }], target: i06.ɵɵFactoryTarget.Component });
931
955
  }
932
956
  static {
933
- this.ɵcmp = i06.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", 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: "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">
957
+ this.ɵcmp = i06.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.3", 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">
934
958
  <div class="doc-page-main-column">
935
959
  <eui-page>
936
960
  <eui-page-header label="{{ label }}" subLabel="{{ subLabel }}">
@@ -1002,13 +1026,40 @@ var DocPageComponent = class _DocPageComponent {
1002
1026
  <br />
1003
1027
  </ng-container>
1004
1028
 
1005
- <div id="overview" class="doc-page-section-title">Overview & setup</div>
1006
- <div *ngIf="pageOverviewContent.length > 0; else noOverview">
1029
+ <div id="overview" class="doc-page-section-title">Overview</div>
1030
+
1031
+ <div *ngIf="pageOverviewContent.length > 0">
1007
1032
  <ng-content select="docPageOverview"></ng-content>
1008
1033
  </div>
1009
- <ng-template #noOverview> Coming soon... </ng-template>
1034
+
1035
+ <ng-container *ngIf="samplesInput.length !== 0">
1036
+ <div class="doc-page-section-subtitle">Component API summary</div>
1037
+ <table class="eui-table-default eui-table-default--compact eui-table-default--responsive eui-table-default--bordered eui-u-mb-xl">
1038
+ <thead>
1039
+ <tr>
1040
+ <th class="eui-u-text-left">name</th>
1041
+ <th class="eui-u-text-left">Description</th>
1042
+ <th class="eui-u-text-left">Default</th>
1043
+ <th></th>
1044
+ </tr>
1045
+ </thead>
1046
+ <tbody>
1047
+ <tr *ngFor="let sample of samplesInput">
1048
+ <td>{{sample?.id}}</td>
1049
+ <td>{{sample?.description}}</td>
1050
+ <td>{{sample?.defaultValue}}</td>
1051
+ <td><a class="eui-u-text-link" (click)="onNavClick(sample?.id,0)">Sample link</a></td>
1052
+ </tr>
1053
+ </tbody>
1054
+ </table>
1055
+ </ng-container>
1056
+
1057
+ <div *ngIf="pageOverviewDefaultContent.length > 0">
1058
+ <ng-content select="docPageOverviewDefault"></ng-content>
1059
+ </div>
1010
1060
  <br />
1011
1061
 
1062
+
1012
1063
  <div id="samples" class="doc-page-section-title">Options & samples</div>
1013
1064
  <ng-content select="docPageSamples"></ng-content>
1014
1065
  </euiTabContent>
@@ -1076,12 +1127,6 @@ var DocPageComponent = class _DocPageComponent {
1076
1127
  <div class="doc-page-navigation-content" tabindex="0">
1077
1128
  <ul class="doc-page-navigation">
1078
1129
  <ng-container *ngIf="pageSectionsContent.length === 0">
1079
- <li
1080
- class="doc-page-navigation-item"
1081
- [class.doc-page-navigation-item--selected]="fragmentId === 'samples'"
1082
- (click)="onNavClick('samples', 0)">
1083
- <span>OPTIONS & SAMPLES</span>
1084
- </li>
1085
1130
  <li
1086
1131
  *ngIf="hasApi"
1087
1132
  class="doc-page-navigation-item"
@@ -1096,17 +1141,90 @@ var DocPageComponent = class _DocPageComponent {
1096
1141
  (click)="onNavClick('a11y', 2)">
1097
1142
  <span>A11Y</span>
1098
1143
  </li>
1144
+ <li
1145
+ class="doc-page-navigation-item"
1146
+ [class.doc-page-navigation-item--selected]="fragmentId === 'samples'"
1147
+ (click)="onNavClick('samples', 0)">
1148
+ <span>OPTIONS & SAMPLES</span>
1149
+ </li>
1099
1150
  <li class="doc-page-navigation-item doc-page-navigation-sub">
1100
- <ul *ngFor="let sample of samples" class="doc-page-navigation-list">
1101
- <li
1102
- class="doc-page-navigation-item"
1103
- [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1104
- (click)="onNavClick(sample.id, 0)">
1105
- <span>{{ sample.label }}</span>
1106
- </li>
1107
- </ul>
1151
+
1152
+ <ng-container *ngIf="hasCategories; else noCategories">
1153
+
1154
+ <ul *ngFor="let sample of samplesDefault" class="doc-page-navigation-list">
1155
+ <li
1156
+ class="doc-page-navigation-item"
1157
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1158
+ (click)="onNavClick(sample.id, 0)">
1159
+ <span>{{ sample.label }}</span>
1160
+ </li>
1161
+ </ul>
1162
+
1163
+ <ng-container *ngIf="samplesVariant.length !==0">
1164
+ <div class="doc-page-navigation-category">Variants</div>
1165
+ <ul *ngFor="let sample of samplesVariant" class="doc-page-navigation-list">
1166
+ <li
1167
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1168
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1169
+ (click)="onNavClick(sample.id, 0)">
1170
+ <span>{{ sample.label }}</span>
1171
+ </li>
1172
+ </ul>
1173
+ </ng-container>
1174
+
1175
+ <ng-container *ngIf="samplesInput.length !==0">
1176
+ <div class="doc-page-navigation-category">Inputs</div>
1177
+ <ul *ngFor="let sample of samplesInput" class="doc-page-navigation-list">
1178
+ <li
1179
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1180
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1181
+ (click)="onNavClick(sample.id, 0)">
1182
+ <span>{{ sample.label }}</span>
1183
+ </li>
1184
+ </ul>
1185
+ </ng-container>
1186
+
1187
+ <ng-container *ngIf="samplesContent.length !==0">
1188
+ <div class="doc-page-navigation-category">Sub contents</div>
1189
+ <ul *ngFor="let sample of samplesContent" class="doc-page-navigation-list">
1190
+ <li
1191
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1192
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1193
+ (click)="onNavClick(sample.id, 0)">
1194
+ <span>{{ sample.label }}</span>
1195
+ </li>
1196
+ </ul>
1197
+ </ng-container>
1198
+
1199
+ <ng-container *ngIf="samplesOther.length !==0">
1200
+ <div class="doc-page-navigation-category">Other samples</div>
1201
+ <ul *ngFor="let sample of samplesOther" class="doc-page-navigation-list">
1202
+ <li
1203
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1204
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1205
+ (click)="onNavClick(sample.id, 0)">
1206
+ <span>{{ sample.label }}</span>
1207
+ </li>
1208
+ </ul>
1209
+ </ng-container>
1210
+ </ng-container>
1211
+
1212
+ <ng-template #noCategories>
1213
+ <ng-container *ngIf="samplesOther.length !==0">
1214
+ <ul *ngFor="let sample of samplesOther" class="doc-page-navigation-list">
1215
+ <li
1216
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1217
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1218
+ (click)="onNavClick(sample.id, 0)">
1219
+ <span>{{ sample.label }}</span>
1220
+ </li>
1221
+ </ul>
1222
+ </ng-container>
1223
+ </ng-template>
1108
1224
  </li>
1109
1225
 
1226
+
1227
+
1110
1228
  <!-- OPTIONAL TABS-->
1111
1229
  <ng-container *ngIf="pageThemingContent.length > 0">
1112
1230
  <li
@@ -1165,7 +1283,7 @@ var DocPageComponent = class _DocPageComponent {
1165
1283
  </div>
1166
1284
  </div>
1167
1285
  </div>
1168
- `, styles: ['.doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:active:not([readonly]),.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.doc-page-navigation-wrapper .language-javascript [tabindex="0"]:active:not([readonly]),.doc-page-navigation-wrapper .language-javascript [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-base-color-primary-100);padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-base-spacing-2xl);margin-bottom:var(--eui-base-spacing-xl);color:var(--eui-base-color-info-120);font:normal normal 400 1.75rem/2.5rem var(--eui-base-font-family);font-weight:700}@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 });
1286
+ `, styles: ['.doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:0!important;transition:none!important}.doc-page-navigation-wrapper .language-javascript:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:0!important;transition:none!important}.doc-page-navigation-wrapper .language-javascript [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:0!important;transition:none!important}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-base-color-primary-100);padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-primary-10);border-left:2px solid var(--eui-base-color-info-100)}.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-base-color-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-base-color-info-120);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-base-color-grey-25);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-base-color-info-110)}@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 });
1169
1287
  }
1170
1288
  };
1171
1289
  i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i06, type: DocPageComponent, decorators: [{
@@ -1242,13 +1360,40 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3",
1242
1360
  <br />
1243
1361
  </ng-container>
1244
1362
 
1245
- <div id="overview" class="doc-page-section-title">Overview & setup</div>
1246
- <div *ngIf="pageOverviewContent.length > 0; else noOverview">
1363
+ <div id="overview" class="doc-page-section-title">Overview</div>
1364
+
1365
+ <div *ngIf="pageOverviewContent.length > 0">
1247
1366
  <ng-content select="docPageOverview"></ng-content>
1248
1367
  </div>
1249
- <ng-template #noOverview> Coming soon... </ng-template>
1368
+
1369
+ <ng-container *ngIf="samplesInput.length !== 0">
1370
+ <div class="doc-page-section-subtitle">Component API summary</div>
1371
+ <table class="eui-table-default eui-table-default--compact eui-table-default--responsive eui-table-default--bordered eui-u-mb-xl">
1372
+ <thead>
1373
+ <tr>
1374
+ <th class="eui-u-text-left">name</th>
1375
+ <th class="eui-u-text-left">Description</th>
1376
+ <th class="eui-u-text-left">Default</th>
1377
+ <th></th>
1378
+ </tr>
1379
+ </thead>
1380
+ <tbody>
1381
+ <tr *ngFor="let sample of samplesInput">
1382
+ <td>{{sample?.id}}</td>
1383
+ <td>{{sample?.description}}</td>
1384
+ <td>{{sample?.defaultValue}}</td>
1385
+ <td><a class="eui-u-text-link" (click)="onNavClick(sample?.id,0)">Sample link</a></td>
1386
+ </tr>
1387
+ </tbody>
1388
+ </table>
1389
+ </ng-container>
1390
+
1391
+ <div *ngIf="pageOverviewDefaultContent.length > 0">
1392
+ <ng-content select="docPageOverviewDefault"></ng-content>
1393
+ </div>
1250
1394
  <br />
1251
1395
 
1396
+
1252
1397
  <div id="samples" class="doc-page-section-title">Options & samples</div>
1253
1398
  <ng-content select="docPageSamples"></ng-content>
1254
1399
  </euiTabContent>
@@ -1316,12 +1461,6 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3",
1316
1461
  <div class="doc-page-navigation-content" tabindex="0">
1317
1462
  <ul class="doc-page-navigation">
1318
1463
  <ng-container *ngIf="pageSectionsContent.length === 0">
1319
- <li
1320
- class="doc-page-navigation-item"
1321
- [class.doc-page-navigation-item--selected]="fragmentId === 'samples'"
1322
- (click)="onNavClick('samples', 0)">
1323
- <span>OPTIONS & SAMPLES</span>
1324
- </li>
1325
1464
  <li
1326
1465
  *ngIf="hasApi"
1327
1466
  class="doc-page-navigation-item"
@@ -1336,17 +1475,90 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3",
1336
1475
  (click)="onNavClick('a11y', 2)">
1337
1476
  <span>A11Y</span>
1338
1477
  </li>
1478
+ <li
1479
+ class="doc-page-navigation-item"
1480
+ [class.doc-page-navigation-item--selected]="fragmentId === 'samples'"
1481
+ (click)="onNavClick('samples', 0)">
1482
+ <span>OPTIONS & SAMPLES</span>
1483
+ </li>
1339
1484
  <li class="doc-page-navigation-item doc-page-navigation-sub">
1340
- <ul *ngFor="let sample of samples" class="doc-page-navigation-list">
1341
- <li
1342
- class="doc-page-navigation-item"
1343
- [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1344
- (click)="onNavClick(sample.id, 0)">
1345
- <span>{{ sample.label }}</span>
1346
- </li>
1347
- </ul>
1485
+
1486
+ <ng-container *ngIf="hasCategories; else noCategories">
1487
+
1488
+ <ul *ngFor="let sample of samplesDefault" class="doc-page-navigation-list">
1489
+ <li
1490
+ class="doc-page-navigation-item"
1491
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1492
+ (click)="onNavClick(sample.id, 0)">
1493
+ <span>{{ sample.label }}</span>
1494
+ </li>
1495
+ </ul>
1496
+
1497
+ <ng-container *ngIf="samplesVariant.length !==0">
1498
+ <div class="doc-page-navigation-category">Variants</div>
1499
+ <ul *ngFor="let sample of samplesVariant" class="doc-page-navigation-list">
1500
+ <li
1501
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1502
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1503
+ (click)="onNavClick(sample.id, 0)">
1504
+ <span>{{ sample.label }}</span>
1505
+ </li>
1506
+ </ul>
1507
+ </ng-container>
1508
+
1509
+ <ng-container *ngIf="samplesInput.length !==0">
1510
+ <div class="doc-page-navigation-category">Inputs</div>
1511
+ <ul *ngFor="let sample of samplesInput" class="doc-page-navigation-list">
1512
+ <li
1513
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1514
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1515
+ (click)="onNavClick(sample.id, 0)">
1516
+ <span>{{ sample.label }}</span>
1517
+ </li>
1518
+ </ul>
1519
+ </ng-container>
1520
+
1521
+ <ng-container *ngIf="samplesContent.length !==0">
1522
+ <div class="doc-page-navigation-category">Sub contents</div>
1523
+ <ul *ngFor="let sample of samplesContent" class="doc-page-navigation-list">
1524
+ <li
1525
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1526
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1527
+ (click)="onNavClick(sample.id, 0)">
1528
+ <span>{{ sample.label }}</span>
1529
+ </li>
1530
+ </ul>
1531
+ </ng-container>
1532
+
1533
+ <ng-container *ngIf="samplesOther.length !==0">
1534
+ <div class="doc-page-navigation-category">Other samples</div>
1535
+ <ul *ngFor="let sample of samplesOther" class="doc-page-navigation-list">
1536
+ <li
1537
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1538
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1539
+ (click)="onNavClick(sample.id, 0)">
1540
+ <span>{{ sample.label }}</span>
1541
+ </li>
1542
+ </ul>
1543
+ </ng-container>
1544
+ </ng-container>
1545
+
1546
+ <ng-template #noCategories>
1547
+ <ng-container *ngIf="samplesOther.length !==0">
1548
+ <ul *ngFor="let sample of samplesOther" class="doc-page-navigation-list">
1549
+ <li
1550
+ class="doc-page-navigation-item doc-page-navigation-item-sub"
1551
+ [class.doc-page-navigation-item--selected]="fragmentId === sample.id"
1552
+ (click)="onNavClick(sample.id, 0)">
1553
+ <span>{{ sample.label }}</span>
1554
+ </li>
1555
+ </ul>
1556
+ </ng-container>
1557
+ </ng-template>
1348
1558
  </li>
1349
1559
 
1560
+
1561
+
1350
1562
  <!-- OPTIONAL TABS-->
1351
1563
  <ng-container *ngIf="pageThemingContent.length > 0">
1352
1564
  <li
@@ -1405,7 +1617,7 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3",
1405
1617
  </div>
1406
1618
  </div>
1407
1619
  </div>
1408
- `, styles: ['.doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:active:not([readonly]),.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.doc-page-navigation-wrapper .language-javascript [tabindex="0"]:active:not([readonly]),.doc-page-navigation-wrapper .language-javascript [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:0;transition:none}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-base-color-primary-100);padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-m)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.doc-page-section-title{margin-top:var(--eui-base-spacing-2xl);margin-bottom:var(--eui-base-spacing-xl);color:var(--eui-base-color-info-120);font:normal normal 400 1.75rem/2.5rem var(--eui-base-font-family);font-weight:700}@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'] }]
1620
+ `, styles: ['.doc-page-navigation-wrapper{display:flex;flex-wrap:wrap;width:100%}.doc-page-navigation-wrapper .doc-page-main-column{padding-right:var(--eui-base-spacing-m);width:calc(100% - 400px)}.doc-page-navigation-wrapper .doc-page-navigation-column{background:var(--eui-base-color-white);box-shadow:0 8px 10px #b7c0ce33;position:fixed;right:0;transition:all ease-in-out .25s;width:400px;z-index:auto;box-shadow:var(--eui-base-shadow-1)}.doc-page-navigation-wrapper .doc-page-navigation-column:hover{width:400px}.doc-page-navigation-wrapper .language-javascript:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:0!important;transition:none!important}.doc-page-navigation-wrapper .language-javascript:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:0!important;transition:none!important}.doc-page-navigation-wrapper .language-javascript [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:0!important;transition:none!important}.doc-page-navigation-title{font-weight:700;padding:var(--eui-base-spacing-s)}.doc-page-navigation-content{display:block;height:100vh;max-height:calc(100vh - 6rem);overflow-y:auto;width:100%}.doc-page-navigation-content::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.doc-page-navigation-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.doc-page-navigation-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.doc-page-navigation-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.doc-page-navigation{background-color:transparent;border-left:2px solid transparent;padding-top:var(--eui-base-spacing-xs);margin:0;padding:0}.doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.doc-page-navigation .doc-page-navigation-item{color:var(--eui-base-color-primary-100);cursor:pointer;line-height:1.5;overflow:hidden;padding:var(--eui-base-spacing-2xs);text-overflow:ellipsis;transition:background-color ease-in .2s;white-space:nowrap;list-style:none}.doc-page-navigation .doc-page-navigation-item span{font-weight:700;color:var(--eui-base-color-primary-100);padding-left:var(--eui-base-spacing-xs)}.doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-info-100)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-base-spacing-s)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-base-color-grey-5);border-left:2px solid var(--eui-base-color-grey-15)}.doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-base-color-primary-10);border-left:2px solid var(--eui-base-color-info-100)}.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-base-color-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-base-color-info-120);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-base-color-grey-25);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-base-color-info-110)}@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'] }]
1409
1621
  }], ctorParameters: () => [{ type: i12.Router }, { type: i12.ActivatedRoute }, { type: i23.EuiAppShellService }, { type: i32.DomSanitizer }, { type: i42.Location }], propDecorators: { id: [{
1410
1622
  type: Input4
1411
1623
  }], label: [{
@@ -1437,6 +1649,9 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3",
1437
1649
  }], pageOverviewContent: [{
1438
1650
  type: ContentChildren,
1439
1651
  args: [forwardRef(() => DocPageOverviewContentDirective)]
1652
+ }], pageOverviewDefaultContent: [{
1653
+ type: ContentChildren,
1654
+ args: [forwardRef(() => DocPageOverviewDefaultContentDirective)]
1440
1655
  }], pageSamplesContent: [{
1441
1656
  type: ContentChildren,
1442
1657
  args: [forwardRef(() => DocPageSamplesContentDirective)]
@@ -1471,6 +1686,18 @@ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3",
1471
1686
  type: Directive2,
1472
1687
  args: [{ selector: "docPageOverview" }]
1473
1688
  }] });
1689
+ var DocPageOverviewDefaultContentDirective = class _DocPageOverviewDefaultContentDirective {
1690
+ static {
1691
+ this.ɵfac = i06.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i06, type: _DocPageOverviewDefaultContentDirective, deps: [], target: i06.ɵɵFactoryTarget.Directive });
1692
+ }
1693
+ static {
1694
+ this.ɵdir = i06.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.0-next.3", type: _DocPageOverviewDefaultContentDirective, selector: "docPageOverviewDefault", ngImport: i06 });
1695
+ }
1696
+ };
1697
+ i06.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i06, type: DocPageOverviewDefaultContentDirective, decorators: [{
1698
+ type: Directive2,
1699
+ args: [{ selector: "docPageOverviewDefault" }]
1700
+ }] });
1474
1701
  var DocPageInteractiveContentDirective = class _DocPageInteractiveContentDirective {
1475
1702
  constructor() {
1476
1703
  this.title = "ADVANCED EXAMPLES";
@@ -1777,7 +2004,7 @@ var DocPageCodeFabComponent = class _DocPageCodeFabComponent {
1777
2004
  <ng-content></ng-content>
1778
2005
  <p class="eui-u-text-paragraph">Use the <kbd class="eui-u-text-kbd">View sources</kbd> button to access the code source of the page.</p>
1779
2006
  </eui-dialog>
1780
- `, 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", "isLoading", "euiIconButton", "euiLineWrap"], 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", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }] });
2007
+ `, 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", "isLoading", "euiIconButton", "euiLineWrap"], 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", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] });
1781
2008
  }
1782
2009
  };
1783
2010
  i010.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i010, type: DocPageCodeFabComponent, decorators: [{
@@ -2431,7 +2658,7 @@ var DocPagePatternComponent = class _DocPagePatternComponent extends BaseDirecti
2431
2658
  <!-- 👆 -->
2432
2659
  <eui-icon-svg icon="eui-arrow-up" set="eui" size="l" fillColor="grey-50"></eui-icon-svg>
2433
2660
  </button>
2434
- `, 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-base-color-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", "isLoading", "euiIconButton", "euiLineWrap"], 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", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { 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 });
2661
+ `, 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-base-color-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", "isLoading", "euiIconButton", "euiLineWrap"], 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", "size", "fillColor", "set", "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 });
2435
2662
  }
2436
2663
  };
2437
2664
  i013.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.3", ngImport: i013, type: DocPagePatternComponent, decorators: [{
@@ -2655,6 +2882,7 @@ var COMPONENTS = [
2655
2882
  DocPageCodeFabComponent,
2656
2883
  DocPageCodeModalComponent,
2657
2884
  DocPageOverviewContentDirective,
2885
+ DocPageOverviewDefaultContentDirective,
2658
2886
  DocPageApiContentDirective,
2659
2887
  DocPageInteractiveContentDirective,
2660
2888
  DocPageSamplesContentDirective,
@@ -2689,6 +2917,7 @@ var EuiShowcaseModule = class _EuiShowcaseModule {
2689
2917
  DocPageCodeFabComponent,
2690
2918
  DocPageCodeModalComponent,
2691
2919
  DocPageOverviewContentDirective,
2920
+ DocPageOverviewDefaultContentDirective,
2692
2921
  DocPageApiContentDirective,
2693
2922
  DocPageInteractiveContentDirective,
2694
2923
  DocPageSamplesContentDirective,
@@ -2730,6 +2959,7 @@ var EuiShowcaseModule = class _EuiShowcaseModule {
2730
2959
  DocPageCodeFabComponent,
2731
2960
  DocPageCodeModalComponent,
2732
2961
  DocPageOverviewContentDirective,
2962
+ DocPageOverviewDefaultContentDirective,
2733
2963
  DocPageApiContentDirective,
2734
2964
  DocPageInteractiveContentDirective,
2735
2965
  DocPageSamplesContentDirective,
@@ -2801,6 +3031,7 @@ export {
2801
3031
  DocPageComponent,
2802
3032
  DocPageInteractiveContentDirective,
2803
3033
  DocPageOverviewContentDirective,
3034
+ DocPageOverviewDefaultContentDirective,
2804
3035
  DocPagePatternComponent,
2805
3036
  DocPagePatternDocDirective,
2806
3037
  DocPagePatternSampleDirective,