@eui/components 18.0.0-next.32 → 18.0.0-next.34
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.
- package/docs/components/CollapsedBreadcrumbComponent.html +1 -1
- package/docs/components/EuiAlertComponent.html +1 -1
- package/docs/components/EuiButtonComponent.html +1 -25
- package/docs/components/EuiDiscussionThreadItemComponent.html +1 -1
- package/docs/components/EuiIconSvgComponent.html +24 -54
- package/docs/components/EuiMenuComponent.html +1 -1
- package/docs/components/EuiNotificationItemV2Component.html +1 -1
- package/docs/components/EuiTableFilterComponent.html +1 -1
- package/docs/components/EuiTableSortableColComponent.html +1 -1
- package/docs/components/EuiTimepickerComponent.html +1 -1
- package/docs/dependencies.html +1 -1
- package/docs/js/menu-wc.js +3 -3
- package/docs/js/menu-wc_es5.js +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/modules/EuiButtonModule.html +0 -3
- package/esm2022/directives/eui-resizable/eui-resizable.component.mjs +2 -2
- package/esm2022/directives/eui-tooltip/container/eui-tooltip-container.component.mjs +3 -3
- package/esm2022/eui-alert/eui-alert.component.mjs +3 -3
- package/esm2022/eui-autocomplete/eui-autocomplete.component.mjs +3 -3
- package/esm2022/eui-avatar/eui-avatar.component.mjs +2 -2
- package/esm2022/eui-badge/eui-badge.component.mjs +2 -2
- package/esm2022/eui-block-content/eui-block-content.component.mjs +2 -2
- package/esm2022/eui-block-document/eui-block-document.component.mjs +2 -2
- package/esm2022/eui-button/eui-button.component.mjs +6 -13
- package/esm2022/eui-button-group/eui-button-group.component.mjs +2 -2
- package/esm2022/eui-button-v2/eui-button-v2.component.mjs +2 -2
- package/esm2022/eui-card/components/eui-card-footer/eui-card-footer-menu-content.component.mjs +1 -1
- package/esm2022/eui-card/components/eui-card-header/eui-card-header.component.mjs +1 -1
- package/esm2022/eui-card/eui-card.component.mjs +2 -2
- package/esm2022/eui-chip/eui-chip.component.mjs +2 -2
- package/esm2022/eui-chip-list/eui-chip-list.component.mjs +1 -1
- package/esm2022/eui-dashboard-button/eui-dashboard-button.component.mjs +2 -2
- package/esm2022/eui-dashboard-card/eui-dashboard-card.component.mjs +2 -2
- package/esm2022/eui-date-range-selector/eui-date-range-selector.component.mjs +2 -2
- package/esm2022/eui-datepicker/eui-datepicker.component.mjs +2 -2
- package/esm2022/eui-dialog/container/eui-dialog-container.component.mjs +2 -2
- package/esm2022/eui-dialog/eui-dialog.component.mjs +2 -2
- package/esm2022/eui-discussion-thread/eui-discussion-thread-item.component.mjs +3 -3
- package/esm2022/eui-discussion-thread/eui-discussion-thread.component.mjs +2 -2
- package/esm2022/eui-dropdown/dropdown-item/eui-dropdown-item.component.mjs +2 -2
- package/esm2022/eui-dropdown/eui-dropdown.component.mjs +3 -3
- package/esm2022/eui-ecl-date-block/eui-ecl-date-block.component.mjs +2 -2
- package/esm2022/eui-ecl-label/eui-ecl-label.component.mjs +2 -2
- package/esm2022/eui-feedback-message/eui-feedback-message.component.mjs +2 -2
- package/esm2022/eui-fieldset/eui-fieldset.component.mjs +2 -2
- package/esm2022/eui-file-upload/eui-file-upload.component.mjs +2 -2
- package/esm2022/eui-file-upload/file-preview/file-preview.component.mjs +1 -1
- package/esm2022/eui-growl/eui-growl.component.mjs +2 -2
- package/esm2022/eui-icon/eui-icon-svg-button/eui-icon-svg-button.component.mjs +2 -2
- package/esm2022/eui-icon/eui-icon-svg.component.mjs +30 -36
- package/esm2022/eui-icon-toggle/eui-icon-toggle.component.mjs +2 -2
- package/esm2022/eui-input-checkbox/eui-input-checkbox.component.mjs +2 -2
- package/esm2022/eui-input-group/eui-input-group.component.mjs +2 -2
- package/esm2022/eui-input-number/eui-input-number.component.mjs +2 -2
- package/esm2022/eui-input-radio/eui-input-radio.component.mjs +2 -2
- package/esm2022/eui-input-text/eui-input-text.component.mjs +2 -2
- package/esm2022/eui-label/eui-label.component.mjs +2 -2
- package/esm2022/eui-language-selector/language-selector.component.mjs +2 -2
- package/esm2022/eui-language-selector/modal-selector/modal-selector.component.mjs +1 -1
- package/esm2022/eui-list/eui-list-item/eui-list-item.component.mjs +2 -2
- package/esm2022/eui-list/eui-list.component.mjs +2 -2
- package/esm2022/eui-menu/eui-menu-item.component.mjs +2 -2
- package/esm2022/eui-menu/eui-menu.component.mjs +3 -3
- package/esm2022/eui-overlay/components/eui-overlay-header/eui-overlay-header-title/eui-overlay-header-title.component.mjs +1 -1
- package/esm2022/eui-overlay/eui-overlay.component.mjs +2 -2
- package/esm2022/eui-page/components/eui-page-column/eui-page-column.component.mjs +1 -1
- package/esm2022/eui-page/components/eui-page-header/eui-page-header.component.mjs +1 -1
- package/esm2022/eui-page/eui-page.component.mjs +2 -2
- package/esm2022/eui-paginator/eui-paginator.component.mjs +1 -1
- package/esm2022/eui-popover/eui-popover.component.mjs +2 -2
- package/esm2022/eui-progress-bar/eui-progress-bar.component.mjs +2 -2
- package/esm2022/eui-progress-circle/eui-progress-circle.component.mjs +2 -2
- package/esm2022/eui-select/eui-select.component.mjs +2 -2
- package/esm2022/eui-sidebar-menu/eui-sidebar-menu.component.mjs +2 -2
- package/esm2022/eui-skeleton/eui-skeleton.component.mjs +2 -2
- package/esm2022/eui-slide-toggle/eui-slide-toggle.component.mjs +3 -3
- package/esm2022/eui-table/eui-table.component.mjs +2 -2
- package/esm2022/eui-table/filter/eui-table-filter.component.mjs +3 -3
- package/esm2022/eui-table/sortable-col/eui-table-sortable-col.component.mjs +3 -3
- package/esm2022/eui-tabs/eui-tab/eui-tab.component.mjs +2 -2
- package/esm2022/eui-tabs/eui-tabs.component.mjs +2 -2
- package/esm2022/eui-textarea/eui-textarea.component.mjs +2 -2
- package/esm2022/eui-timebar/eui-timebar.component.mjs +2 -2
- package/esm2022/eui-timeline/eui-timeline-item.component.mjs +2 -2
- package/esm2022/eui-timeline/eui-timeline.component.mjs +2 -2
- package/esm2022/eui-timepicker/eui-timepicker.component.mjs +3 -3
- package/esm2022/eui-tree/eui-tree.component.mjs +2 -2
- package/esm2022/eui-tree-list/eui-tree-list-item.component.mjs +1 -1
- package/esm2022/eui-tree-list/eui-tree-list.component.mjs +2 -2
- package/esm2022/eui-tree-list/toolbar/toolbar.component.mjs +1 -1
- package/esm2022/eui-wizard/eui-wizard-step.component.mjs +2 -2
- package/esm2022/eui-wizard/eui-wizard.component.mjs +2 -2
- package/esm2022/externals/charts/chart/chart.component.mjs +2 -2
- package/esm2022/externals/eui-editor/eui-editor.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-footer/footer.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-header/header.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-sidebar/sidebar-header-user-profile/sidebar-header-user-profile.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-sidebar/sidebar.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-toolbar/toolbar.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-top-message/top-message.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app.component.mjs +2 -2
- package/esm2022/layout/eui-breadcrumb/breadcrumb.component.mjs +2 -2
- package/esm2022/layout/eui-breadcrumb/collapsed-breadcrumb/collapsed-breadcrumb.component.mjs +3 -3
- package/esm2022/layout/eui-breadcrumb/item/breadcrumb-item.component.mjs +2 -2
- package/esm2022/layout/eui-footer/footer.component.mjs +2 -2
- package/esm2022/layout/eui-header/header.component.mjs +2 -2
- package/esm2022/layout/eui-notifications/eui-notification-item.component.mjs +1 -1
- package/esm2022/layout/eui-notifications/eui-notifications.component.mjs +2 -2
- package/esm2022/layout/eui-notifications-v2/eui-notification-item.component.mjs +3 -3
- package/esm2022/layout/eui-notifications-v2/eui-notifications.component.mjs +2 -2
- package/esm2022/layout/eui-search/search.component.mjs +2 -2
- package/esm2022/layout/eui-toolbar/toolbar-menu/toolbar-menu.component.mjs +1 -1
- package/esm2022/layout/eui-toolbar/toolbar.component.mjs +2 -2
- package/esm2022/layout/eui-user-profile/user-profile-card/user-profile-card.component.mjs +1 -1
- package/esm2022/layout/eui-user-profile/user-profile.component.mjs +2 -2
- package/eui-button/eui-button.component.d.ts +3 -6
- package/eui-button/eui-button.component.d.ts.map +1 -1
- package/eui-icon/eui-icon-svg.component.d.ts +5 -6
- package/eui-icon/eui-icon-svg.component.d.ts.map +1 -1
- package/fesm2022/eui-components-directives.mjs +4 -4
- package/fesm2022/eui-components-directives.mjs.map +1 -1
- package/fesm2022/eui-components-eui-alert.mjs +10 -10
- package/fesm2022/eui-components-eui-alert.mjs.map +2 -2
- package/fesm2022/eui-components-eui-autocomplete.mjs +2 -2
- package/fesm2022/eui-components-eui-autocomplete.mjs.map +1 -1
- package/fesm2022/eui-components-eui-avatar.mjs +2 -2
- package/fesm2022/eui-components-eui-avatar.mjs.map +1 -1
- package/fesm2022/eui-components-eui-badge.mjs +2 -2
- package/fesm2022/eui-components-eui-badge.mjs.map +1 -1
- package/fesm2022/eui-components-eui-block-content.mjs +2 -2
- package/fesm2022/eui-components-eui-block-content.mjs.map +1 -1
- package/fesm2022/eui-components-eui-block-document.mjs +2 -2
- package/fesm2022/eui-components-eui-block-document.mjs.map +1 -1
- package/fesm2022/eui-components-eui-button-group.mjs +2 -2
- package/fesm2022/eui-components-eui-button-group.mjs.map +1 -1
- package/fesm2022/eui-components-eui-button-v2.mjs +2 -2
- package/fesm2022/eui-components-eui-button-v2.mjs.map +1 -1
- package/fesm2022/eui-components-eui-button.mjs +5 -12
- package/fesm2022/eui-components-eui-button.mjs.map +2 -2
- package/fesm2022/eui-components-eui-card.mjs +4 -4
- package/fesm2022/eui-components-eui-card.mjs.map +1 -1
- package/fesm2022/eui-components-eui-chip-list.mjs +1 -1
- package/fesm2022/eui-components-eui-chip-list.mjs.map +1 -1
- package/fesm2022/eui-components-eui-chip.mjs +2 -2
- package/fesm2022/eui-components-eui-chip.mjs.map +1 -1
- package/fesm2022/eui-components-eui-dashboard-button.mjs +2 -2
- package/fesm2022/eui-components-eui-dashboard-button.mjs.map +1 -1
- package/fesm2022/eui-components-eui-dashboard-card.mjs +2 -2
- package/fesm2022/eui-components-eui-dashboard-card.mjs.map +1 -1
- package/fesm2022/eui-components-eui-date-range-selector.mjs +2 -2
- package/fesm2022/eui-components-eui-date-range-selector.mjs.map +1 -1
- package/fesm2022/eui-components-eui-datepicker.mjs +2 -2
- package/fesm2022/eui-components-eui-datepicker.mjs.map +1 -1
- package/fesm2022/eui-components-eui-dialog.mjs +4 -4
- package/fesm2022/eui-components-eui-dialog.mjs.map +1 -1
- package/fesm2022/eui-components-eui-discussion-thread.mjs +5 -5
- package/fesm2022/eui-components-eui-discussion-thread.mjs.map +2 -2
- package/fesm2022/eui-components-eui-dropdown.mjs +4 -4
- package/fesm2022/eui-components-eui-dropdown.mjs.map +1 -1
- package/fesm2022/eui-components-eui-ecl-date-block.mjs +2 -2
- package/fesm2022/eui-components-eui-ecl-date-block.mjs.map +1 -1
- package/fesm2022/eui-components-eui-ecl-label.mjs +2 -2
- package/fesm2022/eui-components-eui-ecl-label.mjs.map +1 -1
- package/fesm2022/eui-components-eui-feedback-message.mjs +2 -2
- package/fesm2022/eui-components-eui-feedback-message.mjs.map +1 -1
- package/fesm2022/eui-components-eui-fieldset.mjs +2 -2
- package/fesm2022/eui-components-eui-fieldset.mjs.map +1 -1
- package/fesm2022/eui-components-eui-file-upload.mjs +3 -3
- package/fesm2022/eui-components-eui-file-upload.mjs.map +1 -1
- package/fesm2022/eui-components-eui-growl.mjs +2 -2
- package/fesm2022/eui-components-eui-growl.mjs.map +1 -1
- package/fesm2022/eui-components-eui-icon-toggle.mjs +2 -2
- package/fesm2022/eui-components-eui-icon-toggle.mjs.map +1 -1
- package/fesm2022/eui-components-eui-icon.mjs +45 -42
- package/fesm2022/eui-components-eui-icon.mjs.map +2 -2
- package/fesm2022/eui-components-eui-input-checkbox.mjs +2 -2
- package/fesm2022/eui-components-eui-input-checkbox.mjs.map +1 -1
- package/fesm2022/eui-components-eui-input-group.mjs +2 -2
- package/fesm2022/eui-components-eui-input-group.mjs.map +1 -1
- package/fesm2022/eui-components-eui-input-number.mjs +2 -2
- package/fesm2022/eui-components-eui-input-number.mjs.map +1 -1
- package/fesm2022/eui-components-eui-input-radio.mjs +2 -2
- package/fesm2022/eui-components-eui-input-radio.mjs.map +1 -1
- package/fesm2022/eui-components-eui-input-text.mjs +2 -2
- package/fesm2022/eui-components-eui-input-text.mjs.map +1 -1
- package/fesm2022/eui-components-eui-label.mjs +2 -2
- package/fesm2022/eui-components-eui-label.mjs.map +1 -1
- package/fesm2022/eui-components-eui-language-selector.mjs +3 -3
- package/fesm2022/eui-components-eui-language-selector.mjs.map +1 -1
- package/fesm2022/eui-components-eui-list.mjs +4 -4
- package/fesm2022/eui-components-eui-list.mjs.map +1 -1
- package/fesm2022/eui-components-eui-menu.mjs +4 -4
- package/fesm2022/eui-components-eui-menu.mjs.map +2 -2
- package/fesm2022/eui-components-eui-overlay.mjs +3 -3
- package/fesm2022/eui-components-eui-overlay.mjs.map +1 -1
- package/fesm2022/eui-components-eui-page.mjs +4 -4
- package/fesm2022/eui-components-eui-page.mjs.map +1 -1
- package/fesm2022/eui-components-eui-paginator.mjs +1 -1
- package/fesm2022/eui-components-eui-paginator.mjs.map +1 -1
- package/fesm2022/eui-components-eui-popover.mjs +2 -2
- package/fesm2022/eui-components-eui-popover.mjs.map +1 -1
- package/fesm2022/eui-components-eui-progress-bar.mjs +2 -2
- package/fesm2022/eui-components-eui-progress-bar.mjs.map +1 -1
- package/fesm2022/eui-components-eui-progress-circle.mjs +2 -2
- package/fesm2022/eui-components-eui-progress-circle.mjs.map +1 -1
- package/fesm2022/eui-components-eui-select.mjs +2 -2
- package/fesm2022/eui-components-eui-select.mjs.map +1 -1
- package/fesm2022/eui-components-eui-sidebar-menu.mjs +2 -2
- package/fesm2022/eui-components-eui-sidebar-menu.mjs.map +1 -1
- package/fesm2022/eui-components-eui-skeleton.mjs +2 -2
- package/fesm2022/eui-components-eui-skeleton.mjs.map +1 -1
- package/fesm2022/eui-components-eui-slide-toggle.mjs +2 -2
- package/fesm2022/eui-components-eui-slide-toggle.mjs.map +1 -1
- package/fesm2022/eui-components-eui-table.mjs +8 -8
- package/fesm2022/eui-components-eui-table.mjs.map +2 -2
- package/fesm2022/eui-components-eui-tabs.mjs +4 -4
- package/fesm2022/eui-components-eui-tabs.mjs.map +1 -1
- package/fesm2022/eui-components-eui-textarea.mjs +2 -2
- package/fesm2022/eui-components-eui-timebar.mjs +2 -2
- package/fesm2022/eui-components-eui-timebar.mjs.map +1 -1
- package/fesm2022/eui-components-eui-timeline.mjs +4 -4
- package/fesm2022/eui-components-eui-timeline.mjs.map +1 -1
- package/fesm2022/eui-components-eui-timepicker.mjs +14 -14
- package/fesm2022/eui-components-eui-timepicker.mjs.map +2 -2
- package/fesm2022/eui-components-eui-tree-list.mjs +4 -4
- package/fesm2022/eui-components-eui-tree-list.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tree.mjs +2 -2
- package/fesm2022/eui-components-eui-tree.mjs.map +1 -1
- package/fesm2022/eui-components-eui-wizard.mjs +4 -4
- package/fesm2022/eui-components-eui-wizard.mjs.map +1 -1
- package/fesm2022/eui-components-externals-charts.mjs +2 -2
- package/fesm2022/eui-components-externals-charts.mjs.map +1 -1
- package/fesm2022/eui-components-externals-eui-editor.mjs +2 -2
- package/fesm2022/eui-components-externals-eui-editor.mjs.map +1 -1
- package/fesm2022/eui-components-layout.mjs +40 -106
- package/fesm2022/eui-components-layout.mjs.map +2 -2
- package/package.json +3 -3
|
@@ -193,11 +193,11 @@ export class EuiTextareaComponent extends BaseDirective {
|
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
195
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTextareaComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EuiTextareaComponent, selector: "textarea[euiTextArea]", inputs: { disabled: "disabled", readonly: "readonly", id: "id", isInvalid: "isInvalid", e2eAttr: "e2eAttr" }, host: { listeners: { "input": "onInputChange($event.target.value)", "blur": "onBlur($event.target.value)" }, properties: { "class": "this.class", "attr.disabled": "this.disabled", "attr.readonly": "this.readonly", "attr.id": "this.id", "attr.data-e2e": "this.e2eAttr" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EuiTextareaComponent), multi: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".eui-textarea__wrapper{display:flex;position:relative;width:100%}.eui-textarea__wrapper .eui-textarea{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);appearance:none;background-color:var(--eui-
|
|
196
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EuiTextareaComponent, selector: "textarea[euiTextArea]", inputs: { disabled: "disabled", readonly: "readonly", id: "id", isInvalid: "isInvalid", e2eAttr: "e2eAttr" }, host: { listeners: { "input": "onInputChange($event.target.value)", "blur": "onBlur($event.target.value)" }, properties: { "class": "this.class", "attr.disabled": "this.disabled", "attr.readonly": "this.readonly", "attr.id": "this.id", "attr.data-e2e": "this.e2eAttr" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EuiTextareaComponent), multi: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".eui-textarea__wrapper{display:flex;position:relative;width:100%}.eui-textarea__wrapper .eui-textarea{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);appearance:none;background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-lighter);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-text);display:block;padding:calc(var(--eui-base-spacing-xs) - 2px) calc(var(--eui-base-spacing-m) - 2px);width:100%;height:auto;resize:vertical}.eui-textarea__wrapper .eui-textarea:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea::placeholder{color:var(--eui-c-secondary-lighter)!important;opacity:1}.eui-textarea__wrapper .eui-textarea[readonly]{background-color:transparent;border-color:transparent!important;box-shadow:none;height:inherit;pointer-events:none}.eui-textarea__wrapper .eui-textarea[readonly]+.eui-feedback-message,.eui-textarea__wrapper .eui-textarea[readonly]+.eui-input-maxlength{appearance:none;display:none}.eui-textarea__wrapper .eui-textarea[disabled]:not([readonly]),.eui-textarea__wrapper .eui-textarea--disabled:not([readonly]){background-color:var(--eui-c-secondary-bg-light)!important;border:1px solid var(--eui-c-secondary-lighter)!important;color:var(--eui-c-secondary-light);pointer-events:auto}.eui-textarea__wrapper .eui-textarea--invalid,.eui-textarea__wrapper .eui-textarea--danger{border:1px solid var(--eui-c-danger)}.eui-textarea__wrapper .eui-textarea--clearable{padding-right:var(--eui-base-spacing-2xl)}.eui-textarea__wrapper .eui-textarea--clearable-icon{cursor:pointer;position:absolute;right:var(--eui-base-spacing-s);-webkit-user-select:none;user-select:none;visibility:visible}.eui-textarea__wrapper .eui-textarea--clearable-icon:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea--clearable-icon:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea--clearable-icon [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea--clearable-icon>svg{fill:var(--eui-c-secondary-lighter)}.eui-textarea__wrapper .eui-textarea--clearable-icon>svg:hover{fill:var(--eui-c-danger)}.eui-textarea__wrapper .eui-textarea--loading{padding-right:var(--eui-base-spacing-2xl)}.eui-textarea__wrapper .eui-textarea--loading-icon{align-items:center;display:flex}.eui-textarea__wrapper .eui-textarea--loading-icon:after,.eui-textarea__wrapper .eui-textarea--loading-icon:before{content:\"\";height:var(--eui-base-spacing-l);position:absolute;right:var(--eui-base-spacing-s);width:var(--eui-base-spacing-l)}.eui-textarea__wrapper .eui-textarea--loading-icon:before{border:var(--eui-base-spacing-2xs) solid rgba(0,0,0,.35);border-radius:100%}.eui-textarea__wrapper .eui-textarea--loading-icon:after{animation:eui-loading .6s linear;animation-iteration-count:infinite;border-color:var(--eui-c-white) transparent transparent;border-radius:100%;border-style:solid;border-width:var(--eui-base-spacing-2xs);box-shadow:0 0 0 1px transparent}.eui-textarea__wrapper .eui-textarea--loading-icon--sm:after,.eui-textarea__wrapper .eui-textarea--loading-icon--sm:before{height:var(--eui-base-spacing-m);width:var(--eui-base-spacing-m)}@keyframes eui-loading{to{transform:rotate(360deg)}}.eui-textarea__wrapper .eui-textarea::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-secondary-bg-light)}.eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-thumb{background-color:var(--eui-c-bg0);border-radius:5rem}.eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-lighter)}.eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-bg-light);border-radius:0}.eui-textarea__wrapper .eui-textarea--disabled,.eui-textarea__wrapper .eui-textarea[disabled]{pointer-events:auto}.eui-textarea__wrapper .eui-textarea__value-container,.eui-textarea__wrapper--readonly .eui-input-maxlength-wrapper{appearance:none;display:none}.eui-textarea__wrapper--readonly .eui-textarea__value-container{appearance:initial;color:var(--eui-c-secondary-bg-light);display:inline-flex;word-break:break-word}.eui-textarea__wrapper .eui-textarea--readonly{appearance:none;display:none}.eui-textarea__wrapper .eui-textarea--readonly .eui-textarea__value-container{min-height:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs))}.eui-textarea__wrapper .eui-textarea--invalid{border:1px solid var(--eui-c-danger)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
197
197
|
}
|
|
198
198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTextareaComponent, decorators: [{
|
|
199
199
|
type: Component,
|
|
200
|
-
args: [{ selector: 'textarea[euiTextArea]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EuiTextareaComponent), multi: true }], styles: [".eui-textarea__wrapper{display:flex;position:relative;width:100%}.eui-textarea__wrapper .eui-textarea{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);appearance:none;background-color:var(--eui-
|
|
200
|
+
args: [{ selector: 'textarea[euiTextArea]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EuiTextareaComponent), multi: true }], styles: [".eui-textarea__wrapper{display:flex;position:relative;width:100%}.eui-textarea__wrapper .eui-textarea{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);appearance:none;background-color:var(--eui-c-white);border:1px solid var(--eui-c-secondary-lighter);border-radius:var(--eui-base-border-radius);box-shadow:var(--eui-app-box-shadow);color:var(--eui-c-text);display:block;padding:calc(var(--eui-base-spacing-xs) - 2px) calc(var(--eui-base-spacing-m) - 2px);width:100%;height:auto;resize:vertical}.eui-textarea__wrapper .eui-textarea:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea::placeholder{color:var(--eui-c-secondary-lighter)!important;opacity:1}.eui-textarea__wrapper .eui-textarea[readonly]{background-color:transparent;border-color:transparent!important;box-shadow:none;height:inherit;pointer-events:none}.eui-textarea__wrapper .eui-textarea[readonly]+.eui-feedback-message,.eui-textarea__wrapper .eui-textarea[readonly]+.eui-input-maxlength{appearance:none;display:none}.eui-textarea__wrapper .eui-textarea[disabled]:not([readonly]),.eui-textarea__wrapper .eui-textarea--disabled:not([readonly]){background-color:var(--eui-c-secondary-bg-light)!important;border:1px solid var(--eui-c-secondary-lighter)!important;color:var(--eui-c-secondary-light);pointer-events:auto}.eui-textarea__wrapper .eui-textarea--invalid,.eui-textarea__wrapper .eui-textarea--danger{border:1px solid var(--eui-c-danger)}.eui-textarea__wrapper .eui-textarea--clearable{padding-right:var(--eui-base-spacing-2xl)}.eui-textarea__wrapper .eui-textarea--clearable-icon{cursor:pointer;position:absolute;right:var(--eui-base-spacing-s);-webkit-user-select:none;user-select:none;visibility:visible}.eui-textarea__wrapper .eui-textarea--clearable-icon:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea--clearable-icon:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea--clearable-icon [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-textarea__wrapper .eui-textarea--clearable-icon>svg{fill:var(--eui-c-secondary-lighter)}.eui-textarea__wrapper .eui-textarea--clearable-icon>svg:hover{fill:var(--eui-c-danger)}.eui-textarea__wrapper .eui-textarea--loading{padding-right:var(--eui-base-spacing-2xl)}.eui-textarea__wrapper .eui-textarea--loading-icon{align-items:center;display:flex}.eui-textarea__wrapper .eui-textarea--loading-icon:after,.eui-textarea__wrapper .eui-textarea--loading-icon:before{content:\"\";height:var(--eui-base-spacing-l);position:absolute;right:var(--eui-base-spacing-s);width:var(--eui-base-spacing-l)}.eui-textarea__wrapper .eui-textarea--loading-icon:before{border:var(--eui-base-spacing-2xs) solid rgba(0,0,0,.35);border-radius:100%}.eui-textarea__wrapper .eui-textarea--loading-icon:after{animation:eui-loading .6s linear;animation-iteration-count:infinite;border-color:var(--eui-c-white) transparent transparent;border-radius:100%;border-style:solid;border-width:var(--eui-base-spacing-2xs);box-shadow:0 0 0 1px transparent}.eui-textarea__wrapper .eui-textarea--loading-icon--sm:after,.eui-textarea__wrapper .eui-textarea--loading-icon--sm:before{height:var(--eui-base-spacing-m);width:var(--eui-base-spacing-m)}@keyframes eui-loading{to{transform:rotate(360deg)}}.eui-textarea__wrapper .eui-textarea::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-secondary-bg-light)}.eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-thumb{background-color:var(--eui-c-bg0);border-radius:5rem}.eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-secondary-lighter)}.eui-textarea__wrapper .eui-textarea::-webkit-scrollbar-track{background-color:var(--eui-c-secondary-bg-light);border-radius:0}.eui-textarea__wrapper .eui-textarea--disabled,.eui-textarea__wrapper .eui-textarea[disabled]{pointer-events:auto}.eui-textarea__wrapper .eui-textarea__value-container,.eui-textarea__wrapper--readonly .eui-input-maxlength-wrapper{appearance:none;display:none}.eui-textarea__wrapper--readonly .eui-textarea__value-container{appearance:initial;color:var(--eui-c-secondary-bg-light);display:inline-flex;word-break:break-word}.eui-textarea__wrapper .eui-textarea--readonly{appearance:none;display:none}.eui-textarea__wrapper .eui-textarea--readonly .eui-textarea__value-container{min-height:calc(var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs))}.eui-textarea__wrapper .eui-textarea--invalid{border:1px solid var(--eui-c-danger)}\n"] }]
|
|
201
201
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { class: [{
|
|
202
202
|
type: HostBinding,
|
|
203
203
|
args: ['class']
|
|
@@ -281,11 +281,11 @@ export class EuiTimebarComponent {
|
|
|
281
281
|
}
|
|
282
282
|
}
|
|
283
283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: "isShowLegend", isShowLegendAsIndex: "isShowLegendAsIndex", isShowCurrentDateMarker: "isShowCurrentDateMarker", isCurrentDateMarkerAlwaysInRange: "isCurrentDateMarkerAlwaysInRange", isGroupOverlappingLabels: "isGroupOverlappingLabels" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-ctx-c-s-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-ctx-c-p);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-ctx-c-s-light);border-radius:var(--eui-border-radius-base);color:var(--eui-ctx-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-ctx-c-p);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-ctx-c-da);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-base-spacing-m) - 2px);color:var(--eui-ctx-c-da);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-ctx-c-p);border-radius:100%;color:var(--eui-ctx-c-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}.eui-timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-ctx-c-in)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-ctx-c-su)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-ctx-c-wa)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-ctx-c-da)}.eui-timebar__step--info{border-color:var(--eui-ctx-c-in)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-ctx-c-in)}.eui-timebar__step--success{border-color:var(--eui-ctx-c-su)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-ctx-c-su)}.eui-timebar__step--warning{border-color:var(--eui-ctx-c-wa)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-ctx-c-wa)}.eui-timebar__step--danger{border-color:var(--eui-ctx-c-da)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-ctx-c-da)}.eui-timebar__legend-item-icon{color:var(--eui-ctx-c-p);fill:var(--eui-ctx-c-p);width:var(--eui-base-spacing-3xl);height:var(--eui-base-spacing-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-ctx-c-in)}.eui-timebar__legend-item-icon--success{color:var(--eui-ctx-c-su)}.eui-timebar__legend-item-icon--warning{color:var(--eui-ctx-c-wa)}.eui-timebar__legend-item-icon--danger{color:var(--eui-ctx-c-da)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: "isShowLegend", isShowLegendAsIndex: "isShowLegendAsIndex", isShowCurrentDateMarker: "isShowCurrentDateMarker", isCurrentDateMarkerAlwaysInRange: "isCurrentDateMarkerAlwaysInRange", isGroupOverlappingLabels: "isGroupOverlappingLabels" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-secondary-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-secondary-light);border-radius:var(--eui-border-radius-base);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-base-spacing-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:100%;color:var(--eui-c-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}.eui-timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-base-spacing-3xl);height:var(--eui-base-spacing-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
285
285
|
}
|
|
286
286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimebarComponent, decorators: [{
|
|
287
287
|
type: Component,
|
|
288
|
-
args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-ctx-c-s-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-ctx-c-p);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-ctx-c-s-light);border-radius:var(--eui-border-radius-base);color:var(--eui-ctx-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-ctx-c-p);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-ctx-c-da);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-base-spacing-m) - 2px);color:var(--eui-ctx-c-da);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-ctx-c-p);border-radius:100%;color:var(--eui-ctx-c-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}.eui-timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-ctx-c-in)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-ctx-c-su)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-ctx-c-wa)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-ctx-c-da)}.eui-timebar__step--info{border-color:var(--eui-ctx-c-in)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-ctx-c-in)}.eui-timebar__step--success{border-color:var(--eui-ctx-c-su)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-ctx-c-su)}.eui-timebar__step--warning{border-color:var(--eui-ctx-c-wa)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-ctx-c-wa)}.eui-timebar__step--danger{border-color:var(--eui-ctx-c-da)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-ctx-c-da)}.eui-timebar__legend-item-icon{color:var(--eui-ctx-c-p);fill:var(--eui-ctx-c-p);width:var(--eui-base-spacing-3xl);height:var(--eui-base-spacing-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-ctx-c-in)}.eui-timebar__legend-item-icon--success{color:var(--eui-ctx-c-su)}.eui-timebar__legend-item-icon--warning{color:var(--eui-ctx-c-wa)}.eui-timebar__legend-item-icon--danger{color:var(--eui-ctx-c-da)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-l);margin-left:18px}}\n"] }]
|
|
288
|
+
args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-secondary-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-secondary-light);border-radius:var(--eui-border-radius-base);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-base-spacing-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:100%;color:var(--eui-c-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}.eui-timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-base-spacing-3xl);height:var(--eui-base-spacing-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-l);margin-left:18px}}\n"] }]
|
|
289
289
|
}], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
|
|
290
290
|
type: ViewChild,
|
|
291
291
|
args: ['container']
|
|
@@ -21,7 +21,7 @@ export class EuiTimelineItemComponent {
|
|
|
21
21
|
.trim();
|
|
22
22
|
}
|
|
23
23
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimelineItemComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: EuiTimelineItemComponent, selector: "eui-timeline-item", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", date: "date", dateStyleClass: "dateStyleClass", time: "time", timeStyleClass: "timeStyleClass", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute], isGroup: ["isGroup", "isGroup", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiPrimary", "euiPrimary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: EuiTimelineItemComponent, selector: "eui-timeline-item", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", date: "date", dateStyleClass: "dateStyleClass", time: "time", timeStyleClass: "timeStyleClass", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute], isGroup: ["isGroup", "isGroup", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiPrimary", "euiPrimary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-white);border-color:var(--eui-c-accent);border-radius:50%;border-style:solid;border-width:2px;display:flex;flex-direction:column;max-height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));margin:0 var(--eui-base-spacing-m);min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-secondary-lighter);content:\"\";height:calc(100% - var(--eui-base-spacing-2xs));position:absolute;top:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:2px;z-index:1}.eui-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-secondary-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-base-spacing-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-secondary);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-secondary-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-secondary);font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-secondary-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-base-spacing-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-secondary-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-secondary);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-secondary-lightest)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-secondary-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
25
25
|
}
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
@@ -30,7 +30,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
|
|
|
30
30
|
directive: BaseStatesDirective,
|
|
31
31
|
inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],
|
|
32
32
|
},
|
|
33
|
-
], template: "<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-
|
|
33
|
+
], template: "<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-white);border-color:var(--eui-c-accent);border-radius:50%;border-style:solid;border-width:2px;display:flex;flex-direction:column;max-height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));margin:0 var(--eui-base-spacing-m);min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-secondary-lighter);content:\"\";height:calc(100% - var(--eui-base-spacing-2xs));position:absolute;top:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:2px;z-index:1}.eui-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-secondary-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-base-spacing-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-secondary);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-secondary-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-secondary);font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-secondary-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-base-spacing-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-secondary-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-secondary);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-secondary-lightest)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-secondary-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-m)}\n"] }]
|
|
34
34
|
}], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
|
|
35
35
|
type: HostBinding,
|
|
36
36
|
args: ['class']
|
|
@@ -25,11 +25,11 @@ export class EuiTimelineComponent {
|
|
|
25
25
|
return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();
|
|
26
26
|
}
|
|
27
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "timelineItems", predicate: EuiTimelineItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "timelineItems", predicate: EuiTimelineItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-white);border-color:var(--eui-c-accent);border-radius:50%;border-style:solid;border-width:2px;display:flex;flex-direction:column;max-height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));margin:0 var(--eui-base-spacing-m);min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-secondary-lighter);content:\"\";height:calc(100% - var(--eui-base-spacing-2xs));position:absolute;top:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:2px;z-index:1}.eui-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-secondary-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-base-spacing-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-secondary);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-secondary-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-secondary);font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-secondary-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-base-spacing-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-secondary-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-secondary);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-secondary-lightest)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-secondary-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-m)}\n"] }); }
|
|
29
29
|
}
|
|
30
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: EuiTimelineComponent, decorators: [{
|
|
31
31
|
type: Component,
|
|
32
|
-
args: [{ selector: 'eui-timeline', template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-
|
|
32
|
+
args: [{ selector: 'eui-timeline', template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-base-spacing-m);position:relative;width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-base-spacing-m));position:relative;text-align:center;word-break:break-all}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-white);border-color:var(--eui-c-accent);border-radius:50%;border-style:solid;border-width:2px;display:flex;flex-direction:column;max-height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));margin:0 var(--eui-base-spacing-m);min-width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline .eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-secondary-lighter);content:\"\";height:calc(100% - var(--eui-base-spacing-2xs));position:absolute;top:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));width:2px;z-index:1}.eui-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-secondary-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-base-spacing-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-secondary);font:normal normal 400 1.25rem/2rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-secondary-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-secondary);font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-secondary-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-base-spacing-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-secondary-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-base-spacing-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-secondary);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-secondary-lightest)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-secondary-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-m)}\n"] }]
|
|
33
33
|
}], propDecorators: { cssClasses: [{
|
|
34
34
|
type: HostBinding,
|
|
35
35
|
args: ['class']
|