@eui/showcase 22.0.0-alpha.1 → 22.0.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/eui-showcase.mjs +39 -32
  2. package/fesm2022/eui-showcase.mjs.map +1 -1
  3. package/package.json +3 -3
  4. package/types/eui-showcase.d.ts +31 -16
  5. package/types/eui-showcase.d.ts.map +1 -1
package/fesm2022/eui-showcase.mjs CHANGED
@@ -90,7 +90,6 @@ class DocPageCodeComponent {
90
90
  ...(ngDevMode ? [{ debugName: "showcase" }] : /* istanbul ignore next */ []));
91
91
  }
92
92
  onOpenCode() {
93
- // eslint-disable-next-line max-len
94
93
  const sourceRootPath = `https://sdlc.webcloud.ec.europa.eu/csdr/eui/app-eui-showcase-${this.showcase()}/-/blob/master/src/app/`;
95
94
  window.open(sourceRootPath + this.codeFolder(), '_blank');
96
95
  }
@@ -146,9 +145,6 @@ class DocPageDevGuideComponent {
146
145
  return `<h${depth}>${text}</h${depth}>`;
147
146
  };
148
147
  }
149
- ngAfterViewInit() {
150
- // Fragment scrolling is handled in constructor via afterNextRender
151
- }
152
148
  onNavClick(fragmentId) {
153
149
  this._scrollToFragment(fragmentId);
154
150
  }
@@ -645,8 +641,6 @@ class StackblitzService {
645
641
  const extraDependencies = {
646
642
  'ngx-moment': '~6.0.0',
647
643
  'ngx-mask': '^14.0.0',
648
- 'cleave.js': '^1.6.0',
649
- '@types/cleave.js': '1.4.12',
650
644
  moment: '^2.19.3',
651
645
  extend: '^3.0.2',
652
646
  '@faker-js/faker': '^9.0.0',
@@ -736,6 +730,8 @@ class DocSampleComponent {
736
730
  this.renderPlayground = input(null, { ...(ngDevMode ? { debugName: "renderPlayground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
737
731
  this.isCodeButtonVisible = input(true, { ...(ngDevMode ? { debugName: "isCodeButtonVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
738
732
  this.isInnerSection = input(false, { ...(ngDevMode ? { debugName: "isInnerSection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
733
+ /** Host element ref — used by the doc-page to tell which projected section a sample belongs to. */
734
+ this.elementRef = inject(ElementRef);
739
735
  this.isCodeLoaded = false;
740
736
  this.isCodeLoading = false;
741
737
  this.isCodeExpanded = false;
@@ -960,9 +956,14 @@ class DocPageComponent {
960
956
  ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
961
957
  this.subLabel = input(undefined, /* @ts-ignore */
962
958
  ...(ngDevMode ? [{ debugName: "subLabel" }] : /* istanbul ignore next */ []));
963
- this.isNotReadyInput = input(false, { ...(ngDevMode ? { debugName: "isNotReadyInput" } : /* istanbul ignore next */ {}), alias: 'isNotReady' });
964
- this.isDeprecatedInput = input(false, { ...(ngDevMode ? { debugName: "isDeprecatedInput" } : /* istanbul ignore next */ {}), alias: 'isDeprecated' });
965
- this.isLegacyInput = input(false, { ...(ngDevMode ? { debugName: "isLegacyInput" } : /* istanbul ignore next */ {}), alias: 'isLegacy' });
959
+ this.isNotReady = input(false, /* @ts-ignore */
960
+ ...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
961
+ this.isDeprecated = input(false, /* @ts-ignore */
962
+ ...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
963
+ this.isDemoComponentOnly = input(false, /* @ts-ignore */
964
+ ...(ngDevMode ? [{ debugName: "isDemoComponentOnly" }] : /* istanbul ignore next */ []));
965
+ this.isLegacy = input(false, /* @ts-ignore */
966
+ ...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
966
967
  this.codeFolder = input(undefined, /* @ts-ignore */
967
968
  ...(ngDevMode ? [{ debugName: "codeFolder" }] : /* istanbul ignore next */ []));
968
969
  this.showcase = input('ux', /* @ts-ignore */
@@ -976,12 +977,14 @@ class DocPageComponent {
976
977
  this.customApiUrl = input(null, /* @ts-ignore */
977
978
  ...(ngDevMode ? [{ debugName: "customApiUrl" }] : /* istanbul ignore next */ []));
978
979
  // Writable signals for properties that are both input-driven and internally mutated
979
- this.isNotReady = signal(false, /* @ts-ignore */
980
- ...(ngDevMode ? [{ debugName: "isNotReady" }] : /* istanbul ignore next */ []));
981
- this.isDeprecated = signal(false, /* @ts-ignore */
982
- ...(ngDevMode ? [{ debugName: "isDeprecated" }] : /* istanbul ignore next */ []));
983
- this.isLegacy = signal(false, /* @ts-ignore */
984
- ...(ngDevMode ? [{ debugName: "isLegacy" }] : /* istanbul ignore next */ []));
980
+ this.isNotReadyInput = signal(false, /* @ts-ignore */
981
+ ...(ngDevMode ? [{ debugName: "isNotReadyInput" }] : /* istanbul ignore next */ []));
982
+ this.isDeprecatedInput = signal(false, /* @ts-ignore */
983
+ ...(ngDevMode ? [{ debugName: "isDeprecatedInput" }] : /* istanbul ignore next */ []));
984
+ this.isLegacyInput = signal(false, /* @ts-ignore */
985
+ ...(ngDevMode ? [{ debugName: "isLegacyInput" }] : /* istanbul ignore next */ []));
986
+ this.isDemoComponentOnlyInput = signal(false, /* @ts-ignore */
987
+ ...(ngDevMode ? [{ debugName: "isDemoComponentOnlyInput" }] : /* istanbul ignore next */ []));
985
988
  this.isLoading = true;
986
989
  this.isNavClicked = true;
987
990
  this.hasCategories = false;
@@ -1033,12 +1036,12 @@ class DocPageComponent {
1033
1036
  }
1034
1037
  ngOnInit() {
1035
1038
  // Sync input signals to writable signals
1036
- if (this.isNotReadyInput())
1037
- this.isNotReady.set(true);
1038
- if (this.isDeprecatedInput())
1039
- this.isDeprecated.set(true);
1040
- if (this.isLegacyInput())
1041
- this.isLegacy.set(true);
1039
+ if (this.isNotReady())
1040
+ this.isNotReadyInput.set(true);
1041
+ if (this.isDeprecated())
1042
+ this.isDeprecatedInput.set(true);
1043
+ if (this.isLegacy())
1044
+ this.isLegacyInput.set(true);
1042
1045
  this.destroyRef.onDestroy(() => this.isDestroyed = true);
1043
1046
  afterNextRender(() => {
1044
1047
  this.asService.isBlockDocumentActive = true;
@@ -1079,7 +1082,7 @@ class DocPageComponent {
1079
1082
  }
1080
1083
  // constructing categories, if at least one set, if not backward compat with old display
1081
1084
  const categoriesJson = {};
1082
- this.samples().forEach((s) => {
1085
+ this.mainSamples().forEach((s) => {
1083
1086
  // "Default" or "_default" sample are always put first in the nav list
1084
1087
  const id = s.id();
1085
1088
  const category = s.category();
@@ -1151,6 +1154,10 @@ class DocPageComponent {
1151
1154
  const category = this.CATEGORIES_DEF.find(cat => cat.id.toLowerCase() === name.toLowerCase());
1152
1155
  return category ? category.index : this.CATEGORIES_DEF.find(cat => cat.id === 'free-category').index;
1153
1156
  }
1157
+ /** Samples that belong to the main "Options & samples" tab. */
1158
+ mainSamples() {
1159
+ return [...this.samples()];
1160
+ }
1154
1161
  ngOnDestroy() {
1155
1162
  if (this.scrollObserver) {
1156
1163
  this.scrollObserver.disconnect();
@@ -1186,7 +1193,7 @@ class DocPageComponent {
1186
1193
  }
1187
1194
  _buildCategories() {
1188
1195
  const categoriesJson = {};
1189
- this.samples().forEach((s) => {
1196
+ this.mainSamples().forEach((s) => {
1190
1197
  const id = s.id();
1191
1198
  const category = s.category();
1192
1199
  const isDefault = id === '_default' || id === 'Default' || id === 'default';
@@ -1353,17 +1360,18 @@ class DocPageComponent {
1353
1360
  case 'warning':
1354
1361
  this.stateLabel = 'will be removed in eUI 21';
1355
1362
  this.stateTypeClass = 'warning';
1356
- this.isDeprecated.set(true);
1363
+ this.isDeprecatedInput.set(true);
1357
1364
  break;
1358
1365
  case 'danger':
1359
- this.stateLabel = 'will be removed in eUI 21';
1366
+ this.stateLabel = 'DEMO ONLY';
1360
1367
  this.stateTypeClass = 'danger';
1361
- this.isLegacy.set(true);
1368
+ this.isLegacyInput.set(true);
1369
+ this.isDemoComponentOnlyInput.set(true);
1362
1370
  break;
1363
1371
  case 'info':
1364
1372
  this.stateLabel = 'NOT READY';
1365
1373
  this.stateTypeClass = 'accent';
1366
- this.isNotReady.set(true);
1374
+ this.isNotReadyInput.set(true);
1367
1375
  break;
1368
1376
  }
1369
1377
  if (this.cmp.metadata?.moduleName) {
@@ -1398,7 +1406,7 @@ class DocPageComponent {
1398
1406
  return result;
1399
1407
  }
1400
1408
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1401
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReadyInput: { classPropertyName: "isNotReadyInput", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecatedInput: { classPropertyName: "isDeprecatedInput", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isLegacyInput: { classPropertyName: "isLegacyInput", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isNavigationVisible: "isNavigationVisibleChange" }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }, { propertyName: "pageVisualSpecsContent", predicate: i0.forwardRef(() => DocPageVisualSpecsContentDirective) }, { propertyName: "pagePlaygroundContent", predicate: i0.forwardRef(() => DocPagePlaygroundContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of samples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabHeaderLabelComponent, selector: "eui-tab-header-label" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
1409
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: DocPageComponent, isStandalone: true, selector: "eui-showcase-doc-page", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isNotReady: { classPropertyName: "isNotReady", publicName: "isNotReady", isSignal: true, isRequired: false, transformFunction: null }, isDeprecated: { classPropertyName: "isDeprecated", publicName: "isDeprecated", isSignal: true, isRequired: false, transformFunction: null }, isDemoComponentOnly: { classPropertyName: "isDemoComponentOnly", publicName: "isDemoComponentOnly", isSignal: true, isRequired: false, transformFunction: null }, isLegacy: { classPropertyName: "isLegacy", publicName: "isLegacy", isSignal: true, isRequired: false, transformFunction: null }, codeFolder: { classPropertyName: "codeFolder", publicName: "codeFolder", isSignal: true, isRequired: false, transformFunction: null }, showcase: { classPropertyName: "showcase", publicName: "showcase", isSignal: true, isRequired: false, transformFunction: null }, isNavigationVisible: { classPropertyName: "isNavigationVisible", publicName: "isNavigationVisible", isSignal: true, isRequired: false, transformFunction: null }, hasApi: { classPropertyName: "hasApi", publicName: "hasApi", isSignal: true, isRequired: false, transformFunction: null }, hasA11y: { classPropertyName: "hasA11y", publicName: "hasA11y", isSignal: true, isRequired: false, transformFunction: null }, customApiUrl: { classPropertyName: "customApiUrl", publicName: "customApiUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isNavigationVisible: "isNavigationVisibleChange" }, host: { classAttribute: "eui-doc-page" }, queries: [{ propertyName: "samples", predicate: DocSampleComponent, descendants: true, isSignal: true }, { propertyName: "sections", predicate: DocSectionComponent, descendants: true, isSignal: true }, { propertyName: "pageOverviewContent", predicate: i0.forwardRef(() => DocPageOverviewContentDirective), isSignal: true }, { propertyName: "pageOverviewDefaultContent", predicate: i0.forwardRef(() => DocPageOverviewDefaultContentDirective), isSignal: true }, { propertyName: "pageSamplesContent", predicate: i0.forwardRef(() => DocPageSamplesContentDirective), isSignal: true }, { propertyName: "pageSectionsContent", predicate: i0.forwardRef(() => DocPageSectionsContentDirective), isSignal: true }, { propertyName: "pageInteractiveContent", predicate: i0.forwardRef(() => DocPageInteractiveContentDirective), isSignal: true }, { propertyName: "pageAccessibilityContent", predicate: i0.forwardRef(() => DocPageAccessibilityContentDirective), isSignal: true }, { propertyName: "pageApiContent", predicate: i0.forwardRef(() => DocPageApiContentDirective), isSignal: true }, { propertyName: "pageThemingContent", predicate: i0.forwardRef(() => DocPageThemingContentDirective), isSignal: true }, { propertyName: "pageVisualSpecsContent", predicate: i0.forwardRef(() => DocPageVisualSpecsContentDirective) }, { propertyName: "pagePlaygroundContent", predicate: i0.forwardRef(() => DocPagePlaygroundContentDirective) }], viewQueries: [{ propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true, isSignal: true }, { propertyName: "navContent", first: true, predicate: ["navContent"], descendants: true }], ngImport: i0, template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReadyInput()\"\n [euiWarning]=\"isDeprecatedInput()\"\n [euiDanger]=\"isDemoComponentOnly()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacyInput()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecatedInput()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReadyInput()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isDemoComponentOnlyInput()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReadyInput() || isDeprecatedInput()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of mainSamples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"], dependencies: [{ kind: "component", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: ["codeFolder", "showcase"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]", inputs: ["code"] }, { kind: "component", type: i1$1.EuiAlertComponent, selector: "div[euiAlert], eui-alert", inputs: ["e2eAttr", "isCloseable", "isFocusable", "isVisible"], outputs: ["isVisibleChange", "closeAlert"] }, { kind: "component", type: i1$1.EuiAlertTitleComponent, selector: "eui-alert-title" }, { kind: "component", type: i2$2.EuiTabsComponent, selector: "eui-tabs", inputs: ["e2eAttr", "activeTabIndex", "ariaLabel", "isMainNavigation", "isFlat"], outputs: ["tabClose", "tabActivate", "tabClick"] }, { kind: "component", type: i2$2.EuiTabBodyComponent, selector: "eui-tab-body", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i2$2.EuiTabHeaderComponent, selector: "eui-tab-header" }, { kind: "component", type: i2$2.EuiTabHeaderLabelComponent, selector: "eui-tab-header-label" }, { kind: "component", type: i2$2.EuiTabComponent, selector: "eui-tab", inputs: ["id", "url", "e2eAttr", "tooltip", "isClosable", "isDisabled", "isVisible", "isHandleCloseOnClose", "isHandleActivateTab", "euiVariant"] }, { kind: "component", type: i3.EuiPageComponent, selector: "eui-page" }, { kind: "component", type: i3.EuiPageColumnComponent, selector: "eui-page-column", inputs: ["label", "subLabel", "autocloseContainerWidth", "expandAriaLabel", "collapseAriaLabel", "isCollapsible", "isCollapsed", "isCollapsedHidden", "isRightCollapsible", "isHighlighted", "isCollapsedWithIcons", "hasSidebarMenu", "hasHeaderBodyShrinkable", "isAutocloseOnContainerResize", "isAutocloseOnMobile", "hasSubColumns", "hasSubPanels"], outputs: ["collapse", "headerCollapse"] }, { kind: "directive", type: i3.EuiPageColumnBodyContentDirective, selector: "eui-page-column-body" }, { kind: "component", type: i3.EuiPageColumnsComponent, selector: "eui-page-columns", inputs: ["hasPreventMobileRendering"] }, { kind: "component", type: i3.EuiPageContentComponent, selector: "eui-page-content" }, { kind: "component", type: i3.EuiPageHeaderComponent, selector: "eui-page-header", inputs: ["label", "subLabel", "labelTooltip", "subLabelTooltip", "isCollapsible", "isCollapsed", "isHeaderMultilines", "collapsedLabel", "expandedLabel"], outputs: ["collapse"] }, { kind: "component", type: i3.EuiPageHeaderActionItemsComponent, selector: "eui-page-header-action-items" }, { kind: "component", type: i4.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isFilled", "colorPalette"], outputs: ["remove"] }], encapsulation: i0.ViewEncapsulation.None }); }
1402
1410
  }
1403
1411
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DocPageComponent, decorators: [{
1404
1412
  type: Component,
@@ -1408,10 +1416,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
1408
1416
  ...EUI_ALERT,
1409
1417
  ...EUI_TABS,
1410
1418
  ...EUI_PAGE,
1411
- ...EUI_LABEL,
1412
1419
  ...EUI_CHIP,
1413
- ], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReady()\"\n [euiWarning]=\"isDeprecated()\"\n [euiDanger]=\"isLegacy()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacy()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecated()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReady()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReady() || isDeprecated()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of samples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
1414
- }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReadyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecatedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isLegacyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }, { type: i0.Output, args: ["isNavigationVisibleChange"] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirective), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirective), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirective), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirective), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirective), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirective), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirective), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirective), { isSignal: true }] }], pageVisualSpecsContent: [{
1420
+ ], template: "<eui-page>\n <eui-page-content>\n <eui-page-columns>\n <eui-page-column>\n <eui-page-column-body>\n <eui-page-header label=\"{{ label() || id() }}\" subLabel=\"{{ subLabel() }}\" class=\"eui-doc-page-title\">\n <eui-page-header-action-items>\n @if (codeFolder()) {\n <eui-showcase-doc-page-code\n codeFolder=\"{{ codeFolder() }}\"\n showcase=\"{{ showcase() }}\" />\n }\n @if (stateLabel) {\n <eui-chip euiSizeS isFilled\n [euiSuccess]=\"stateLabel === 'ACTIVE'\"\n [euiInfo]=\"isNotReadyInput()\"\n [euiWarning]=\"isDeprecatedInput()\"\n [euiDanger]=\"isDemoComponentOnly()\">\n {{ stateLabel }}\n </eui-chip>\n }\n </eui-page-header-action-items>\n </eui-page-header>\n\n @if (stateLabel === 'LEGACY' || isLegacyInput()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>LEGACY component</eui-alert-title>\n <strong class=\"eui-u-color-danger\">This component will be removed in eUI 21 release (end of 2025)</strong>\n @if (cmp) {\n <div>\n @if (cmp.cmpReplacement !== 'NONE') {\n <div>\n It has been replaced by :\n <strong class=\"eui-u-color-success-darkest\">{{ cmp.cmpReplacement }}</strong>\n </div>\n }\n @if (cmp.cmpReplacement === 'NONE') {\n <div>\n <strong class=\"eui-u-color-danger\"> This component won't be replaced</strong>\n </div>\n }\n @if (cmp.cmpReplacementNote) {\n <div>\n <strong class=\"eui-u-color-warning\">{{ cmp.cmpReplacementNote }}</strong>\n </div>\n }\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'DEPRECATED' || isDeprecatedInput()) {\n <eui-alert euiWarning class=\"eui-u-mb-xl\">\n <eui-alert-title>DEPRECATED component</eui-alert-title>\n This component has been <strong class=\"eui-u-color-danger\">deprecated</strong>\n @if (cmp) {\n <div>\n This component has no replacement in current version AND won't have replacement in next version of eUI,\n <strong class=\"eui-u-color-danger\">it will be removed in eUI 21 release (end of 2025)</strong>\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isNotReadyInput()) {\n <eui-alert euiInfo class=\"eui-u-mb-xl\">\n <eui-alert-title>NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development / some features might be missing, it'll be available in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if (stateLabel === 'NOT_READY' || isDemoComponentOnlyInput()) {\n <eui-alert euiDanger class=\"eui-u-mb-xl\">\n <eui-alert-title>DEMO ONLY - NOT READY for production usage</eui-alert-title>\n @if (cmp) {\n <div>\n This component is under development - it's used for testing and demo purposes only, it shouldn't be used yet. It'll be available as draft in a future release once\n validated.\n </div>\n }\n </eui-alert>\n }\n\n @if ((stateLabel || isNotReadyInput() || isDeprecatedInput()) && stateLabel !== 'ACTIVE') {\n <div class=\"mb-5\"></div>\n }\n\n @if (pageSectionsContent().length === 0) {\n <eui-tabs #tabsContent (tabActivate)=\"onTabActivate($event)\">\n <eui-tab id=\"samples\">\n <eui-tab-header>\n <eui-tab-header-label>OPTIONS & SAMPLES</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (cmp && cmp.metadata) {\n @if (cmpImportModule) {\n <div class=\"doc-page-section-title\">Module import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportModule }}</code></pre>\n }\n @if (cmpImportStandalone) {\n <div class=\"doc-page-section-title\">Component import</div>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandalone }}</code></pre>\n <pre><code tabindex=\"0\" overflow=\"auto\" class=\"language-javascript eui-u-bg-color-grey-5\" euiCode>{{ cmpImportStandaloneCmp }}</code></pre>\n }\n <br />\n }\n <div id=\"overview\" class=\"doc-page-section-title\">Overview</div>\n @if (pageOverviewContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverview\" />\n </div>\n }\n @if (pageOverviewDefaultContent().length > 0) {\n <div>\n <ng-content select=\"docPageOverviewDefault\" />\n </div>\n }\n <br />\n <div id=\"samples\" class=\"doc-page-section-title\">Options & samples</div>\n <ng-content select=\"docPageSamples\" />\n </eui-tab-body>\n </eui-tab>\n @if (hasApi()) {\n <eui-tab id=\"api\">\n <eui-tab-header>\n <eui-tab-header-label>API</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n @if (apiUrlSafe) {\n <div class=\"flex-container\">\n <a href=\"{{ apiUrl }}\" target=\"_blank\" class=\"ms-auto pb-2 eui-u-text-link-external\">Open API page</a>\n </div>\n <div class=\"doc-page-api-iframe-wrapper\">\n <iframe id=\"iframe_api\" [width]=\"'100%'\" height=\"700px\" frameBorder=\"0\" [src]=\"apiUrlSafe\" title=\"API documentation\"></iframe>\n </div>\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if (hasA11y()) {\n <eui-tab id=\"a11y\">\n <eui-tab-header>\n <eui-tab-header-label>A11Y</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"accessibility\" class=\"doc-page-section-title\">Accessibility</div>\n @if (pageAccessibilityContent().length !== 0) {\n <ng-content select=\"docPageAccessibility\" />\n <p>\n For more information regarding Accessibility, please refer to the <a class=\"eui-u-text-link-external\" href=\"https://eui.ecdevops.eu/eui-showcase-ux-components-18.x/showcase-dev-guide/accessibility/intro\" target=\"_blank\">Accessibility Dev Guide</a>.\n </p>\n }\n @if (pageAccessibilityContent().length === 0) {\n No accessibility rules applicable\n }\n </eui-tab-body>\n </eui-tab>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <eui-tab id=\"visual-specs\">\n <eui-tab-header>\n <eui-tab-header-label>VISUAL SPECS</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Visual specifications</div>\n <ng-content select=\"docPageVisualSpecs\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if(pagePlaygroundContent.length > 0) {\n <eui-tab id=\"playground\">\n <eui-tab-header>\n <eui-tab-header-label>PLAYGROUND</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div class=\"doc-page-section-title\">Playground</div>\n <ng-content select=\"docPagePlayground\"></ng-content>\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageThemingContent().length > 0) {\n <eui-tab id=\"theming\">\n <eui-tab-header>\n <eui-tab-header-label>THEMING</eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"theming\" class=\"doc-page-section-title\">Theming</div>\n <ng-content select=\"docPageTheming\" />\n </eui-tab-body>\n </eui-tab>\n }\n @if (pageInteractiveContent().length > 0) {\n <eui-tab id=\"advanced\">\n <eui-tab-header>\n <eui-tab-header-label>\n {{ pageInteractiveContent()[0].title() }}\n </eui-tab-header-label>\n </eui-tab-header>\n <eui-tab-body>\n <div id=\"interactive\" class=\"doc-page-section-title\">\n {{ pageInteractiveContent()[0].subTitle() }}\n </div>\n <ng-content select=\"docPageInteractive\" />\n </eui-tab-body>\n </eui-tab>\n }\n </eui-tabs>\n }\n\n @if (pageSectionsContent().length > 0) {\n @if (sections().length === 0) {\n <div id=\"demo\" class=\"doc-page-section-title\">Demo</div>\n }\n <ng-content select=\"docPageSections\" />\n }\n\n </eui-page-column-body>\n </eui-page-column>\n\n @if (isNavigationVisible()) {\n <eui-page-column\n class=\"eui-u-hidden-mobile eui-u-display-print-hidden\"\n label=\"On this page\"\n euiSizeVariant=\"4xl\"\n isCollapsible\n isRightCollapsible>\n <eui-page-column-body>\n <div class=\"doc-page-navigation-content\" #navContent tabindex=\"0\">\n <ul class=\"doc-page-navigation\">\n @if (pageSectionsContent().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'samples'\"\n (click)=\"onTabNavClick('samples')\">\n <span>OPTIONS & SAMPLES</span>\n </li>\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @if (categories.length > 0) {\n @if (hasCategories) {\n @for (category of categories; track category) {\n @if (category.name === 'Base') {\n @for (sample of category.samples; track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n } @else {\n @if (category.name !== 'Base') {\n <div class=\"doc-page-navigation-category\">{{category.name}}</div>\n }\n @for (sample of category.samples; track sample) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item doc-page-navigation-item-sub\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id()\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n } @else {\n @for (sample of mainSamples(); track sample; let i = $index) {\n <ul class=\"doc-page-navigation-list\">\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === sample.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(sample.id(), 0)\">\n <span>{{ sample.label() || sample.id() }}</span>\n </li>\n </ul>\n }\n }\n }\n </li>\n @if (hasApi()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'api'\"\n (click)=\"onTabNavClick('api')\">\n <span>API</span>\n </li>\n }\n @if (hasA11y()) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'a11y'\"\n (click)=\"onTabNavClick('a11y')\">\n <span>A11Y</span>\n </li>\n }\n <!-- OPTIONAL TABS-->\n @if (pageThemingContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'theming'\"\n (click)=\"onNavClick('theming', 3)\">\n <span>THEMING</span>\n </li>\n @if (pageInteractiveContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'advanced'\"\n (click)=\"onNavClick('advanced', 4)\">\n <span>{{ pageInteractiveContent()[0].title() }}</span>\n </li>\n }\n @if(pageVisualSpecsContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'visual-specs'\"\n (click)=\"onTabNavClick('visual-specs')\">\n <span>VISUAL SPECS</span>\n </li>\n }\n @if (pagePlaygroundContent.length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'playground'\"\n (click)=\"onTabNavClick('playground')\">\n <span>PLAYGROUND</span>\n </li>\n }\n }\n }\n @if (pageSectionsContent().length > 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'sections'\"\n (click)=\"onNavClick('sections', null)\">\n <span>Sections</span>\n </li>\n @if (sections().length === 0) {\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === 'demo'\"\n (click)=\"onNavClick('demo', null)\">\n <span>Demo</span>\n </li>\n }\n @if (sections().length > 0) {\n <li class=\"doc-page-navigation-item doc-page-navigation-sub\">\n @for (section of sections(); track section; let i = $index) {\n <ul>\n <li\n class=\"doc-page-navigation-item\"\n [class.doc-page-navigation-item--selected]=\"fragmentId === section.id() || (!fragmentId && i === 0)\"\n (click)=\"onNavClick(section.id(), null)\">\n <span>{{ section.label() || section.id() }}</span>\n </li>\n </ul>\n }\n </li>\n }\n }\n </ul>\n </div>\n </eui-page-column-body>\n </eui-page-column>\n }\n\n </eui-page-columns>\n </eui-page-content>\n</eui-page>\n", styles: [".eui-doc-page .eui-tab-content{padding-left:var(--eui-s-s)!important;padding-right:var(--eui-s-xs)!important}.eui-doc-page .eui-doc-page-title{padding-bottom:var(--eui-s-2xl)}.eui-doc-page .eui-doc-page-title .eui-common-header__label-text{font:var(--eui-f-4xl-semi-bold)!important}.eui-doc-page .doc-page-navigation{margin:0;padding:0;position:sticky;top:var(--eui-s-xl)}.eui-doc-page .doc-page-navigation .doc-page-navigation-list{margin:0;padding:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item{color:var(--eui-c-primary);cursor:pointer;overflow:hidden;padding:var(--eui-s-3xs) var(--eui-s-3xs);text-overflow:ellipsis;white-space:nowrap;list-style:none;border-left:2px solid transparent;transition:all .15s ease}.eui-doc-page .doc-page-navigation .doc-page-navigation-item span{font-weight:600;color:var(--eui-c-primary);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item:not(.doc-page-navigation-sub):hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub{border-left:none;padding-left:0}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item span{font-weight:400;padding-left:var(--eui-s-3xs);font-size:var(--eui-f-size-s)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-sub .doc-page-navigation-item:hover{background-color:var(--eui-c-secondary-surface-light);border-left-color:var(--eui-c-secondary-border-light)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected{background-color:var(--eui-c-primary-surface-light);border-left-color:var(--eui-c-primary)}.eui-doc-page .doc-page-navigation .doc-page-navigation-item.doc-page-navigation-item--selected span{font-weight:700}.eui-doc-page .doc-page-navigation .doc-page-navigation-item-sub{padding-left:var(--eui-s-xs)}.eui-doc-page .doc-page-navigation .doc-page-navigation-category{padding-left:var(--eui-s-3xs);color:var(--eui-c-text-light);margin-top:var(--eui-s-m);margin-bottom:var(--eui-s-3xs);font-weight:700;font-size:var(--eui-f-size-xs);text-transform:uppercase;letter-spacing:.5px}.eui-doc-page .doc-page-api-iframe-wrapper{display:flex;justify-content:space-around;margin:0}.eui-doc-page .doc-page-section-title{margin-top:var(--eui-s-3xl);margin-bottom:var(--eui-s-xl);color:var(--eui-c-primary);letter-spacing:-1px;font:var(--eui-f-3xl-medium)}.eui-doc-page .doc-page-section-subtitle{font:var(--eui-f-xl-medium);margin:var(--eui-s-3xl) 0 var(--eui-s-s);padding-bottom:var(--eui-s-3xs);width:auto;display:table;color:var(--eui-c-text)}.eui-doc-page .doc-content h1{color:var(--eui-c-primary-dark);font:var(--eui-f-4xl-semi-bold)}.eui-doc-page .doc-content h2{color:var(--eui-c-primary-dark);margin-top:var(--eui-s-3xl);font:var(--eui-f-3xl-bold)}.eui-doc-page .doc-content h3{color:var(--eui-c-primary-light);margin-top:var(--eui-s-xl);font:var(--eui-f-l-medium)}.eui-doc-page .doc-content h4{font:var(--eui-f-m-semi-bold);color:var(--eui-c-primary-light)}.eui-doc-page .doc-content h5{font:var(--eui-f);text-decoration:underline;font-style:italic}.eui-doc-page .doc-content ul{margin-top:1rem}.eui-doc-page .doc-content ul li{list-style:circle;margin-left:1rem}.eui-doc-page .doc-content ol{list-style:none;counter-reset:item;margin-top:1rem}.eui-doc-page .doc-content ol li{counter-increment:item;margin-bottom:1rem}.eui-doc-page .doc-content ol li:before{margin-right:.5rem;margin-left:-.75rem;content:counter(item);background:var(--eui-c-info-surface-medium);border-radius:50%;color:var(--eui-c-black);width:1.75rem;height:1.75rem;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}.eui-doc-page .doc-content ol li p:first-child{display:inline-block}.eui-doc-page .doc-content ol ol li{margin-top:1rem}.eui-doc-page .doc-content ol ol li:before{margin-left:20px;width:1.25rem;font-size:1rem;font-weight:400;background:transparent;color:var(--eui-c-primary);line-height:1.5rem}.eui-doc-page .doc-content em{color:var(--eui-c-danger);font-style:normal;font-weight:700}.eui-doc-page .doc-content em.info{color:var(--eui-c-primary)}.eui-doc-page .doc-content em.warning{color:var(--eui-c-warning)}.eui-doc-page .doc-content table{border-collapse:collapse;width:100%}.eui-doc-page .doc-content table,.eui-doc-page .doc-content th,.eui-doc-page .doc-content td{padding:.25rem;border:1px solid var(--eui-c-secondary-border)}.eui-doc-page .doc-content td{text-align:left}.eui-doc-page .doc-content code.language-none{display:inline-block;background-color:var(--eui-c-secondary-surface-light)}.eui-doc-page .doc-content img{max-width:100%}\n"] }]
1421
+ }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], isNotReady: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNotReady", required: false }] }], isDeprecated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDeprecated", required: false }] }], isDemoComponentOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDemoComponentOnly", required: false }] }], isLegacy: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLegacy", required: false }] }], codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], isNavigationVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNavigationVisible", required: false }] }, { type: i0.Output, args: ["isNavigationVisibleChange"] }], hasApi: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasApi", required: false }] }], hasA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasA11y", required: false }] }], customApiUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "customApiUrl", required: false }] }], samples: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSampleComponent), { ...{ descendants: true }, isSignal: true }] }], sections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DocSectionComponent), { ...{ descendants: true }, isSignal: true }] }], pageOverviewContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewContentDirective), { isSignal: true }] }], pageOverviewDefaultContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageOverviewDefaultContentDirective), { isSignal: true }] }], pageSamplesContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSamplesContentDirective), { isSignal: true }] }], pageSectionsContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageSectionsContentDirective), { isSignal: true }] }], pageInteractiveContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageInteractiveContentDirective), { isSignal: true }] }], pageAccessibilityContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageAccessibilityContentDirective), { isSignal: true }] }], pageApiContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageApiContentDirective), { isSignal: true }] }], pageThemingContent: [{ type: i0.ContentChildren, args: [forwardRef(() => DocPageThemingContentDirective), { isSignal: true }] }], pageVisualSpecsContent: [{
1415
1422
  type: ContentChildren,
1416
1423
  args: [forwardRef(() => DocPageVisualSpecsContentDirective)]
1417
1424
  }], pagePlaygroundContent: [{
@@ -1540,7 +1547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
1540
1547
  args: [{ selector: 'eui-showcase-doc-page-code-fab', imports: [
1541
1548
  ...EUI_ICON,
1542
1549
  ...EUI_DIALOG,
1543
- ...EUI_BUTTON
1550
+ ...EUI_BUTTON,
1544
1551
  ], template: "@if (hasContentDialog()) {\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\" />\n </div>\n </div>\n\n <eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n @if (codeFolder()) {\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\" /> VIEW SOURCES\n </button>\n }\n <ng-content />\n <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>\n </eui-dialog>\n\n} @else {\n\n <div class=\"eui-button-fixed eui-u-mb-6xl\">\n <button class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-cta-surface\" (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" />\n </button>\n </div>\n\n}\n\n" }]
1545
1552
  }], propDecorators: { codeFolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeFolder", required: false }] }], showcase: [{ type: i0.Input, args: [{ isSignal: true, alias: "showcase", required: false }] }], hasContentDialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasContentDialog", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }] } });
1546
1553