@eui/showcase 18.2.13-snapshot-1747380207562 → 18.2.13

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 (6) hide show
  1. package/esm2022/lib/components/doc-playground-device/doc-playground-device.component.mjs +53 -14
  2. package/fesm2022/eui-showcase.mjs +57 -18
  3. package/fesm2022/eui-showcase.mjs.map +1 -1
  4. package/lib/components/doc-playground-device/doc-playground-device.component.d.ts +7 -1
  5. package/lib/components/doc-playground-device/doc-playground-device.component.d.ts.map +1 -1
  6. package/package.json +4 -4
package/esm2022/lib/components/doc-playground-device/doc-playground-device.component.mjs CHANGED
@@ -4,16 +4,21 @@ import { EuiIconModule } from '@eui/components/eui-icon';
4
4
  import { DEVICE_SIZES } from './device-sizes.const';
5
5
  import * as i0 from "@angular/core";
6
6
  import * as i1 from "@angular/platform-browser";
7
- import * as i2 from "@eui/components/eui-select";
8
- import * as i3 from "@eui/components/eui-icon";
7
+ import * as i2 from "@angular/cdk/layout";
8
+ import * as i3 from "@eui/components/eui-select";
9
+ import * as i4 from "@eui/components/eui-icon";
9
10
  export class DocPlaygroundDeviceComponent {
10
- constructor(sanitizer) {
11
+ constructor(sanitizer, breakpointObserver) {
11
12
  this.sanitizer = sanitizer;
13
+ this.breakpointObserver = breakpointObserver;
12
14
  this.url = input();
13
15
  this.showcaseNameWithVersion = input();
14
16
  this.hasPreviewToolbar = input(true, { transform: booleanAttribute });
15
17
  this.isPreviewToolbarDisabled = input(false, { transform: booleanAttribute });
18
+ this.isLandscapeView = false;
16
19
  this.devices = [];
20
+ this.selectedDevice = { name: 'phone-small', width: 375, height: 667 };
21
+ this.isMobile = false;
17
22
  }
18
23
  ngOnInit() {
19
24
  const url = window.location;
@@ -28,31 +33,65 @@ export class DocPlaygroundDeviceComponent {
28
33
  }
29
34
  this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(shellUrl);
30
35
  this.loadDevices();
36
+ this.breakpointObserver.observe(['(max-width: 767px)']).subscribe(result => {
37
+ this.isMobile = result.matches;
38
+ if (this.isMobile) {
39
+ this.isLandscapeView = false;
40
+ }
41
+ this.onDeviceChange(event);
42
+ });
31
43
  }
32
44
  toggleOrientation() {
33
45
  this.isLandscapeView = !this.isLandscapeView;
46
+ this.updateToolbarWidth();
34
47
  }
35
48
  onDeviceChange(event) {
36
- const selectElement = event.target;
37
- const value = selectElement.value;
38
- const selectedDevice = this.devices.find(d => d.name === value);
39
- if (selectedDevice && this.containerRef) {
49
+ const selectElement = event?.target;
50
+ const value = selectElement?.value;
51
+ const foundDevice = this.devices.find(d => d.name === value);
52
+ if (this.isMobile) {
53
+ this.selectedDevice = { name: 'phone-small', width: 375, height: 667 };
54
+ this.updateToolbarWidth();
55
+ }
56
+ else {
57
+ this.updateToolbarWidth();
58
+ }
59
+ if (foundDevice && !this.isMobile) {
60
+ this.selectedDevice = foundDevice;
40
61
  const el = this.containerRef.nativeElement;
41
- el.style.setProperty('--device-width', `${selectedDevice.width}px`);
42
- el.style.setProperty('--device-height', `${selectedDevice.height}px`);
62
+ el.style.setProperty('--device-width', `${foundDevice.width}px`);
63
+ el.style.setProperty('--device-height', `${foundDevice.height}px`);
64
+ this.updateToolbarWidth();
65
+ }
66
+ }
67
+ updateToolbarWidth() {
68
+ if (!this.previewToolbar || !this.selectedDevice)
69
+ return;
70
+ const previewToolbar = this.previewToolbar.nativeElement;
71
+ if (this.isMobile) {
72
+ previewToolbar.style.setProperty('--toolbar-width', '100%');
73
+ }
74
+ else {
75
+ const toolbarWidth = this.isLandscapeView
76
+ ? this.selectedDevice.height
77
+ : this.selectedDevice.width;
78
+ previewToolbar.style.setProperty('--toolbar-width', `${toolbarWidth}px`);
43
79
  }
44
80
  }
45
81
  loadDevices() {
46
82
  this.devices = DEVICE_SIZES;
47
83
  }
48
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPlaygroundDeviceComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
49
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DocPlaygroundDeviceComponent, isStandalone: true, selector: "eui-showcase-doc-playground-device", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, showcaseNameWithVersion: { classPropertyName: "showcaseNameWithVersion", publicName: "showcaseNameWithVersion", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewToolbar: { classPropertyName: "hasPreviewToolbar", publicName: "hasPreviewToolbar", isSignal: true, isRequired: false, transformFunction: null }, isPreviewToolbarDisabled: { classPropertyName: "isPreviewToolbarDisabled", publicName: "isPreviewToolbarDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["deviceWrapper"], descendants: true }], ngImport: i0, template: "@if (hasPreviewToolbar()) {\n <div class=\"device-preview-toolbar\" [class.device-preview-toolbar--disabled]=\"isPreviewToolbarDisabled()\">\n <div class=\"device-preview-toolbar__devices\">\n <select class=\"eui-u-cursor-pointer\" euiSelect name=\"device-sizes\" aria-label=\"device-sizes\" [value]=\"'phone-small'\" (change)=\"onDeviceChange($event)\">\n @for (device of devices; track device) {\n <option [value]=\"device.name\">\n {{ device.label }}\n </option>\n }\n </select>\n </div>\n <button class=\"device-preview-toolbar__orientation\" (click)=\"toggleOrientation()\">\n <eui-icon-svg [icon]=\"!isLandscapeView ? 'phone-portrait:outline' : 'phone-landscape:outline'\"/>\n <span>{{ isLandscapeView ? 'Landscape' : 'Portrait' }}</span>\n </button>\n <a [href]=\"urlSafe\" class=\"device-preview-toolbar__full-screen\" target=\"_blank\">\n |<eui-icon-svg icon=\"open:outline\"/>\n <span>Full Screen</span>\n </a>\n </div>\n}\n<div class=\"device-wrapper\" #deviceWrapper [class.landscape]=\"isLandscapeView\">\n <iframe id=\"iframe-playground\" loading=\"lazy\" class=\"device-frame\" width=\"100%\" height=\"100%\" frameBorder=\"0\" [src]=\"urlSafe\"></iframe>\n</div>\n\n", styles: [":root{--device-width: 375px;--device-height: 667px}.device-wrapper{border:.5rem solid var(--eui-c-neutral-max);border-radius:2rem;width:var(--device-width);height:var(--device-height);transition:transform .5s ease,width .5s,height .5s;transform-origin:center center;position:relative}@media (min-width: 768px){.device-wrapper{width:var(--device-width)}}.device-wrapper.landscape{transform:rotate(0);width:var(--device-height);height:var(--device-width)}.device-wrapper.landscape .device-frame{height:calc(var(--device-width) - var(--eui-s-m));width:calc(var(--device-height) - var(--eui-s-m))}.device-frame{border-radius:1.5rem;height:calc(var(--device-height) - var(--eui-s-m));transition:transform .5s ease,width .5s,height .5s;transform-origin:center center}@media (min-width: 768px){.device-frame{width:calc(var(--device-width) - var(--eui-s-m))}}@media screen and (max-width: 767px){.device-wrapper{border:none;border-radius:0;width:100%}.device-frame{border-radius:0}}.device-preview-toolbar{font:var(--eui-f-m-compact);display:flex;align-items:center;justify-content:center;height:68px;padding:var(--eui-s-s) var(--eui-s-s);border-radius:var(--eui-br-xl);box-shadow:0 1px 3px #0003;margin-bottom:var(--eui-s-m)}.device-preview-toolbar__orientation{background-color:transparent;border:none;display:flex;align-items:center;margin-left:var(--eui-s-m);margin-right:var(--eui-s-m)}.device-preview-toolbar__orientation eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs);color:var(--eui-c-neutral)}.device-preview-toolbar__full-screen{display:flex;align-items:center;color:var(--eui-c-neutral);text-decoration:none}.device-preview-toolbar__full-screen eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs);margin-left:var(--eui-s-m)}.device-preview-toolbar--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: EuiSelectModule }, { kind: "component", type: i2.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i2.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i2.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: EuiIconModule }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], encapsulation: i0.ViewEncapsulation.None }); }
84
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPlaygroundDeviceComponent, deps: [{ token: i1.DomSanitizer }, { token: i2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
85
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DocPlaygroundDeviceComponent, isStandalone: true, selector: "eui-showcase-doc-playground-device", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, showcaseNameWithVersion: { classPropertyName: "showcaseNameWithVersion", publicName: "showcaseNameWithVersion", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewToolbar: { classPropertyName: "hasPreviewToolbar", publicName: "hasPreviewToolbar", isSignal: true, isRequired: false, transformFunction: null }, isPreviewToolbarDisabled: { classPropertyName: "isPreviewToolbarDisabled", publicName: "isPreviewToolbarDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["deviceWrapper"], descendants: true }, { propertyName: "previewToolbar", first: true, predicate: ["previewToolbar"], descendants: true }], ngImport: i0, template: "@if (hasPreviewToolbar()) {\n <div #previewToolbar class=\"device-preview-toolbar\" [class.device-preview-toolbar--disabled]=\"isPreviewToolbarDisabled()\">\n <div class=\"device-preview-toolbar__devices\">\n <select class=\"eui-u-cursor-pointer\" euiSelect name=\"device-sizes\" aria-label=\"device-sizes\" [value]=\"'phone-small'\" (change)=\"onDeviceChange($event)\">\n @for (device of devices; track device) {\n <option [value]=\"device.name\">\n {{ device.label }}\n </option>\n }\n </select>\n </div>\n <button class=\"device-preview-toolbar__orientation eui-u-cursor-pointer\" (click)=\"toggleOrientation()\">\n <eui-icon-svg [icon]=\"!isLandscapeView ? 'phone-portrait:outline' : 'phone-landscape:outline'\"/> |\n </button>\n <a [href]=\"urlSafe\" class=\"device-preview-toolbar__full-screen\" target=\"_blank\">\n <eui-icon-svg icon=\"open:outline\"/>\n <span>Full Screen</span>\n </a>\n </div>\n}\n<div class=\"device-wrapper\" #deviceWrapper [class.landscape]=\"isLandscapeView\">\n <iframe id=\"iframe-playground\" loading=\"lazy\" class=\"device-frame\" width=\"100%\" height=\"100%\" frameBorder=\"0\" [src]=\"urlSafe\"></iframe>\n</div>\n", styles: [":root{--device-width: 375px;--device-height: 667px;--toolbar-width: 375px}@media (max-width: 767px){:root{--toolbar-width: 100%}}.device-wrapper{border:.5rem solid var(--eui-c-neutral-max);border-radius:2rem;width:var(--device-width);height:var(--device-height);transition:transform .5s ease,width .5s,height .5s;transform-origin:center center;position:relative}@media (min-width: 768px){.device-wrapper{width:var(--device-width)}}.device-wrapper.landscape{transform:rotate(0);width:var(--device-height);height:var(--device-width)}.device-wrapper.landscape .device-frame{height:calc(var(--device-width) - var(--eui-s-m));width:calc(var(--device-height) - var(--eui-s-m))}.device-frame{border-radius:1.5rem;height:calc(var(--device-height) - var(--eui-s-m));transition:transform .5s ease,width .5s,height .5s;transform-origin:center center}@media (min-width: 768px){.device-frame{width:calc(var(--device-width) - var(--eui-s-m))}}@media screen and (max-width: 767px){.device-wrapper{width:100%}}.device-preview-toolbar{font:var(--eui-f-m-compact);display:flex;align-items:center;justify-content:center;padding:var(--eui-s-xs);border-radius:var(--eui-br-xl);box-shadow:0 1px 3px #0003;margin-bottom:var(--eui-s-m);width:var(--toolbar-width);transition:transform .5s ease,width .5s,height .5s}@media (max-width: 767px){.device-preview-toolbar__devices{display:none}}.device-preview-toolbar__orientation{background-color:transparent;border:none;display:flex;align-items:center;margin-left:var(--eui-s-m);margin-right:var(--eui-s-m)}.device-preview-toolbar__orientation eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);color:var(--eui-c-neutral);margin-right:var(--eui-s-m)}@media (max-width: 767px){.device-preview-toolbar__orientation{display:none}}.device-preview-toolbar__full-screen{display:flex;align-items:center;color:var(--eui-c-neutral);text-decoration:none}.device-preview-toolbar__full-screen eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs)}.device-preview-toolbar--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: EuiSelectModule }, { kind: "component", type: i3.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i3.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i3.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: EuiIconModule }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], encapsulation: i0.ViewEncapsulation.None }); }
50
86
  }
51
87
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPlaygroundDeviceComponent, decorators: [{
52
88
  type: Component,
53
- args: [{ selector: 'eui-showcase-doc-playground-device', encapsulation: ViewEncapsulation.None, standalone: true, imports: [EuiSelectModule, EuiIconModule], template: "@if (hasPreviewToolbar()) {\n <div class=\"device-preview-toolbar\" [class.device-preview-toolbar--disabled]=\"isPreviewToolbarDisabled()\">\n <div class=\"device-preview-toolbar__devices\">\n <select class=\"eui-u-cursor-pointer\" euiSelect name=\"device-sizes\" aria-label=\"device-sizes\" [value]=\"'phone-small'\" (change)=\"onDeviceChange($event)\">\n @for (device of devices; track device) {\n <option [value]=\"device.name\">\n {{ device.label }}\n </option>\n }\n </select>\n </div>\n <button class=\"device-preview-toolbar__orientation\" (click)=\"toggleOrientation()\">\n <eui-icon-svg [icon]=\"!isLandscapeView ? 'phone-portrait:outline' : 'phone-landscape:outline'\"/>\n <span>{{ isLandscapeView ? 'Landscape' : 'Portrait' }}</span>\n </button>\n <a [href]=\"urlSafe\" class=\"device-preview-toolbar__full-screen\" target=\"_blank\">\n |<eui-icon-svg icon=\"open:outline\"/>\n <span>Full Screen</span>\n </a>\n </div>\n}\n<div class=\"device-wrapper\" #deviceWrapper [class.landscape]=\"isLandscapeView\">\n <iframe id=\"iframe-playground\" loading=\"lazy\" class=\"device-frame\" width=\"100%\" height=\"100%\" frameBorder=\"0\" [src]=\"urlSafe\"></iframe>\n</div>\n\n", styles: [":root{--device-width: 375px;--device-height: 667px}.device-wrapper{border:.5rem solid var(--eui-c-neutral-max);border-radius:2rem;width:var(--device-width);height:var(--device-height);transition:transform .5s ease,width .5s,height .5s;transform-origin:center center;position:relative}@media (min-width: 768px){.device-wrapper{width:var(--device-width)}}.device-wrapper.landscape{transform:rotate(0);width:var(--device-height);height:var(--device-width)}.device-wrapper.landscape .device-frame{height:calc(var(--device-width) - var(--eui-s-m));width:calc(var(--device-height) - var(--eui-s-m))}.device-frame{border-radius:1.5rem;height:calc(var(--device-height) - var(--eui-s-m));transition:transform .5s ease,width .5s,height .5s;transform-origin:center center}@media (min-width: 768px){.device-frame{width:calc(var(--device-width) - var(--eui-s-m))}}@media screen and (max-width: 767px){.device-wrapper{border:none;border-radius:0;width:100%}.device-frame{border-radius:0}}.device-preview-toolbar{font:var(--eui-f-m-compact);display:flex;align-items:center;justify-content:center;height:68px;padding:var(--eui-s-s) var(--eui-s-s);border-radius:var(--eui-br-xl);box-shadow:0 1px 3px #0003;margin-bottom:var(--eui-s-m)}.device-preview-toolbar__orientation{background-color:transparent;border:none;display:flex;align-items:center;margin-left:var(--eui-s-m);margin-right:var(--eui-s-m)}.device-preview-toolbar__orientation eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs);color:var(--eui-c-neutral)}.device-preview-toolbar__full-screen{display:flex;align-items:center;color:var(--eui-c-neutral);text-decoration:none}.device-preview-toolbar__full-screen eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs);margin-left:var(--eui-s-m)}.device-preview-toolbar--disabled{opacity:.5;pointer-events:none}\n"] }]
54
- }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { containerRef: [{
89
+ args: [{ selector: 'eui-showcase-doc-playground-device', encapsulation: ViewEncapsulation.None, standalone: true, imports: [EuiSelectModule, EuiIconModule], template: "@if (hasPreviewToolbar()) {\n <div #previewToolbar class=\"device-preview-toolbar\" [class.device-preview-toolbar--disabled]=\"isPreviewToolbarDisabled()\">\n <div class=\"device-preview-toolbar__devices\">\n <select class=\"eui-u-cursor-pointer\" euiSelect name=\"device-sizes\" aria-label=\"device-sizes\" [value]=\"'phone-small'\" (change)=\"onDeviceChange($event)\">\n @for (device of devices; track device) {\n <option [value]=\"device.name\">\n {{ device.label }}\n </option>\n }\n </select>\n </div>\n <button class=\"device-preview-toolbar__orientation eui-u-cursor-pointer\" (click)=\"toggleOrientation()\">\n <eui-icon-svg [icon]=\"!isLandscapeView ? 'phone-portrait:outline' : 'phone-landscape:outline'\"/> |\n </button>\n <a [href]=\"urlSafe\" class=\"device-preview-toolbar__full-screen\" target=\"_blank\">\n <eui-icon-svg icon=\"open:outline\"/>\n <span>Full Screen</span>\n </a>\n </div>\n}\n<div class=\"device-wrapper\" #deviceWrapper [class.landscape]=\"isLandscapeView\">\n <iframe id=\"iframe-playground\" loading=\"lazy\" class=\"device-frame\" width=\"100%\" height=\"100%\" frameBorder=\"0\" [src]=\"urlSafe\"></iframe>\n</div>\n", styles: [":root{--device-width: 375px;--device-height: 667px;--toolbar-width: 375px}@media (max-width: 767px){:root{--toolbar-width: 100%}}.device-wrapper{border:.5rem solid var(--eui-c-neutral-max);border-radius:2rem;width:var(--device-width);height:var(--device-height);transition:transform .5s ease,width .5s,height .5s;transform-origin:center center;position:relative}@media (min-width: 768px){.device-wrapper{width:var(--device-width)}}.device-wrapper.landscape{transform:rotate(0);width:var(--device-height);height:var(--device-width)}.device-wrapper.landscape .device-frame{height:calc(var(--device-width) - var(--eui-s-m));width:calc(var(--device-height) - var(--eui-s-m))}.device-frame{border-radius:1.5rem;height:calc(var(--device-height) - var(--eui-s-m));transition:transform .5s ease,width .5s,height .5s;transform-origin:center center}@media (min-width: 768px){.device-frame{width:calc(var(--device-width) - var(--eui-s-m))}}@media screen and (max-width: 767px){.device-wrapper{width:100%}}.device-preview-toolbar{font:var(--eui-f-m-compact);display:flex;align-items:center;justify-content:center;padding:var(--eui-s-xs);border-radius:var(--eui-br-xl);box-shadow:0 1px 3px #0003;margin-bottom:var(--eui-s-m);width:var(--toolbar-width);transition:transform .5s ease,width .5s,height .5s}@media (max-width: 767px){.device-preview-toolbar__devices{display:none}}.device-preview-toolbar__orientation{background-color:transparent;border:none;display:flex;align-items:center;margin-left:var(--eui-s-m);margin-right:var(--eui-s-m)}.device-preview-toolbar__orientation eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);color:var(--eui-c-neutral);margin-right:var(--eui-s-m)}@media (max-width: 767px){.device-preview-toolbar__orientation{display:none}}.device-preview-toolbar__full-screen{display:flex;align-items:center;color:var(--eui-c-neutral);text-decoration:none}.device-preview-toolbar__full-screen eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs)}.device-preview-toolbar--disabled{opacity:.5;pointer-events:none}\n"] }]
90
+ }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2.BreakpointObserver }], propDecorators: { containerRef: [{
55
91
  type: ViewChild,
56
92
  args: ['deviceWrapper']
93
+ }], previewToolbar: [{
94
+ type: ViewChild,
95
+ args: ['previewToolbar']
57
96
  }] } });
58
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9jLXBsYXlncm91bmQtZGV2aWNlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9kb2MtcGxheWdyb3VuZC1kZXZpY2UvZG9jLXBsYXlncm91bmQtZGV2aWNlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9kb2MtcGxheWdyb3VuZC1kZXZpY2UvZG9jLXBsYXlncm91bmQtZGV2aWNlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLGlCQUFpQixFQUFjLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVySCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQzs7Ozs7QUFXcEQsTUFBTSxPQUFPLDRCQUE0QjtJQVlyQyxZQUFvQixTQUF1QjtRQUF2QixjQUFTLEdBQVQsU0FBUyxDQUFjO1FBWDNDLFFBQUcsR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUN0Qiw0QkFBdUIsR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUMxQyxzQkFBaUIsR0FBRyxLQUFLLENBQUMsSUFBSSxFQUFFLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLENBQUMsQ0FBQztRQUNqRSw2QkFBd0IsR0FBRyxLQUFLLENBQUMsS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLENBQUMsQ0FBQztRQU16RSxZQUFPLEdBQWEsRUFBRSxDQUFDO0lBRXVCLENBQUM7SUFFL0MsUUFBUTtRQUNKLE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUM7UUFDNUIsTUFBTSxRQUFRLEdBQUcsR0FBRyxDQUFDLFFBQVEsQ0FBQztRQUM5QixNQUFNLElBQUksR0FBRyxHQUFHLENBQUMsSUFBSSxDQUFDO1FBRXRCLElBQUksUUFBZ0IsQ0FBQztRQUNyQixJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUNqQyxRQUFRLEdBQUcsR0FBRyxRQUFRLEtBQUssSUFBSSxJQUFJLElBQUksQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDO1FBQ3BELENBQUM7YUFBTSxDQUFDO1lBQ0osUUFBUSxHQUFHLEdBQUcsUUFBUSxLQUFLLElBQUksSUFBSSxJQUFJLENBQUMsdUJBQXVCLEVBQUUsSUFBSSxJQUFJLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQztRQUN0RixDQUFDO1FBRUQsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLDhCQUE4QixDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBRXZFLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsaUJBQWlCO1FBQ2IsSUFBSSxDQUFDLGVBQWUsR0FBRyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUM7SUFDakQsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFLO1FBQ2hCLE1BQU0sYUFBYSxHQUFHLEtBQUssQ0FBQyxNQUEyQixDQUFDO1FBQ3hELE1BQU0sS0FBSyxHQUFHLGFBQWEsQ0FBQyxLQUFLLENBQUM7UUFDbEMsTUFBTSxjQUFjLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxLQUFLLEtBQUssQ0FBQyxDQUFDO1FBQ2hFLElBQUksY0FBYyxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUN0QyxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQztZQUMzQyxFQUFFLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxnQkFBZ0IsRUFBRSxHQUFHLGNBQWMsQ0FBQyxLQUFLLElBQUksQ0FBQyxDQUFDO1lBQ3BFLEVBQUUsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLGlCQUFpQixFQUFFLEdBQUcsY0FBYyxDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUM7UUFDMUUsQ0FBQztJQUNMLENBQUM7SUFFTyxXQUFXO1FBQ2YsSUFBSSxDQUFDLE9BQU8sR0FBRyxZQUFZLENBQUM7SUFDaEMsQ0FBQzsrR0FoRFEsNEJBQTRCO21HQUE1Qiw0QkFBNEIsczBCQ2Z6QywrMkNBeUJBLHM0RERaYyxlQUFlLGllQUFFLGFBQWE7OzRGQUUvQiw0QkFBNEI7a0JBUnhDLFNBQVM7K0JBQ0ksb0NBQW9DLGlCQUcvQixpQkFBaUIsQ0FBQyxJQUFJLGNBQ3pCLElBQUksV0FDUCxDQUFDLGVBQWUsRUFBRSxhQUFhLENBQUM7aUZBU2IsWUFBWTtzQkFBdkMsU0FBUzt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgT25Jbml0LCBWaWV3RW5jYXBzdWxhdGlvbiwgRWxlbWVudFJlZiwgVmlld0NoaWxkLCBib29sZWFuQXR0cmlidXRlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTYWZlUmVzb3VyY2VVcmwsIERvbVNhbml0aXplciB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHsgRXVpU2VsZWN0TW9kdWxlIH0gZnJvbSAnQGV1aS9jb21wb25lbnRzL2V1aS1zZWxlY3QnO1xuaW1wb3J0IHsgRXVpSWNvbk1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktaWNvbic7XG5pbXBvcnQgeyBERVZJQ0VfU0laRVMgfSBmcm9tICcuL2RldmljZS1zaXplcy5jb25zdCc7XG5pbXBvcnQgeyBEZXZpY2UgfSBmcm9tICcuL2RldmljZS1zaXplcy5jb25zdCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZXVpLXNob3djYXNlLWRvYy1wbGF5Z3JvdW5kLWRldmljZScsXG4gICAgdGVtcGxhdGVVcmw6ICdkb2MtcGxheWdyb3VuZC1kZXZpY2UuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2RvYy1wbGF5Z3JvdW5kLWRldmljZS5jb21wb25lbnQuc2NzcyddLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBpbXBvcnRzOiBbRXVpU2VsZWN0TW9kdWxlLCBFdWlJY29uTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgRG9jUGxheWdyb3VuZERldmljZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgdXJsID0gaW5wdXQ8c3RyaW5nPigpO1xuICAgIHNob3djYXNlTmFtZVdpdGhWZXJzaW9uID0gaW5wdXQ8c3RyaW5nPigpO1xuICAgIGhhc1ByZXZpZXdUb29sYmFyID0gaW5wdXQodHJ1ZSwgeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSk7XG4gICAgaXNQcmV2aWV3VG9vbGJhckRpc2FibGVkID0gaW5wdXQoZmFsc2UsIHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pO1xuICAgIGlzTGFuZHNjYXBlVmlldzogYm9vbGVhbjtcblxuICAgIEBWaWV3Q2hpbGQoJ2RldmljZVdyYXBwZXInKSBjb250YWluZXJSZWYhOiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PjtcblxuICAgIHB1YmxpYyB1cmxTYWZlOiBTYWZlUmVzb3VyY2VVcmw7XG4gICAgZGV2aWNlczogRGV2aWNlW10gPSBbXTtcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgc2FuaXRpemVyOiBEb21TYW5pdGl6ZXIpIHt9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgY29uc3QgdXJsID0gd2luZG93LmxvY2F0aW9uO1xuICAgICAgICBjb25zdCBwcm90b2NvbCA9IHVybC5wcm90b2NvbDtcbiAgICAgICAgY29uc3QgaG9zdCA9IHVybC5ob3N0O1xuXG4gICAgICAgIGxldCBzaGVsbFVybDogc3RyaW5nO1xuICAgICAgICBpZiAoaG9zdC5pbmRleE9mKCdsb2NhbGhvc3QnKSA+IC0xKSB7XG4gICAgICAgICAgICBzaGVsbFVybCA9IGAke3Byb3RvY29sfS8vJHtob3N0fS8ke3RoaXMudXJsKCl9YDtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHNoZWxsVXJsID0gYCR7cHJvdG9jb2x9Ly8ke2hvc3R9LyR7dGhpcy5zaG93Y2FzZU5hbWVXaXRoVmVyc2lvbigpfS8ke3RoaXMudXJsKCl9YDtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMudXJsU2FmZSA9IHRoaXMuc2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RSZXNvdXJjZVVybChzaGVsbFVybCk7XG5cbiAgICAgICAgdGhpcy5sb2FkRGV2aWNlcygpO1xuICAgIH1cblxuICAgIHRvZ2dsZU9yaWVudGF0aW9uKCk6IHZvaWQge1xuICAgICAgICB0aGlzLmlzTGFuZHNjYXBlVmlldyA9ICF0aGlzLmlzTGFuZHNjYXBlVmlldztcbiAgICB9XG5cbiAgICBvbkRldmljZUNoYW5nZShldmVudCk6IHZvaWQge1xuICAgICAgICBjb25zdCBzZWxlY3RFbGVtZW50ID0gZXZlbnQudGFyZ2V0IGFzIEhUTUxTZWxlY3RFbGVtZW50O1xuICAgICAgICBjb25zdCB2YWx1ZSA9IHNlbGVjdEVsZW1lbnQudmFsdWU7XG4gICAgICAgIGNvbnN0IHNlbGVjdGVkRGV2aWNlID0gdGhpcy5kZXZpY2VzLmZpbmQoZCA9PiBkLm5hbWUgPT09IHZhbHVlKTtcbiAgICAgICAgaWYgKHNlbGVjdGVkRGV2aWNlICYmIHRoaXMuY29udGFpbmVyUmVmKSB7XG4gICAgICAgICAgICBjb25zdCBlbCA9IHRoaXMuY29udGFpbmVyUmVmLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICAgICAgICBlbC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1kZXZpY2Utd2lkdGgnLCBgJHtzZWxlY3RlZERldmljZS53aWR0aH1weGApO1xuICAgICAgICAgICAgZWwuc3R5bGUuc2V0UHJvcGVydHkoJy0tZGV2aWNlLWhlaWdodCcsIGAke3NlbGVjdGVkRGV2aWNlLmhlaWdodH1weGApO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBsb2FkRGV2aWNlcygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5kZXZpY2VzID0gREVWSUNFX1NJWkVTO1xuICAgIH1cbn1cbiIsIkBpZiAoaGFzUHJldmlld1Rvb2xiYXIoKSkge1xuICAgIDxkaXYgY2xhc3M9XCJkZXZpY2UtcHJldmlldy10b29sYmFyXCIgW2NsYXNzLmRldmljZS1wcmV2aWV3LXRvb2xiYXItLWRpc2FibGVkXT1cImlzUHJldmlld1Rvb2xiYXJEaXNhYmxlZCgpXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkZXZpY2UtcHJldmlldy10b29sYmFyX19kZXZpY2VzXCI+XG4gICAgICAgICAgICA8c2VsZWN0IGNsYXNzPVwiZXVpLXUtY3Vyc29yLXBvaW50ZXJcIiBldWlTZWxlY3QgbmFtZT1cImRldmljZS1zaXplc1wiIGFyaWEtbGFiZWw9XCJkZXZpY2Utc2l6ZXNcIiBbdmFsdWVdPVwiJ3Bob25lLXNtYWxsJ1wiIChjaGFuZ2UpPVwib25EZXZpY2VDaGFuZ2UoJGV2ZW50KVwiPlxuICAgICAgICAgICAgICAgIEBmb3IgKGRldmljZSBvZiBkZXZpY2VzOyB0cmFjayBkZXZpY2UpIHtcbiAgICAgICAgICAgICAgICAgICAgPG9wdGlvbiBbdmFsdWVdPVwiZGV2aWNlLm5hbWVcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt7IGRldmljZS5sYWJlbCB9fVxuICAgICAgICAgICAgICAgICAgICA8L29wdGlvbj5cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICA8L3NlbGVjdD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJkZXZpY2UtcHJldmlldy10b29sYmFyX19vcmllbnRhdGlvblwiIChjbGljayk9XCJ0b2dnbGVPcmllbnRhdGlvbigpXCI+XG4gICAgICAgICAgICA8ZXVpLWljb24tc3ZnIFtpY29uXT1cIiFpc0xhbmRzY2FwZVZpZXcgPyAncGhvbmUtcG9ydHJhaXQ6b3V0bGluZScgOiAncGhvbmUtbGFuZHNjYXBlOm91dGxpbmUnXCIvPlxuICAgICAgICAgICAgPHNwYW4+e3sgaXNMYW5kc2NhcGVWaWV3ID8gJ0xhbmRzY2FwZScgOiAnUG9ydHJhaXQnIH19PC9zcGFuPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPGEgW2hyZWZdPVwidXJsU2FmZVwiIGNsYXNzPVwiZGV2aWNlLXByZXZpZXctdG9vbGJhcl9fZnVsbC1zY3JlZW5cIiB0YXJnZXQ9XCJfYmxhbmtcIj5cbiAgICAgICAgICAgIHw8ZXVpLWljb24tc3ZnIGljb249XCJvcGVuOm91dGxpbmVcIi8+XG4gICAgICAgICAgICA8c3Bhbj5GdWxsIFNjcmVlbjwvc3Bhbj5cbiAgICAgICAgPC9hPlxuICAgIDwvZGl2PlxufVxuPGRpdiBjbGFzcz1cImRldmljZS13cmFwcGVyXCIgI2RldmljZVdyYXBwZXIgW2NsYXNzLmxhbmRzY2FwZV09XCJpc0xhbmRzY2FwZVZpZXdcIj5cbiAgICA8aWZyYW1lIGlkPVwiaWZyYW1lLXBsYXlncm91bmRcIiBsb2FkaW5nPVwibGF6eVwiIGNsYXNzPVwiZGV2aWNlLWZyYW1lXCIgd2lkdGg9XCIxMDAlXCIgaGVpZ2h0PVwiMTAwJVwiIGZyYW1lQm9yZGVyPVwiMFwiIFtzcmNdPVwidXJsU2FmZVwiPjwvaWZyYW1lPlxuPC9kaXY+XG5cbiJdfQ==
97
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9jLXBsYXlncm91bmQtZGV2aWNlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9kb2MtcGxheWdyb3VuZC1kZXZpY2UvZG9jLXBsYXlncm91bmQtZGV2aWNlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9kb2MtcGxheWdyb3VuZC1kZXZpY2UvZG9jLXBsYXlncm91bmQtZGV2aWNlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLGlCQUFpQixFQUFjLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVySCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQzs7Ozs7O0FBWXBELE1BQU0sT0FBTyw0QkFBNEI7SUFlckMsWUFBb0IsU0FBdUIsRUFBVSxrQkFBc0M7UUFBdkUsY0FBUyxHQUFULFNBQVMsQ0FBYztRQUFVLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBb0I7UUFkM0YsUUFBRyxHQUFHLEtBQUssRUFBVSxDQUFDO1FBQ3RCLDRCQUF1QixHQUFHLEtBQUssRUFBVSxDQUFDO1FBQzFDLHNCQUFpQixHQUFHLEtBQUssQ0FBQyxJQUFJLEVBQUUsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsQ0FBQyxDQUFDO1FBQ2pFLDZCQUF3QixHQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsQ0FBQyxDQUFDO1FBQ3pFLG9CQUFlLEdBQUcsS0FBSyxDQUFDO1FBTXhCLFlBQU8sR0FBYSxFQUFFLENBQUM7UUFDZixtQkFB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RUFBRSxDQUFDO1FBQzlCLENBQUM7SUFDTCxDQUFDO0lBRU8sa0JBQWtCO1FBQ3RCLElBQUksQ0FBQyxJQUFJLENBQUMsY0FBYyxJQUFJLENBQUMsSUFBSSxDQUFDLGNBQWM7WUFBRSxPQUFPO1FBRXpELE1BQU0sY0FBYyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxDQUFDO1FBRXpELElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ2hCLGNBQWMsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLGlCQUFpQixFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQ2hFLENBQUM7YUFBTSxDQUFDO1lBQ0osTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLGVBQWU7Z0JBQ3JDLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU07Z0JBQzVCLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQztZQUVoQyxjQUFjLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxpQkFBaUIsRUFBRSxHQUFHLFlBQVksSUFBSSxDQUFDLENBQUM7UUFDN0UsQ0FBQztJQUNMLENBQUM7SUFFTyxXQUFXO1FBQ2YsSUFBSSxDQUFDLE9BQU8sR0FBRyxZQUFZLENBQUM7SUFDaEMsQ0FBQzsrR0ExRlEsNEJBQTRCO21HQUE1Qiw0QkFBNEIseTZCQ2hCekMsdzBDQXVCQSx3a0VEVGMsZUFBZSxpZUFBRSxhQUFhOzs0RkFFL0IsNEJBQTRCO2tCQVJ4QyxTQUFTOytCQUNJLG9DQUFvQyxpQkFHL0IsaUJBQWlCLENBQUMsSUFBSSxjQUN6QixJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsYUFBYSxDQUFDO2tIQVNiLFlBQVk7c0JBQXZDLFNBQVM7dUJBQUMsZUFBZTtnQkFDRyxjQUFjO3NCQUExQyxTQUFTO3VCQUFDLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQsIE9uSW5pdCwgVmlld0VuY2Fwc3VsYXRpb24sIEVsZW1lbnRSZWYsIFZpZXdDaGlsZCwgYm9vbGVhbkF0dHJpYnV0ZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2FmZVJlc291cmNlVXJsLCBEb21TYW5pdGl6ZXIgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IEV1aVNlbGVjdE1vZHVsZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9ldWktc2VsZWN0JztcbmltcG9ydCB7IEV1aUljb25Nb2R1bGUgfSBmcm9tICdAZXVpL2NvbXBvbmVudHMvZXVpLWljb24nO1xuaW1wb3J0IHsgREVWSUNFX1NJWkVTIH0gZnJvbSAnLi9kZXZpY2Utc2l6ZXMuY29uc3QnO1xuaW1wb3J0IHsgRGV2aWNlIH0gZnJvbSAnLi9kZXZpY2Utc2l6ZXMuY29uc3QnO1xuaW1wb3J0IHsgQnJlYWtwb2ludE9ic2VydmVyIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2xheW91dCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnZXVpLXNob3djYXNlLWRvYy1wbGF5Z3JvdW5kLWRldmljZScsXG4gICAgdGVtcGxhdGVVcmw6ICdkb2MtcGxheWdyb3VuZC1kZXZpY2UuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2RvYy1wbGF5Z3JvdW5kLWRldmljZS5jb21wb25lbnQuc2NzcyddLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBpbXBvcnRzOiBbRXVpU2VsZWN0TW9kdWxlLCBFdWlJY29uTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgRG9jUGxheWdyb3VuZERldmljZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgdXJsID0gaW5wdXQ8c3RyaW5nPigpO1xuICAgIHNob3djYXNlTmFtZVdpdGhWZXJzaW9uID0gaW5wdXQ8c3RyaW5nPigpO1xuICAgIGhhc1ByZXZpZXdUb29sYmFyID0gaW5wdXQodHJ1ZSwgeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSk7XG4gICAgaXNQcmV2aWV3VG9vbGJhckRpc2FibGVkID0gaW5wdXQoZmFsc2UsIHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pO1xuICAgIGlzTGFuZHNjYXBlVmlldyA9IGZhbHNlO1xuXG4gICAgQFZpZXdDaGlsZCgnZGV2aWNlV3JhcHBlcicpIGNvbnRhaW5lclJlZiE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuICAgIEBWaWV3Q2hpbGQoJ3ByZXZpZXdUb29sYmFyJykgcHJldmlld1Rvb2xiYXIhOiBFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50PjtcblxuICAgIHB1YmxpYyB1cmxTYWZlOiBTYWZlUmVzb3VyY2VVcmw7XG4gICAgZGV2aWNlczogRGV2aWNlW10gPSBbXTtcbiAgICBwcml2YXRlIHNlbGVjdGVkRGV2aWNlOiB7IG5hbWU6IHN0cmluZzsgd2lkdGg6IG51bWJlcjsgaGVpZ2h0OiBudW1iZXIgfSA9IHsgbmFtZTogJ3Bob25lLXNtYWxsJywgd2lkdGg6IDM3NSwgaGVpZ2h0OiA2NjcgfTtcbiAgICBwcml2YXRlIGlzTW9iaWxlID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyLCBwcml2YXRlIGJyZWFrcG9pbnRPYnNlcnZlcjogQnJlYWtwb2ludE9ic2VydmVyKSB7fVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIGNvbnN0IHVybCA9IHdpbmRvdy5sb2NhdGlvbjtcbiAgICAgICAgY29uc3QgcHJvdG9jb2wgPSB1cmwucHJvdG9jb2w7XG4gICAgICAgIGNvbnN0IGhvc3QgPSB1cmwuaG9zdDtcblxuICAgICAgICBsZXQgc2hlbGxVcmw6IHN0cmluZztcbiAgICAgICAgaWYgKGhvc3QuaW5kZXhPZignbG9jYWxob3N0JykgPiAtMSkge1xuICAgICAgICAgICAgc2hlbGxVcmwgPSBgJHtwcm90b2NvbH0vLyR7aG9zdH0vJHt0aGlzLnVybCgpfWA7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICBzaGVsbFVybCA9IGAke3Byb3RvY29sfS8vJHtob3N0fS8ke3RoaXMuc2hvd2Nhc2VOYW1lV2l0aFZlcnNpb24oKX0vJHt0aGlzLnVybCgpfWA7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLnVybFNhZmUgPSB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0UmVzb3VyY2VVcmwoc2hlbGxVcmwpO1xuXG4gICAgICAgIHRoaXMubG9hZERldmljZXMoKTtcblxuICAgICAgICB0aGlzLmJyZWFrcG9pbnRPYnNlcnZlci5vYnNlcnZlKFsnKG1heC13aWR0aDogNzY3cHgpJ10pLnN1YnNjcmliZShyZXN1bHQgPT4ge1xuICAgICAgICAgICAgdGhpcy5pc01vYmlsZSA9IHJlc3VsdC5tYXRjaGVzO1xuXG4gICAgICAgICAgICBpZiAodGhpcy5pc01vYmlsZSkge1xuICAgICAgICAgICAgICAgIHRoaXMuaXNMYW5kc2NhcGVWaWV3ID0gZmFsc2U7XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIHRoaXMub25EZXZpY2VDaGFuZ2UoZXZlbnQpO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICB0b2dnbGVPcmllbnRhdGlvbigpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5pc0xhbmRzY2FwZVZpZXcgPSAhdGhpcy5pc0xhbmRzY2FwZVZpZXc7XG4gICAgICAgIHRoaXMudXBkYXRlVG9vbGJhcldpZHRoKCk7XG4gICAgfVxuXG4gICAgb25EZXZpY2VDaGFuZ2UoZXZlbnQpOiB2b2lkIHtcbiAgICAgICAgY29uc3Qgc2VsZWN0RWxlbWVudCA9IGV2ZW50Py50YXJnZXQgYXMgSFRNTFNlbGVjdEVsZW1lbnQ7XG4gICAgICAgIGNvbnN0IHZhbHVlID0gc2VsZWN0RWxlbWVudD8udmFsdWU7XG4gICAgICAgIGNvbnN0IGZvdW5kRGV2aWNlOkRldmljZSA9IHRoaXMuZGV2aWNlcy5maW5kKGQgPT4gZC5uYW1lID09PSB2YWx1ZSk7XG5cbiAgICAgICAgaWYgKHRoaXMuaXNNb2JpbGUpIHtcbiAgICAgICAgICAgIHRoaXMuc2VsZWN0ZWREZXZpY2UgPSB7IG5hbWU6ICdwaG9uZS1zbWFsbCcsIHdpZHRoOiAzNzUsIGhlaWdodDogNjY3IH07XG4gICAgICAgICAgICB0aGlzLnVwZGF0ZVRvb2xiYXJXaWR0aCgpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy51cGRhdGVUb29sYmFyV2lkdGgoKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmIChmb3VuZERldmljZSAmJiAhdGhpcy5pc01vYmlsZSkge1xuICAgICAgICAgICAgdGhpcy5zZWxlY3RlZERldmljZSA9IGZvdW5kRGV2aWNlO1xuXG4gICAgICAgICAgICBjb25zdCBlbCA9IHRoaXMuY29udGFpbmVyUmVmLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICAgICAgICBlbC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1kZXZpY2Utd2lkdGgnLCBgJHtmb3VuZERldmljZS53aWR0aH1weGApO1xuICAgICAgICAgICAgZWwuc3R5bGUuc2V0UHJvcGVydHkoJy0tZGV2aWNlLWhlaWdodCcsIGAke2ZvdW5kRGV2aWNlLmhlaWdodH1weGApO1xuXG4gICAgICAgICAgICB0aGlzLnVwZGF0ZVRvb2xiYXJXaWR0aCgpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSB1cGRhdGVUb29sYmFyV2lkdGgoKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5wcmV2aWV3VG9vbGJhciB8fCAhdGhpcy5zZWxlY3RlZERldmljZSkgcmV0dXJuO1xuXG4gICAgICAgIGNvbnN0IHByZXZpZXdUb29sYmFyID0gdGhpcy5wcmV2aWV3VG9vbGJhci5uYXRpdmVFbGVtZW50O1xuXG4gICAgICAgIGlmICh0aGlzLmlzTW9iaWxlKSB7XG4gICAgICAgICAgICBwcmV2aWV3VG9vbGJhci5zdHlsZS5zZXRQcm9wZXJ0eSgnLS10b29sYmFyLXdpZHRoJywgJzEwMCUnKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIGNvbnN0IHRvb2xiYXJXaWR0aCA9IHRoaXMuaXNMYW5kc2NhcGVWaWV3XG4gICAgICAgICAgICAgICAgPyB0aGlzLnNlbGVjdGVkRGV2aWNlLmhlaWdodFxuICAgICAgICAgICAgICAgIDogdGhpcy5zZWxlY3RlZERldmljZS53aWR0aDtcblxuICAgICAgICAgICAgcHJldmlld1Rvb2xiYXIuc3R5bGUuc2V0UHJvcGVydHkoJy0tdG9vbGJhci13aWR0aCcsIGAke3Rvb2xiYXJXaWR0aH1weGApO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBsb2FkRGV2aWNlcygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5kZXZpY2VzID0gREVWSUNFX1NJWkVTO1xuICAgIH1cbn1cbiIsIkBpZiAoaGFzUHJldmlld1Rvb2xiYXIoKSkge1xuICAgIDxkaXYgI3ByZXZpZXdUb29sYmFyIGNsYXNzPVwiZGV2aWNlLXByZXZpZXctdG9vbGJhclwiIFtjbGFzcy5kZXZpY2UtcHJldmlldy10b29sYmFyLS1kaXNhYmxlZF09XCJpc1ByZXZpZXdUb29sYmFyRGlzYWJsZWQoKVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGV2aWNlLXByZXZpZXctdG9vbGJhcl9fZGV2aWNlc1wiPlxuICAgICAgICAgICAgPHNlbGVjdCBjbGFzcz1cImV1aS11LWN1cnNvci1wb2ludGVyXCIgZXVpU2VsZWN0IG5hbWU9XCJkZXZpY2Utc2l6ZXNcIiBhcmlhLWxhYmVsPVwiZGV2aWNlLXNpemVzXCIgW3ZhbHVlXT1cIidwaG9uZS1zbWFsbCdcIiAoY2hhbmdlKT1cIm9uRGV2aWNlQ2hhbmdlKCRldmVudClcIj5cbiAgICAgICAgICAgICAgICBAZm9yIChkZXZpY2Ugb2YgZGV2aWNlczsgdHJhY2sgZGV2aWNlKSB7XG4gICAgICAgICAgICAgICAgICAgIDxvcHRpb24gW3ZhbHVlXT1cImRldmljZS5uYW1lXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICB7eyBkZXZpY2UubGFiZWwgfX1cbiAgICAgICAgICAgICAgICAgICAgPC9vcHRpb24+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgPC9zZWxlY3Q+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwiZGV2aWNlLXByZXZpZXctdG9vbGJhcl9fb3JpZW50YXRpb24gZXVpLXUtY3Vyc29yLXBvaW50ZXJcIiAoY2xpY2spPVwidG9nZ2xlT3JpZW50YXRpb24oKVwiPlxuICAgICAgICAgICAgPGV1aS1pY29uLXN2ZyBbaWNvbl09XCIhaXNMYW5kc2NhcGVWaWV3ID8gJ3Bob25lLXBvcnRyYWl0Om91dGxpbmUnIDogJ3Bob25lLWxhbmRzY2FwZTpvdXRsaW5lJ1wiLz4gfFxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPGEgW2hyZWZdPVwidXJsU2FmZVwiIGNsYXNzPVwiZGV2aWNlLXByZXZpZXctdG9vbGJhcl9fZnVsbC1zY3JlZW5cIiB0YXJnZXQ9XCJfYmxhbmtcIj5cbiAgICAgICAgICAgIDxldWktaWNvbi1zdmcgaWNvbj1cIm9wZW46b3V0bGluZVwiLz5cbiAgICAgICAgICAgIDxzcGFuPkZ1bGwgU2NyZWVuPC9zcGFuPlxuICAgICAgICA8L2E+XG4gICAgPC9kaXY+XG59XG48ZGl2IGNsYXNzPVwiZGV2aWNlLXdyYXBwZXJcIiAjZGV2aWNlV3JhcHBlciBbY2xhc3MubGFuZHNjYXBlXT1cImlzTGFuZHNjYXBlVmlld1wiPlxuICAgIDxpZnJhbWUgaWQ9XCJpZnJhbWUtcGxheWdyb3VuZFwiIGxvYWRpbmc9XCJsYXp5XCIgY2xhc3M9XCJkZXZpY2UtZnJhbWVcIiB3aWR0aD1cIjEwMCVcIiBoZWlnaHQ9XCIxMDAlXCIgZnJhbWVCb3JkZXI9XCIwXCIgW3NyY109XCJ1cmxTYWZlXCI+PC9pZnJhbWU+XG48L2Rpdj5cbiJdfQ==
package/fesm2022/eui-showcase.mjs CHANGED
@@ -20,7 +20,7 @@ import * as i1$2 from '@eui/components/eui-block-content';
20
20
  import { EuiBlockContentModule } from '@eui/components/eui-block-content';
21
21
  import * as i8 from '@eui/components/eui-badge';
22
22
  import { EuiBadgeModule } from '@eui/components/eui-badge';
23
- import * as i11 from '@eui/components/eui-icon';
23
+ import * as i4$2 from '@eui/components/eui-icon';
24
24
  import { EuiIconModule } from '@eui/components/eui-icon';
25
25
  import * as i12 from '@eui/components/eui-label';
26
26
  import { EuiLabelModule } from '@eui/components/eui-label';
@@ -36,8 +36,9 @@ import * as i3$1 from '@angular/platform-browser';
36
36
  import { DomSanitizer } from '@angular/platform-browser';
37
37
  import * as i1$1 from 'ngx-markdown';
38
38
  import { MarkdownModule } from 'ngx-markdown';
39
- import * as i2$3 from '@eui/components/eui-select';
39
+ import * as i3$3 from '@eui/components/eui-select';
40
40
  import { EuiSelectModule } from '@eui/components/eui-select';
41
+ import * as i2$3 from '@angular/cdk/layout';
41
42
 
42
43
  const polyfillsFile = 'import \'zone.js\';';
43
44
  const mainFile = (moduleName, componentName) => `
@@ -740,7 +741,7 @@ class DocSampleComponent {
740
741
  }));
741
742
  }
742
743
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocSampleComponent, deps: [{ token: StackblitzService }, { token: i2.HttpClient }, { token: i3.EuiAppShellService }, { token: i0.ChangeDetectorRef }, { token: i3.EuiGrowlService }, { token: i4.Clipboard }, { token: i1.Router }, { token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Component }); }
743
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute], isInnerSection: ["isInnerSection", "isInnerSection", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n {{ label }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)=\"copyCurrentUrlToClipboard(id)\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"link\" set=\"outline\" size=\"l\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n </div>\n <div *ngIf=\"shouldRenderPlayground()\" class=\"doc-sample-title__items eui-u-mr-s\">\n <button\n *ngIf=\"isCodeButtonVisible\"\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"flash:outline\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"doc-sample-title__items\">\n <button\n *ngIf=\"isCodeButtonVisible\"\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-2xl);margin-top:var(--eui-s-6xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-neutral-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;letter-spacing:-.5px;margin:var(--eui-s-3xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary-darker);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary-darker);font:var(--eui-f-m)!important}\n"], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i10.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i11.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i12.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }], encapsulation: i0.ViewEncapsulation.None }); }
744
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: DocSampleComponent, selector: "eui-showcase-doc-sample", inputs: { id: "id", label: "label", category: "category", description: "description", defaultValue: "defaultValue", styleClass: "styleClass", renderPlayground: ["renderPlayground", "renderPlayground", booleanAttribute], isCodeButtonVisible: ["isCodeButtonVisible", "isCodeButtonVisible", booleanAttribute], isInnerSection: ["isInnerSection", "isInnerSection", booleanAttribute] }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<div class=\"doc-sample-title\">\n <div class=\"doc-sample-title__label\" [class.doc-sample-title__label--inner]=\"isInnerSection\">\n {{ label }}\n <button\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiPrimary\n euiSizeS\n (click)=\"copyCurrentUrlToClipboard(id)\"\n class=\"doc-sample-title__link\"\n tabindex=\"-1\">\n <eui-icon-svg icon=\"link\" set=\"outline\" size=\"l\" fillColor=\"neutral\"></eui-icon-svg>\n </button>\n </div>\n <div *ngIf=\"shouldRenderPlayground()\" class=\"doc-sample-title__items eui-u-mr-s\">\n <button\n *ngIf=\"isCodeButtonVisible\"\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onStackblitzOpen()\">\n <span euiLabel>Stackblitz</span>\n <eui-icon-svg icon=\"flash:outline\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"doc-sample-title__items\">\n <button\n *ngIf=\"isCodeButtonVisible\"\n type=\"button\"\n euiButton\n [euiOutline]=\"!isCodeExpanded\"\n euiPrimary\n euiSizeS\n (click)=\"onToggleCode()\"\n [euiDisabled]=\"isCodeLoading\">\n <eui-icon-svg *ngIf=\"isCodeLoading\" isLoading></eui-icon-svg>\n <span *ngIf=\"!isCodeExpanded\" euiLabel>Code</span>\n <span *ngIf=\"isCodeExpanded\" euiLabel>Hide Code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n </button>\n </div>\n</div>\n\n<ng-template [ngIf]=\"isCodeExpanded\">\n <eui-card euiNoContentPadding>\n <eui-card-content>\n <eui-tabs (tabSelect)=\"onSelectedTab($event)\">\n <eui-tab [isVisible]=\"htmlContent\">\n <euiTabLabel>\n HTML\n <euiTabSubLabel>HyperText Markup Language</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-markup\" euiCode>{{htmlContent}}</code></pre>\n </euiTabContent>\n </eui-tab>\n <eui-tab [isVisible]=\"tsContent\">\n <euiTabLabel>\n TS\n <euiTabSubLabel>Typescript</euiTabSubLabel>\n </euiTabLabel>\n <euiTabContent>\n <pre><code class=\"language-javascript\" euiCode>{{filterOutModuleAndImports(tsContent)}}</code></pre>\n </euiTabContent>\n </eui-tab>\n </eui-tabs>\n </eui-card-content>\n </eui-card>\n</ng-template>\n\n<ng-content></ng-content>\n", styles: [".eui-showcase-doc-sample{display:block;margin-bottom:var(--eui-s-2xl);margin-top:var(--eui-s-6xl);width:100%}.eui-showcase-doc-sample:first-child{margin-top:var(--eui-s-xl)}.eui-showcase-doc-sample .doc-sample-title{align-items:flex-end;display:flex;width:100%;margin-bottom:var(--eui-s-m);padding-bottom:var(--eui-s-s);border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-showcase-doc-sample .doc-sample-title__label{align-items:center;display:flex;min-height:var(--eui-s-xl);width:100%;letter-spacing:-.75px;font:var(--eui-f-xl-bold)}.eui-showcase-doc-sample .doc-sample-title__label:hover .doc-sample-title__link{opacity:1;transition:all .25s ease-in-out}.eui-showcase-doc-sample .doc-sample-title__label--inner{color:var(--eui-c-neutral-light);font:var(--eui-f-l)}.eui-showcase-doc-sample .doc-sample-title__items{display:flex;margin-left:auto}.eui-showcase-doc-sample .doc-sample-title__link{opacity:0;margin-left:var(--eui-s-m)}.eui-showcase-doc-sample .doc-sample-section-title,.eui-showcase-doc-sample h6.section-title{border-bottom:none;letter-spacing:-.5px;margin:var(--eui-s-3xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary-darker);font:var(--eui-f-l)!important}.eui-showcase-doc-sample .doc-sample-section-title:first-child,.eui-showcase-doc-sample h6.section-title:first-child{margin-top:var(--eui-s-m)!important}.eui-showcase-doc-sample .doc-sample-section-subtitle{border-bottom:none;letter-spacing:-.25px;margin:var(--eui-s-xl) 0 var(--eui-s-xs) 0!important;width:auto;display:table;color:var(--eui-c-primary-darker);font:var(--eui-f-m)!important}\n"], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "directive", type: i10.EuiTabSubLabelDirective, selector: "euiTabSubLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i4$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i12.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "directive", type: EuiCodeHighlighterDirective, selector: "[euiCode]" }], encapsulation: i0.ViewEncapsulation.None }); }
744
745
  }
745
746
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocSampleComponent, decorators: [{
746
747
  type: Component,
@@ -811,7 +812,7 @@ class DocPageCodeComponent {
811
812
  window.open(sourceRootPath + this.codeFolder, '_blank');
812
813
  }
813
814
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPageCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
814
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i11.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i12.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] }); }
815
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocPageCodeComponent, selector: "eui-showcase-doc-page-code", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"onOpenCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i12.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] }); }
815
816
  }
816
817
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPageCodeComponent, decorators: [{
817
818
  type: Component,
@@ -1449,7 +1450,7 @@ class DocPageCodeModalComponent {
1449
1450
  this.dialog.closeDialog();
1450
1451
  }
1451
1452
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPageCodeModalComponent, deps: [{ token: i3.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
1452
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocPageCodeModalComponent, selector: "eui-showcase-doc-page-code-modal", inputs: { width: "width" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n <ng-content></ng-content>\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3$2.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i11.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i12.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] }); }
1453
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocPageCodeModalComponent, selector: "eui-showcase-doc-page-code-modal", inputs: { width: "width" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<button type=\"button\" euiButton euiAccent (click)=\"toggleCode()\">\n <span euiLabel>Check the code</span>\n <eui-icon-svg icon=\"eui-code\"></eui-icon-svg>\n</button>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"width\">\n <ng-content></ng-content>\n</eui-dialog>\n", dependencies: [{ kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3$2.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i4$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i12.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }] }); }
1453
1454
  }
1454
1455
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPageCodeModalComponent, decorators: [{
1455
1456
  type: Component,
@@ -1489,13 +1490,17 @@ const DEVICE_SIZES = [
1489
1490
  ];
1490
1491
 
1491
1492
  class DocPlaygroundDeviceComponent {
1492
- constructor(sanitizer) {
1493
+ constructor(sanitizer, breakpointObserver) {
1493
1494
  this.sanitizer = sanitizer;
1495
+ this.breakpointObserver = breakpointObserver;
1494
1496
  this.url = input();
1495
1497
  this.showcaseNameWithVersion = input();
1496
1498
  this.hasPreviewToolbar = input(true, { transform: booleanAttribute });
1497
1499
  this.isPreviewToolbarDisabled = input(false, { transform: booleanAttribute });
1500
+ this.isLandscapeView = false;
1498
1501
  this.devices = [];
1502
+ this.selectedDevice = { name: 'phone-small', width: 375, height: 667 };
1503
+ this.isMobile = false;
1499
1504
  }
1500
1505
  ngOnInit() {
1501
1506
  const url = window.location;
@@ -1510,32 +1515,66 @@ class DocPlaygroundDeviceComponent {
1510
1515
  }
1511
1516
  this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(shellUrl);
1512
1517
  this.loadDevices();
1518
+ this.breakpointObserver.observe(['(max-width: 767px)']).subscribe(result => {
1519
+ this.isMobile = result.matches;
1520
+ if (this.isMobile) {
1521
+ this.isLandscapeView = false;
1522
+ }
1523
+ this.onDeviceChange(event);
1524
+ });
1513
1525
  }
1514
1526
  toggleOrientation() {
1515
1527
  this.isLandscapeView = !this.isLandscapeView;
1528
+ this.updateToolbarWidth();
1516
1529
  }
1517
1530
  onDeviceChange(event) {
1518
- const selectElement = event.target;
1519
- const value = selectElement.value;
1520
- const selectedDevice = this.devices.find(d => d.name === value);
1521
- if (selectedDevice && this.containerRef) {
1531
+ const selectElement = event?.target;
1532
+ const value = selectElement?.value;
1533
+ const foundDevice = this.devices.find(d => d.name === value);
1534
+ if (this.isMobile) {
1535
+ this.selectedDevice = { name: 'phone-small', width: 375, height: 667 };
1536
+ this.updateToolbarWidth();
1537
+ }
1538
+ else {
1539
+ this.updateToolbarWidth();
1540
+ }
1541
+ if (foundDevice && !this.isMobile) {
1542
+ this.selectedDevice = foundDevice;
1522
1543
  const el = this.containerRef.nativeElement;
1523
- el.style.setProperty('--device-width', `${selectedDevice.width}px`);
1524
- el.style.setProperty('--device-height', `${selectedDevice.height}px`);
1544
+ el.style.setProperty('--device-width', `${foundDevice.width}px`);
1545
+ el.style.setProperty('--device-height', `${foundDevice.height}px`);
1546
+ this.updateToolbarWidth();
1547
+ }
1548
+ }
1549
+ updateToolbarWidth() {
1550
+ if (!this.previewToolbar || !this.selectedDevice)
1551
+ return;
1552
+ const previewToolbar = this.previewToolbar.nativeElement;
1553
+ if (this.isMobile) {
1554
+ previewToolbar.style.setProperty('--toolbar-width', '100%');
1555
+ }
1556
+ else {
1557
+ const toolbarWidth = this.isLandscapeView
1558
+ ? this.selectedDevice.height
1559
+ : this.selectedDevice.width;
1560
+ previewToolbar.style.setProperty('--toolbar-width', `${toolbarWidth}px`);
1525
1561
  }
1526
1562
  }
1527
1563
  loadDevices() {
1528
1564
  this.devices = DEVICE_SIZES;
1529
1565
  }
1530
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPlaygroundDeviceComponent, deps: [{ token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
1531
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DocPlaygroundDeviceComponent, isStandalone: true, selector: "eui-showcase-doc-playground-device", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, showcaseNameWithVersion: { classPropertyName: "showcaseNameWithVersion", publicName: "showcaseNameWithVersion", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewToolbar: { classPropertyName: "hasPreviewToolbar", publicName: "hasPreviewToolbar", isSignal: true, isRequired: false, transformFunction: null }, isPreviewToolbarDisabled: { classPropertyName: "isPreviewToolbarDisabled", publicName: "isPreviewToolbarDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["deviceWrapper"], descendants: true }], ngImport: i0, template: "@if (hasPreviewToolbar()) {\n <div class=\"device-preview-toolbar\" [class.device-preview-toolbar--disabled]=\"isPreviewToolbarDisabled()\">\n <div class=\"device-preview-toolbar__devices\">\n <select class=\"eui-u-cursor-pointer\" euiSelect name=\"device-sizes\" aria-label=\"device-sizes\" [value]=\"'phone-small'\" (change)=\"onDeviceChange($event)\">\n @for (device of devices; track device) {\n <option [value]=\"device.name\">\n {{ device.label }}\n </option>\n }\n </select>\n </div>\n <button class=\"device-preview-toolbar__orientation\" (click)=\"toggleOrientation()\">\n <eui-icon-svg [icon]=\"!isLandscapeView ? 'phone-portrait:outline' : 'phone-landscape:outline'\"/>\n <span>{{ isLandscapeView ? 'Landscape' : 'Portrait' }}</span>\n </button>\n <a [href]=\"urlSafe\" class=\"device-preview-toolbar__full-screen\" target=\"_blank\">\n |<eui-icon-svg icon=\"open:outline\"/>\n <span>Full Screen</span>\n </a>\n </div>\n}\n<div class=\"device-wrapper\" #deviceWrapper [class.landscape]=\"isLandscapeView\">\n <iframe id=\"iframe-playground\" loading=\"lazy\" class=\"device-frame\" width=\"100%\" height=\"100%\" frameBorder=\"0\" [src]=\"urlSafe\"></iframe>\n</div>\n\n", styles: [":root{--device-width: 375px;--device-height: 667px}.device-wrapper{border:.5rem solid var(--eui-c-neutral-max);border-radius:2rem;width:var(--device-width);height:var(--device-height);transition:transform .5s ease,width .5s,height .5s;transform-origin:center center;position:relative}@media (min-width: 768px){.device-wrapper{width:var(--device-width)}}.device-wrapper.landscape{transform:rotate(0);width:var(--device-height);height:var(--device-width)}.device-wrapper.landscape .device-frame{height:calc(var(--device-width) - var(--eui-s-m));width:calc(var(--device-height) - var(--eui-s-m))}.device-frame{border-radius:1.5rem;height:calc(var(--device-height) - var(--eui-s-m));transition:transform .5s ease,width .5s,height .5s;transform-origin:center center}@media (min-width: 768px){.device-frame{width:calc(var(--device-width) - var(--eui-s-m))}}@media screen and (max-width: 767px){.device-wrapper{border:none;border-radius:0;width:100%}.device-frame{border-radius:0}}.device-preview-toolbar{font:var(--eui-f-m-compact);display:flex;align-items:center;justify-content:center;height:68px;padding:var(--eui-s-s) var(--eui-s-s);border-radius:var(--eui-br-xl);box-shadow:0 1px 3px #0003;margin-bottom:var(--eui-s-m)}.device-preview-toolbar__orientation{background-color:transparent;border:none;display:flex;align-items:center;margin-left:var(--eui-s-m);margin-right:var(--eui-s-m)}.device-preview-toolbar__orientation eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs);color:var(--eui-c-neutral)}.device-preview-toolbar__full-screen{display:flex;align-items:center;color:var(--eui-c-neutral);text-decoration:none}.device-preview-toolbar__full-screen eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs);margin-left:var(--eui-s-m)}.device-preview-toolbar--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: EuiSelectModule }, { kind: "component", type: i2$3.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i2$3.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i2$3.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: EuiIconModule }, { kind: "component", type: i11.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], encapsulation: i0.ViewEncapsulation.None }); }
1566
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPlaygroundDeviceComponent, deps: [{ token: i3$1.DomSanitizer }, { token: i2$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
1567
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DocPlaygroundDeviceComponent, isStandalone: true, selector: "eui-showcase-doc-playground-device", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, showcaseNameWithVersion: { classPropertyName: "showcaseNameWithVersion", publicName: "showcaseNameWithVersion", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewToolbar: { classPropertyName: "hasPreviewToolbar", publicName: "hasPreviewToolbar", isSignal: true, isRequired: false, transformFunction: null }, isPreviewToolbarDisabled: { classPropertyName: "isPreviewToolbarDisabled", publicName: "isPreviewToolbarDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["deviceWrapper"], descendants: true }, { propertyName: "previewToolbar", first: true, predicate: ["previewToolbar"], descendants: true }], ngImport: i0, template: "@if (hasPreviewToolbar()) {\n <div #previewToolbar class=\"device-preview-toolbar\" [class.device-preview-toolbar--disabled]=\"isPreviewToolbarDisabled()\">\n <div class=\"device-preview-toolbar__devices\">\n <select class=\"eui-u-cursor-pointer\" euiSelect name=\"device-sizes\" aria-label=\"device-sizes\" [value]=\"'phone-small'\" (change)=\"onDeviceChange($event)\">\n @for (device of devices; track device) {\n <option [value]=\"device.name\">\n {{ device.label }}\n </option>\n }\n </select>\n </div>\n <button class=\"device-preview-toolbar__orientation eui-u-cursor-pointer\" (click)=\"toggleOrientation()\">\n <eui-icon-svg [icon]=\"!isLandscapeView ? 'phone-portrait:outline' : 'phone-landscape:outline'\"/> |\n </button>\n <a [href]=\"urlSafe\" class=\"device-preview-toolbar__full-screen\" target=\"_blank\">\n <eui-icon-svg icon=\"open:outline\"/>\n <span>Full Screen</span>\n </a>\n </div>\n}\n<div class=\"device-wrapper\" #deviceWrapper [class.landscape]=\"isLandscapeView\">\n <iframe id=\"iframe-playground\" loading=\"lazy\" class=\"device-frame\" width=\"100%\" height=\"100%\" frameBorder=\"0\" [src]=\"urlSafe\"></iframe>\n</div>\n", styles: [":root{--device-width: 375px;--device-height: 667px;--toolbar-width: 375px}@media (max-width: 767px){:root{--toolbar-width: 100%}}.device-wrapper{border:.5rem solid var(--eui-c-neutral-max);border-radius:2rem;width:var(--device-width);height:var(--device-height);transition:transform .5s ease,width .5s,height .5s;transform-origin:center center;position:relative}@media (min-width: 768px){.device-wrapper{width:var(--device-width)}}.device-wrapper.landscape{transform:rotate(0);width:var(--device-height);height:var(--device-width)}.device-wrapper.landscape .device-frame{height:calc(var(--device-width) - var(--eui-s-m));width:calc(var(--device-height) - var(--eui-s-m))}.device-frame{border-radius:1.5rem;height:calc(var(--device-height) - var(--eui-s-m));transition:transform .5s ease,width .5s,height .5s;transform-origin:center center}@media (min-width: 768px){.device-frame{width:calc(var(--device-width) - var(--eui-s-m))}}@media screen and (max-width: 767px){.device-wrapper{width:100%}}.device-preview-toolbar{font:var(--eui-f-m-compact);display:flex;align-items:center;justify-content:center;padding:var(--eui-s-xs);border-radius:var(--eui-br-xl);box-shadow:0 1px 3px #0003;margin-bottom:var(--eui-s-m);width:var(--toolbar-width);transition:transform .5s ease,width .5s,height .5s}@media (max-width: 767px){.device-preview-toolbar__devices{display:none}}.device-preview-toolbar__orientation{background-color:transparent;border:none;display:flex;align-items:center;margin-left:var(--eui-s-m);margin-right:var(--eui-s-m)}.device-preview-toolbar__orientation eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);color:var(--eui-c-neutral);margin-right:var(--eui-s-m)}@media (max-width: 767px){.device-preview-toolbar__orientation{display:none}}.device-preview-toolbar__full-screen{display:flex;align-items:center;color:var(--eui-c-neutral);text-decoration:none}.device-preview-toolbar__full-screen eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs)}.device-preview-toolbar--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: EuiSelectModule }, { kind: "component", type: i3$3.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i3$3.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i3$3.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "ngmodule", type: EuiIconModule }, { kind: "component", type: i4$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], encapsulation: i0.ViewEncapsulation.None }); }
1532
1568
  }
1533
1569
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPlaygroundDeviceComponent, decorators: [{
1534
1570
  type: Component,
1535
- args: [{ selector: 'eui-showcase-doc-playground-device', encapsulation: ViewEncapsulation.None, standalone: true, imports: [EuiSelectModule, EuiIconModule], template: "@if (hasPreviewToolbar()) {\n <div class=\"device-preview-toolbar\" [class.device-preview-toolbar--disabled]=\"isPreviewToolbarDisabled()\">\n <div class=\"device-preview-toolbar__devices\">\n <select class=\"eui-u-cursor-pointer\" euiSelect name=\"device-sizes\" aria-label=\"device-sizes\" [value]=\"'phone-small'\" (change)=\"onDeviceChange($event)\">\n @for (device of devices; track device) {\n <option [value]=\"device.name\">\n {{ device.label }}\n </option>\n }\n </select>\n </div>\n <button class=\"device-preview-toolbar__orientation\" (click)=\"toggleOrientation()\">\n <eui-icon-svg [icon]=\"!isLandscapeView ? 'phone-portrait:outline' : 'phone-landscape:outline'\"/>\n <span>{{ isLandscapeView ? 'Landscape' : 'Portrait' }}</span>\n </button>\n <a [href]=\"urlSafe\" class=\"device-preview-toolbar__full-screen\" target=\"_blank\">\n |<eui-icon-svg icon=\"open:outline\"/>\n <span>Full Screen</span>\n </a>\n </div>\n}\n<div class=\"device-wrapper\" #deviceWrapper [class.landscape]=\"isLandscapeView\">\n <iframe id=\"iframe-playground\" loading=\"lazy\" class=\"device-frame\" width=\"100%\" height=\"100%\" frameBorder=\"0\" [src]=\"urlSafe\"></iframe>\n</div>\n\n", styles: [":root{--device-width: 375px;--device-height: 667px}.device-wrapper{border:.5rem solid var(--eui-c-neutral-max);border-radius:2rem;width:var(--device-width);height:var(--device-height);transition:transform .5s ease,width .5s,height .5s;transform-origin:center center;position:relative}@media (min-width: 768px){.device-wrapper{width:var(--device-width)}}.device-wrapper.landscape{transform:rotate(0);width:var(--device-height);height:var(--device-width)}.device-wrapper.landscape .device-frame{height:calc(var(--device-width) - var(--eui-s-m));width:calc(var(--device-height) - var(--eui-s-m))}.device-frame{border-radius:1.5rem;height:calc(var(--device-height) - var(--eui-s-m));transition:transform .5s ease,width .5s,height .5s;transform-origin:center center}@media (min-width: 768px){.device-frame{width:calc(var(--device-width) - var(--eui-s-m))}}@media screen and (max-width: 767px){.device-wrapper{border:none;border-radius:0;width:100%}.device-frame{border-radius:0}}.device-preview-toolbar{font:var(--eui-f-m-compact);display:flex;align-items:center;justify-content:center;height:68px;padding:var(--eui-s-s) var(--eui-s-s);border-radius:var(--eui-br-xl);box-shadow:0 1px 3px #0003;margin-bottom:var(--eui-s-m)}.device-preview-toolbar__orientation{background-color:transparent;border:none;display:flex;align-items:center;margin-left:var(--eui-s-m);margin-right:var(--eui-s-m)}.device-preview-toolbar__orientation eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs);color:var(--eui-c-neutral)}.device-preview-toolbar__full-screen{display:flex;align-items:center;color:var(--eui-c-neutral);text-decoration:none}.device-preview-toolbar__full-screen eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs);margin-left:var(--eui-s-m)}.device-preview-toolbar--disabled{opacity:.5;pointer-events:none}\n"] }]
1536
- }], ctorParameters: () => [{ type: i3$1.DomSanitizer }], propDecorators: { containerRef: [{
1571
+ args: [{ selector: 'eui-showcase-doc-playground-device', encapsulation: ViewEncapsulation.None, standalone: true, imports: [EuiSelectModule, EuiIconModule], template: "@if (hasPreviewToolbar()) {\n <div #previewToolbar class=\"device-preview-toolbar\" [class.device-preview-toolbar--disabled]=\"isPreviewToolbarDisabled()\">\n <div class=\"device-preview-toolbar__devices\">\n <select class=\"eui-u-cursor-pointer\" euiSelect name=\"device-sizes\" aria-label=\"device-sizes\" [value]=\"'phone-small'\" (change)=\"onDeviceChange($event)\">\n @for (device of devices; track device) {\n <option [value]=\"device.name\">\n {{ device.label }}\n </option>\n }\n </select>\n </div>\n <button class=\"device-preview-toolbar__orientation eui-u-cursor-pointer\" (click)=\"toggleOrientation()\">\n <eui-icon-svg [icon]=\"!isLandscapeView ? 'phone-portrait:outline' : 'phone-landscape:outline'\"/> |\n </button>\n <a [href]=\"urlSafe\" class=\"device-preview-toolbar__full-screen\" target=\"_blank\">\n <eui-icon-svg icon=\"open:outline\"/>\n <span>Full Screen</span>\n </a>\n </div>\n}\n<div class=\"device-wrapper\" #deviceWrapper [class.landscape]=\"isLandscapeView\">\n <iframe id=\"iframe-playground\" loading=\"lazy\" class=\"device-frame\" width=\"100%\" height=\"100%\" frameBorder=\"0\" [src]=\"urlSafe\"></iframe>\n</div>\n", styles: [":root{--device-width: 375px;--device-height: 667px;--toolbar-width: 375px}@media (max-width: 767px){:root{--toolbar-width: 100%}}.device-wrapper{border:.5rem solid var(--eui-c-neutral-max);border-radius:2rem;width:var(--device-width);height:var(--device-height);transition:transform .5s ease,width .5s,height .5s;transform-origin:center center;position:relative}@media (min-width: 768px){.device-wrapper{width:var(--device-width)}}.device-wrapper.landscape{transform:rotate(0);width:var(--device-height);height:var(--device-width)}.device-wrapper.landscape .device-frame{height:calc(var(--device-width) - var(--eui-s-m));width:calc(var(--device-height) - var(--eui-s-m))}.device-frame{border-radius:1.5rem;height:calc(var(--device-height) - var(--eui-s-m));transition:transform .5s ease,width .5s,height .5s;transform-origin:center center}@media (min-width: 768px){.device-frame{width:calc(var(--device-width) - var(--eui-s-m))}}@media screen and (max-width: 767px){.device-wrapper{width:100%}}.device-preview-toolbar{font:var(--eui-f-m-compact);display:flex;align-items:center;justify-content:center;padding:var(--eui-s-xs);border-radius:var(--eui-br-xl);box-shadow:0 1px 3px #0003;margin-bottom:var(--eui-s-m);width:var(--toolbar-width);transition:transform .5s ease,width .5s,height .5s}@media (max-width: 767px){.device-preview-toolbar__devices{display:none}}.device-preview-toolbar__orientation{background-color:transparent;border:none;display:flex;align-items:center;margin-left:var(--eui-s-m);margin-right:var(--eui-s-m)}.device-preview-toolbar__orientation eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);color:var(--eui-c-neutral);margin-right:var(--eui-s-m)}@media (max-width: 767px){.device-preview-toolbar__orientation{display:none}}.device-preview-toolbar__full-screen{display:flex;align-items:center;color:var(--eui-c-neutral);text-decoration:none}.device-preview-toolbar__full-screen eui-icon-svg{width:var(--eui-is-m);height:var(--eui-is-m);margin-right:var(--eui-s-xs)}.device-preview-toolbar--disabled{opacity:.5;pointer-events:none}\n"] }]
1572
+ }], ctorParameters: () => [{ type: i3$1.DomSanitizer }, { type: i2$3.BreakpointObserver }], propDecorators: { containerRef: [{
1537
1573
  type: ViewChild,
1538
1574
  args: ['deviceWrapper']
1575
+ }], previewToolbar: [{
1576
+ type: ViewChild,
1577
+ args: ['previewToolbar']
1539
1578
  }] } });
1540
1579
 
1541
1580
  class DocPageCodeFabComponent {
@@ -1557,7 +1596,7 @@ class DocPageCodeFabComponent {
1557
1596
  window.open(sourceRootPath + this.codeFolder, '_blank');
1558
1597
  }
1559
1598
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPageCodeFabComponent, deps: [{ token: i3.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
1560
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<div class=\"eui-button-fixed eui-u-mb-4xl\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-accent eui--accent\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\"></eui-icon-svg>\n </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n <button type=\"button\" *ngIf=\"codeFolder\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\"></eui-icon-svg> VIEW SOURCES\n </button>\n <ng-content></ng-content>\n <p 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", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3$2.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i11.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
1599
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocPageCodeFabComponent, selector: "eui-showcase-doc-page-code-fab", inputs: { codeFolder: "codeFolder", showcase: "showcase" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<div class=\"eui-button-fixed eui-u-mb-4xl\">\n <div class=\"eui-button-floating eui-button--size-2xl eui-button--icon-only eui-u-c-bg-accent eui--accent\">\n <eui-icon-svg icon=\"eui-code\" size=\"l\" (click)=\"toggleCode()\"></eui-icon-svg>\n </div>\n</div>\n\n<eui-dialog #dialog title=\"Page source code\" [hasFooter]=\"false\" (close)=\"onClose()\" [width]=\"'50vw'\">\n <button type=\"button\" *ngIf=\"codeFolder\" euiButton euiAccent euiSizeS (click)=\"onOpenCode()\">\n <eui-icon-svg icon=\"eui-code\" set=\"eui\" size=\"m\" fillColor=\"grey-100\" class=\"eui-u-mr-xs\"></eui-icon-svg> VIEW SOURCES\n </button>\n <ng-content></ng-content>\n <p 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", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3$2.EuiDialogComponent, selector: "eui-dialog", inputs: ["e2eAttr", "title", "acceptLabel", "dismissLabel", "typeClass", "verticalPosition", "width", "height", "isFullScreen", "hasCloseButton", "hasAcceptButton", "hasDismissButton", "hasMobileCustomSize", "isClosedOnClickOutside", "hasClosedOnClickOutside", "isClosedOnEscape", "hasClosedOnEscape", "isHandleCloseOnDismiss", "isHandleCloseOnClose", "isHandleCloseOnAccept", "isHandleCloseOnClickOutside", "isHandleCloseOnEscape", "isMessageBox", "isDraggable", "hasNoBodyPadding", "hasFooter", "classList"], outputs: ["clickOutside", "escape", "dialogOpen", "dialogClose", "dismiss", "accept"] }, { kind: "component", type: i4$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
1561
1600
  }
1562
1601
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPageCodeFabComponent, decorators: [{
1563
1602
  type: Component,
@@ -1730,7 +1769,7 @@ class DocPagePatternComponent {
1730
1769
  });
1731
1770
  }
1732
1771
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPagePatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1733
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i0, template: "<eui-tabs (tabSelect)=\"onTabSelect($event)\">\n <eui-tab>\n <euiTabLabel>Usage and documentation</euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-6 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-color-success-100 eui-u-text-h3\">Do's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of dos\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"donts.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-color-danger-100 eui-u-text-h3\">Dont's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of donts\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container> -->\n\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAABL1BMVEX/////cmLyTh6iWf8Kz4MavP7yTBr5YUWeUP8AzX3UuP//bVwAt/6jV///rKTyRgr2TwCxX+kA032m6Mf3m4uabPb/aVf/8O8AzHmbSf/xPAD/a1rxQgDyShaaR/8Avv74pJP/urP/6Ob/ZVLQ7//839n5tqj/xL7/b1f/9O/59f/r3v+65/9jzP6yef/p+P+u4//Mqv/iz//cxf/I7P/fvf+U2v71/fqO5LzW9ed74LIp043/y8b4rJz0dln/i3/zXTX2jnf/19P/emv0bEv/p5//l4zzWCz2h270dVf4g2D2Whzt5v+6hfuzbfCuWOjE2+6nz+6BxO5lu+5o1v9Nx/7BlP930v63rf+UoP90lP7n1v/Prv/iwf/Onf+hefiWZPZi36O07dLf9+2A4bX7S8Q6AAAGG0lEQVR4nO2aeVcaZxSHZ6JYhsHYFjsig3UhaHG3RkHBxMRE2zR2M5SuaUW//2cow4CgwMz7uzl65x3v8/+cM8+5y7tdwxAEQRAEQRAEQRAEQRAEQRAEQRCEiFJcOVqYDuDt0wAWV2pFboFAikcv8rl8fiqA/LE9Gtd1Hcd5ubjELTKC5eNcfu5JCBOfmWHYrnOyWOK2GWQhn58I01Mz9HDdp9xCd6g9UfJTNmw5mjVuqX5e5dT8AEPTLJxya92wdJZX9IMMTduMSMsphvcXmqFpOq+55TxeK2cobmgWIqBYhARRQ7PAvgOYmYIEYUPTmWE2PAZqkGRon/AKTqt3UaKh6b7lFCzmQEGCIW8pvgFzlGRov+QTrMEhpBhyrop4CEmGfEHEq5BmaBa4dm+vph7I0OZqp3PYYk83NE0eQUqSEg0dngXjCF3t6YbuIovhO7yTUg1tnsPwGaEMqXXIszmllCHVsMAhOPOghhxnKFIrpRo6HGu+GOpvuBT7OizFvpcalC0N1ZBnY0o4HZL3NDwnxGnC4YlqyHN8Wnm4nbfD8w5FajVEQ6YHU0oh0s74XBc1y4Q0JRkyJWkLxXffT48hlyClm1IMGd/0S3iakm6E2QQpVzUEQ4fnkqbDGdpOCYa8z2vwEQo3ZLvw7nAEKuJvwKw56vEdVoqoocP6PurzPaQIGrqRmBqCFMF5mkgIthIVqEXIsBCBFPVZzikvGoCh7axwi/VYOlbdoqobOicRmWrrsKw2Xqps6NoRCqBPaSGvMsGnZGg7NvsqOJTai1xuam4iMJahhrbr2KcRmNcbQam28O6HzwM584bVB/nGxzRPF9ln9YJ5v7tz/uMXo/lprzRzl1Jp5udffr24uKjXP3zYfsatEMDq3mZyNpmcHAsgmRr4bGu/nkgnuqTTifr2FsPfh7N2PhssN9xwvd6z61luRC+Sa5uz4XqDhuvzg36+ZD1icfxNze+O4daQ+PUcG2w2g6yNJdX8bhuuB/h5ionIpGpKNYC3DRvBgp7jNqNVHztfK/v1G26ECrYU9znFuuzMAoI9QxXBaCimkAj2DMNTNCqJ+i0UwRvDfUXBliJzu1lVbqK3DJ8pC7bgNdxU76L9hoBfIrHBKbgL5mjHUD1H23n6nNFwEg1h23ALEkwk5vkEU2gV+oYNTJCzn47BIfQM0RAyBhFdKTqG+6ggXyWe4yH0DOdhwwTTMQNeC31DaC3swmNISdKx5B6epGxp+pEUw706wTDBswGH9zNtwxShDLn2NQS/luHvJEOe9QI7NnUN/yAZpjkE31MazdjknzRDjpu3+BuuPaghxzk4/jGMv6FBMtSplz6C9TD+e5qd2O9L/3rAswXTpWnsz4fxP+M/gnua+N+1Ue9LN9AQMr4/4UGk3Hlzvs3gldh+t1B9POyEkPPdwjinva5BEWR9e3oE74fwxka7N2DyO77aoEIU3vEfwSyGYfx9j/M0EYigx+69zUStM1rd4p7m2uajNJ4Y99lE4xHMlxrejHDIAPQwQ41mhD1WU/6cdxDD57zT6XTPLrJz3j5r/3w8//er0fy3O+yrref7jbrHRiPSs/qGUW5WLr8MJsP9j59C89JqMR6Ipa9huRJqp7dhRkVPY8OrqpqftoYZVT9dDS+zyoJ6Gl6qR1BPQ0hQR8NDSFBDwwpQg1oaHoCC+hlWQUHtDCtYEepnWIYFdTO8jrshIYSaGQLbUU0N4UaqmyElSfUybMbeENyRamhIKUO9DCkh1MqwjG66tTO8ir0hfHASw8gR/ywlGja5/xuAZnjA/dsAtBX/ivu3AbCL0q4h918j4Jc0LcFL7r9GoCwXVoX7ryFwwfGsTo2GdHyqcv8zBp6mOq33bfAb7zL3L4M00WeZQ+4/hgGDqF0I0UrUbKnwge71NWukHZTHTDTbkva4UjbM6nRu6ke1FLM6FqGP2pKhsaBaFLUWbNXieFgxaluDXcrBc19WVc8ueovm6DBammfoDZXhA6ZW9lC/rdoIyplq9o6kZVmHMUjQPg4qVStrdclWD3VvMEM5aGYq19fXleZBbLJTEARBEARBEARBEARBEARBEARBEHz+B91xJIzYVK0AAAAAAElFTkSuQmCC\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>Pattern sample</euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <euiTabsRightContent>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"code-slash:sharp\"></eui-icon-svg>\n View sources\n </button>\n </euiTabsRightContent>\n</eui-tabs>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-8\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:var(--eui-c-white)}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-m)}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i2$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i2$1.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "directive", type: i10.EuiTabsRightContentTagDirective, selector: "euiTabsRightContent" }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i8.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i11.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i12.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
1772
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocPagePatternComponent, selector: "eui-showcase-doc-page-pattern", inputs: { id: "id", label: "label", anatomyImage: "anatomyImage", docEntries: "docEntries", dos: "dos", donts: "donts", sourceUrl: "sourceUrl", figmaUrl: "figmaUrl", figmaEmbedSrc: "figmaEmbedSrc" }, host: { listeners: { "window:scroll": "checkScroll()" }, properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "sampleContent", first: true, predicate: i0.forwardRef(() => DocPagePatternSampleDirective), descendants: true }, { propertyName: "docContent", first: true, predicate: i0.forwardRef(() => DocPagePatternDocDirective), descendants: true }], ngImport: i0, template: "<eui-tabs (tabSelect)=\"onTabSelect($event)\">\n <eui-tab>\n <euiTabLabel>Usage and documentation</euiTabLabel>\n <euiTabContent>\n <h2 class=\"eui-u-c-primary eui-u-mb-none eui-u-text-h2\">{{ label }}</h2>\n\n <h3 class=\"eui-u-text-h3\">Information</h3>\n <ng-content select=\"docPagePatternDoc\"></ng-content>\n\n <ng-container *ngIf=\"figmaEmbedSrc; else screenshot\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma design anatomy</h3>\n <iframe id=\"iframe-figma\" style=\"border: 1px solid rgba(0, 0, 0, 0.1)\" width=\"100%\" height=\"650\" [src]=\"urlSafe\"></iframe>\n </ng-container>\n <ng-template #screenshot>\n <ng-container *ngIf=\"figmaUrl !== 'PENDING_DS'\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Anatomy</h3>\n <img\n src=\"assets/images/design-system/{{ anatomyImage }}\"\n alt=\"Design anatomy image\"\n width=\"90%\"\n class=\"eui-u-sh-6 eui-u-mb-m\" />\n </ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"docEntries.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Design system references</h3>\n\n <eui-card *ngFor=\"let ref of docEntries\" class=\"eui-u-mb-m\" [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\">\n <eui-card-header>\n <eui-card-header-title>\n <div class=\"eui-u-flex\">\n <eui-badge *ngIf=\"ref?.id\" euiSizeXL class=\"eui-u-mr-s\">{{ ref.id }}</eui-badge>\n <span class=\"eui-u-font-l\">{{ ref.name }}</span>\n </div>\n </eui-card-header-title>\n <eui-card-header-right-content>\n <eui-chip [euiWarning]=\"ref.mandatory\" [euiInfo]=\"!ref.mandatory\" class=\"eui-u-ml-m\">\n <span *ngIf=\"ref.mandatory\" euiLabel><strong> Mandatory </strong></span>\n <span *ngIf=\"!ref.mandatory\" euiLabel><strong> Optional </strong></span>\n </eui-chip>\n </eui-card-header-right-content>\n </eui-card-header>\n <eui-card-content>\n <h6 class=\"section-title eui-u-mt-none\"><strong>Description</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.description\"></div>\n\n <ng-container *ngIf=\"ref.whenToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenToUse\"></div>\n </ng-container>\n <ng-container *ngIf=\"ref.whenNotToUse\">\n <h6 class=\"section-title eui-u-mt-xl\"><strong>When to not use ?</strong></h6>\n <div class=\"html\" [innerHTML]=\"ref.whenNotToUse\"></div>\n </ng-container>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.dos && ref.dos.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"thumbs-up\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"success-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Do's</strong>\n </h6>\n <li *ngFor=\"let do of ref.dos\">{{ do }}</li>\n </ng-container>\n </div>\n <div class=\"col-md-6\">\n <ng-container *ngIf=\"ref.donts && ref.donts.length !== 0\">\n <h6 class=\"section-title eui-u-mt-xl\">\n <eui-icon-svg\n icon=\"hand-right\"\n set=\"sharp\"\n size=\"m\"\n fillColor=\"danger-100\"\n class=\"eui-u-mr-m\"></eui-icon-svg>\n <strong>Dont's</strong>\n </h6>\n <li *ngFor=\"let dont of ref.donts\">{{ dont }}</li>\n </ng-container>\n </div>\n </div>\n </eui-card-content>\n </eui-card>\n </ng-container>\n\n <!-- <ng-container *ngIf=\"dos.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-color-success-100 eui-u-text-h3\">Do's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of dos\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container>\n\n <ng-container *ngIf=\"donts.length !== 0\">\n <h3 class=\"eui-u-mt-2xl eui-u-color-danger-100 eui-u-text-h3\">Dont's</h3>\n <table class=\"eui-table-default\">\n <tr *ngFor=\"let ref of donts\">\n <td>{{ref.description}}</td>\n </tr>\n </table>\n </ng-container> -->\n\n <h3 class=\"eui-u-mt-2xl eui-u-text-h3\">Figma resource</h3>\n <ng-container *ngIf=\"figmaUrl === 'PENDING_DS'; else figmaOK\">\n Pending Design system publication. Will be available in a future release.\n </ng-container>\n <ng-template #figmaOK>\n <eui-card>\n <eui-card-header>\n <eui-card-header-left-content>\n <img\n width=\"32\"\n height=\"32\"\n alt=\"Figma Logo\"\n src=\"data:image/png;base64,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\" />\n </eui-card-header-left-content>\n <eui-card-header-title>\n <a\n class=\"h5 eui-u-text-link-external\"\n href=\"https://www.figma.com/file/jQ9htWvSM8SWTPuk3hoigc/{{ figmaUrl }}\"\n target=\"blank\">\n <span class=\"eui-u-color-grey-75\">Layout component /</span>\n {{ label }}\n </a>\n </eui-card-header-title>\n </eui-card-header>\n </eui-card>\n </ng-template>\n </euiTabContent>\n </eui-tab>\n <eui-tab>\n <euiTabLabel>Pattern sample</euiTabLabel>\n <euiTabContent>\n <ng-content select=\"docPagePatternSample\"></ng-content>\n </euiTabContent>\n </eui-tab>\n\n <euiTabsRightContent>\n <button type=\"button\" euiButton euiAccent euiSizeS (click)=\"onNavigateToCode($event)\">\n <eui-icon-svg icon=\"code-slash:sharp\"></eui-icon-svg>\n View sources\n </button>\n </euiTabsRightContent>\n</eui-tabs>\n\n<button\n type=\"button\"\n *ngIf=\"isShowGoTop && tabSelectedIndex === 0\"\n euiButton\n euiIconButton\n euiOutline\n euiRounded\n euiSizeL\n class=\"eui-button-fixed eui-u-sh-8\"\n (click)=\"gotoTop()\"\n title=\"Goto Top\"\n aria-label=\"Goto Top\">\n <!-- \uD83D\uDC46 -->\n <eui-icon-svg icon=\"eui-arrow-up\" set=\"eui\" size=\"l\" fillColor=\"grey-50\"></eui-icon-svg>\n</button>\n", styles: [".doc-page-pattern{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%;padding:var(--eui-s-xl)}.doc-page-pattern sample,.doc-page-pattern eui-tabs,.doc-page-pattern .eui-tabs,.doc-page-pattern .eui-tab-content-wrapper,.doc-page-pattern .eui-tab-content{display:flex;flex-direction:column;flex:1 1 auto;min-height:100%}.doc-page-pattern .eui-tabs .eui-tab-item--active,.doc-page-pattern .eui-tabs .eui-tab-item:focus{background-color:var(--eui-c-white)}.doc-page-pattern .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-m)}.doc-page-pattern docPagePatternSample{display:flex;flex-direction:column;flex-grow:1;min-height:0;position:relative;width:100%}.doc-page-pattern .html{display:block;position:relative;text-align:left}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.EuiCardComponent, selector: "eui-card", inputs: ["e2eAttr", "euiSelected", "euiCollapsible", "euiCollapsed", "euiUrgent", "euiNoShadow", "euiNoContentPadding", "euiHoverable"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardHeaderComponent, selector: "eui-card-header", inputs: ["expandLabel", "collapseLabel", "hasHeaderClickToggle", "hasBottomExpander", "hasFullTitle", "isHeaderMultilines"], outputs: ["collapse"] }, { kind: "component", type: i2$1.EuiCardHeaderTitleComponent, selector: "eui-card-header-title" }, { kind: "component", type: i2$1.EuiCardContentComponent, selector: "eui-card-content" }, { kind: "component", type: i2$1.EuiCardHeaderLeftContentComponent, selector: "eui-card-header-left-content" }, { kind: "component", type: i2$1.EuiCardHeaderRightContentComponent, selector: "eui-card-header-right-content" }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i10.EuiTabsComponent, selector: "eui-tabs", inputs: ["tabs", "activeTabIndex", "e2eAttr", "pathMatch", "isMainNavigation", "isHandleChangeTab", "isSubTabs", "isVerticalTabs"], outputs: ["tabClose", "tabSelect"] }, { kind: "component", type: i10.EuiTabComponent, selector: "eui-tab", inputs: ["url", "e2eAttr", "tooltip", "isClosable", "isVisible", "isActive", "isDisabled", "isHandleCloseOnClose"] }, { kind: "directive", type: i10.EuiTabsRightContentTagDirective, selector: "euiTabsRightContent" }, { kind: "component", type: i10.EuiTabLabelComponent, selector: "eui-tab-label, euiTabLabel" }, { kind: "component", type: i10.EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: ["hasNoContentPadding"] }, { kind: "component", type: i5.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["ariaLabel", "e2eAttr", "euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared", "isFilled"], outputs: ["remove"] }, { kind: "component", type: i8.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }, { kind: "component", type: i4$2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i12.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }], encapsulation: i0.ViewEncapsulation.None }); }
1734
1773
  }
1735
1774
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocPagePatternComponent, decorators: [{
1736
1775
  type: Component,