@eui/components 17.0.0-next.22 → 17.0.0-next.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/docs/components/EuiAlertComponent.html +36 -1
  2. package/docs/components/EuiDashboardCardComponent.html +21 -2
  3. package/docs/components/EuiTimelineComponent.html +48 -48
  4. package/docs/components/EuiTimelineItemComponent.html +94 -66
  5. package/docs/components/EuiTreeComponent.html +1 -1
  6. package/docs/components/EuiTreeListItemComponent.html +1 -1
  7. package/docs/dependencies.html +2 -2
  8. package/docs/js/menu-wc.js +12 -12
  9. package/docs/js/menu-wc_es5.js +1 -1
  10. package/docs/js/search/search_index.js +2 -2
  11. package/docs/miscellaneous/variables.html +14 -14
  12. package/esm2022/eui-alert/eui-alert.component.mjs +10 -6
  13. package/esm2022/eui-avatar/eui-avatar.component.mjs +2 -2
  14. package/esm2022/eui-dashboard-card/eui-dashboard-card.component.mjs +8 -4
  15. package/esm2022/eui-menu/eui-menu-item.component.mjs +2 -2
  16. package/esm2022/eui-timeline/eui-timeline-item.component.mjs +42 -19
  17. package/esm2022/eui-timeline/eui-timeline.component.mjs +26 -11
  18. package/esm2022/eui-tree/eui-tree.component.mjs +4 -4
  19. package/esm2022/eui-tree-list/eui-tree-list-item.component.mjs +3 -3
  20. package/eui-alert/eui-alert.component.d.ts +3 -2
  21. package/eui-alert/eui-alert.component.d.ts.map +1 -1
  22. package/eui-dashboard-card/eui-dashboard-card.component.d.ts +2 -1
  23. package/eui-dashboard-card/eui-dashboard-card.component.d.ts.map +1 -1
  24. package/eui-timeline/eui-timeline-item.component.d.ts +10 -8
  25. package/eui-timeline/eui-timeline-item.component.d.ts.map +1 -1
  26. package/eui-timeline/eui-timeline.component.d.ts +3 -3
  27. package/eui-timeline/eui-timeline.component.d.ts.map +1 -1
  28. package/fesm2022/eui-components-eui-alert.mjs +9 -5
  29. package/fesm2022/eui-components-eui-alert.mjs.map +1 -1
  30. package/fesm2022/eui-components-eui-avatar.mjs +2 -2
  31. package/fesm2022/eui-components-eui-avatar.mjs.map +1 -1
  32. package/fesm2022/eui-components-eui-dashboard-card.mjs +7 -3
  33. package/fesm2022/eui-components-eui-dashboard-card.mjs.map +1 -1
  34. package/fesm2022/eui-components-eui-menu.mjs +1 -1
  35. package/fesm2022/eui-components-eui-menu.mjs.map +1 -1
  36. package/fesm2022/eui-components-eui-timeline.mjs +61 -25
  37. package/fesm2022/eui-components-eui-timeline.mjs.map +1 -1
  38. package/fesm2022/eui-components-eui-tree-list.mjs +2 -2
  39. package/fesm2022/eui-components-eui-tree-list.mjs.map +1 -1
  40. package/fesm2022/eui-components-eui-tree.mjs +3 -3
  41. package/fesm2022/eui-components-eui-tree.mjs.map +1 -1
  42. package/package.json +12 -12
@@ -1,70 +1,104 @@
1
+ import { __decorate } from 'tslib';
1
2
  import * as i0 from '@angular/core';
2
- import { Component, ViewEncapsulation, Input, forwardRef, Host, Inject, NgModule } from '@angular/core';
3
- import { coerceBooleanProperty } from '@angular/cdk/coercion';
4
- import * as i1 from '@angular/common';
3
+ import { Component, ViewEncapsulation, HostBinding, Input, forwardRef, Host, Inject, NgModule } from '@angular/core';
4
+ import { coerceBoolean } from '@eui/base';
5
+ import * as i1 from '@eui/components/shared';
6
+ import { BaseStatesDirective } from '@eui/components/shared';
7
+ import * as i2 from '@angular/common';
5
8
  import { CommonModule } from '@angular/common';
6
9
 
7
10
  class EuiTimelineComponent {
8
11
  constructor() {
9
12
  this.e2eAttr = 'eui-timeline';
10
- this._isLeftAligned = false;
13
+ this.isLeftAligned = false;
11
14
  }
12
- get isLeftAligned() {
13
- return this._isLeftAligned;
15
+ get cssClasses() {
16
+ return this.getCssClasses();
14
17
  }
15
- set isLeftAligned(value) {
16
- this._isLeftAligned = coerceBooleanProperty(value);
18
+ getCssClasses() {
19
+ return [
20
+ 'eui-timeline',
21
+ this.isLeftAligned ? 'eui-timeline--left-aligned' : '',
22
+ ]
23
+ .join(' ')
24
+ .trim();
17
25
  }
18
26
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
19
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: "isLeftAligned" }, ngImport: i0, template: "<ul class=\"eui-timeline\" [class.eui-timeline--left-aligned]=\"isLeftAligned\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-content></ng-content>\n</ul>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));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-base-color-grey-90);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-140)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
27
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: "isLeftAligned" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));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-base-color-grey-90);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
20
28
  }
29
+ __decorate([
30
+ coerceBoolean
31
+ ], EuiTimelineComponent.prototype, "isLeftAligned", void 0);
21
32
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimelineComponent, decorators: [{
22
33
  type: Component,
23
- args: [{ selector: 'eui-timeline', encapsulation: ViewEncapsulation.None, template: "<ul class=\"eui-timeline\" [class.eui-timeline--left-aligned]=\"isLeftAligned\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-content></ng-content>\n</ul>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));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-base-color-grey-90);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-140)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"] }]
24
- }], propDecorators: { e2eAttr: [{
34
+ args: [{ selector: 'eui-timeline', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));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-base-color-grey-90);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"] }]
35
+ }], propDecorators: { cssClasses: [{
36
+ type: HostBinding,
37
+ args: ['class']
38
+ }], e2eAttr: [{
39
+ type: HostBinding,
40
+ args: ['attr.data-e2e']
41
+ }, {
25
42
  type: Input
26
43
  }], isLeftAligned: [{
27
44
  type: Input
28
45
  }] } });
29
46
 
30
- // TODO v17 - adapt to default cmp coerce base directive input etc...
31
47
  class EuiTimelineItemComponent {
32
- get isGroup() {
33
- return this._isGroup;
34
- }
35
- set isGroup(value) {
36
- this._isGroup = coerceBooleanProperty(value);
48
+ get cssClasses() {
49
+ return this.getCssClasses();
37
50
  }
38
- constructor(uxTimelineItemsComponent) {
51
+ constructor(uxTimelineItemsComponent, baseStatesDirective) {
52
+ this.baseStatesDirective = baseStatesDirective;
39
53
  this.e2eAttr = 'eui-timeline-item';
40
54
  this.dateStyleClass = '';
41
55
  this.timeStyleClass = '';
42
56
  this.isLeftAligned = false;
43
- this._isGroup = false;
57
+ this.isGroup = false;
44
58
  this.euiTimelineComponent = uxTimelineItemsComponent;
45
59
  }
46
60
  ngAfterContentInit() {
47
61
  this.isLeftAligned = this.euiTimelineComponent.isLeftAligned;
48
62
  }
49
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimelineItemComponent, deps: [{ token: forwardRef(() => EuiTimelineComponent), host: true }], target: i0.ɵɵFactoryTarget.Component }); }
50
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiTimelineItemComponent, selector: "eui-timeline-item", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", styleClass: "styleClass", date: "date", dateStyleClass: "dateStyleClass", time: "time", timeStyleClass: "timeStyleClass", isGroup: "isGroup" }, ngImport: i0, template: "<li class=\"eui-timeline-item eui-timeline-item--{{ styleClass }}\" [class.eui-timeline-item--more]=\"isGroup\" attr.data-e2e=\"{{ e2eAttr }}\">\n <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 <span *ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n <div class=\"eui-timeline-item__content\">\n <div #customContent>\n <ng-content></ng-content>\n </div>\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</li>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));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-base-color-grey-90);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-140)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
63
+ getCssClasses() {
64
+ return [this.baseStatesDirective.getCssClasses('eui-timeline-item'), this.isGroup ? 'eui-timeline-item--more' : '']
65
+ .join(' ')
66
+ .trim();
67
+ }
68
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimelineItemComponent, deps: [{ token: forwardRef(() => EuiTimelineComponent), host: true }, { token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
69
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiTimelineItemComponent, selector: "eui-timeline-item", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", date: "date", dateStyleClass: "dateStyleClass", time: "time", timeStyleClass: "timeStyleClass", isLeftAligned: "isLeftAligned", isGroup: "isGroup" }, 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<span *ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n<div class=\"eui-timeline-item__content\">\n <div #customContent>\n <ng-content></ng-content>\n </div>\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{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));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-base-color-grey-90);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
51
70
  }
71
+ __decorate([
72
+ coerceBoolean
73
+ ], EuiTimelineItemComponent.prototype, "isLeftAligned", void 0);
74
+ __decorate([
75
+ coerceBoolean
76
+ ], EuiTimelineItemComponent.prototype, "isGroup", void 0);
52
77
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
53
78
  type: Component,
54
- args: [{ selector: 'eui-timeline-item', encapsulation: ViewEncapsulation.None, template: "<li class=\"eui-timeline-item eui-timeline-item--{{ styleClass }}\" [class.eui-timeline-item--more]=\"isGroup\" attr.data-e2e=\"{{ e2eAttr }}\">\n <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 <span *ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n <div class=\"eui-timeline-item__content\">\n <div #customContent>\n <ng-content></ng-content>\n </div>\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</li>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));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-base-color-grey-90);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-140)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"] }]
79
+ args: [{ selector: 'eui-timeline-item', encapsulation: ViewEncapsulation.None, hostDirectives: [
80
+ {
81
+ directive: BaseStatesDirective,
82
+ inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],
83
+ },
84
+ ], 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<span *ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n<div class=\"eui-timeline-item__content\">\n <div #customContent>\n <ng-content></ng-content>\n </div>\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{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));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-base-color-grey-90);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"] }]
55
85
  }], ctorParameters: () => [{ type: EuiTimelineComponent, decorators: [{
56
86
  type: Host
57
87
  }, {
58
88
  type: Inject,
59
89
  args: [forwardRef(() => EuiTimelineComponent)]
60
- }] }], propDecorators: { e2eAttr: [{
90
+ }] }, { type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
91
+ type: HostBinding,
92
+ args: ['class']
93
+ }], e2eAttr: [{
94
+ type: HostBinding,
95
+ args: ['attr.data-e2e']
96
+ }, {
61
97
  type: Input
62
98
  }], label: [{
63
99
  type: Input
64
100
  }], subLabel: [{
65
101
  type: Input
66
- }], styleClass: [{
67
- type: Input
68
102
  }], date: [{
69
103
  type: Input
70
104
  }], dateStyleClass: [{
@@ -73,6 +107,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ng
73
107
  type: Input
74
108
  }], timeStyleClass: [{
75
109
  type: Input
110
+ }], isLeftAligned: [{
111
+ type: Input
76
112
  }], isGroup: [{
77
113
  type: Input
78
114
  }] } });
@@ -1 +1 @@
1
- {"version":3,"file":"eui-components-eui-timeline.mjs","sources":["../../eui-timeline/eui-timeline.component.ts","../../eui-timeline/eui-timeline.component.html","../../eui-timeline/eui-timeline-item.component.ts","../../eui-timeline/eui-timeline-item.component.html","../../eui-timeline/eui-timeline.module.ts","../../eui-timeline/eui-components-eui-timeline.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\n@Component({\n selector: 'eui-timeline',\n templateUrl: './eui-timeline.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiTimelineComponent {\n @Input() e2eAttr = 'eui-timeline';\n @Input()\n get isLeftAligned(): boolean {\n return this._isLeftAligned;\n }\n set isLeftAligned(value: BooleanInput) {\n this._isLeftAligned = coerceBooleanProperty(value);\n }\n private _isLeftAligned = false;\n}\n","<ul class=\"eui-timeline\" [class.eui-timeline--left-aligned]=\"isLeftAligned\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-content></ng-content>\n</ul>\n","// TODO v17 - adapt to default cmp coerce base directive input etc...\nimport { AfterContentInit, Component, forwardRef, Host, Inject, Input, ViewEncapsulation } from '@angular/core';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\n@Component({\n selector: 'eui-timeline-item',\n templateUrl: './eui-timeline-item.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiTimelineItemComponent implements AfterContentInit {\n @Input() e2eAttr = 'eui-timeline-item';\n @Input() label: string;\n @Input() subLabel: string;\n @Input() styleClass: string;\n @Input() date: string;\n @Input() dateStyleClass = '';\n @Input() time: string;\n @Input() timeStyleClass = '';\n\n euiTimelineComponent: EuiTimelineComponent;\n isLeftAligned = false;\n\n @Input()\n get isGroup(): boolean {\n return this._isGroup;\n }\n set isGroup(value: BooleanInput) {\n this._isGroup = coerceBooleanProperty(value);\n }\n private _isGroup = false;\n\n constructor(@Host() @Inject(forwardRef(() => EuiTimelineComponent)) uxTimelineItemsComponent: EuiTimelineComponent) {\n this.euiTimelineComponent = uxTimelineItemsComponent;\n }\n\n ngAfterContentInit(): void {\n this.isLeftAligned = this.euiTimelineComponent.isLeftAligned;\n }\n}\n","<li class=\"eui-timeline-item eui-timeline-item--{{ styleClass }}\" [class.eui-timeline-item--more]=\"isGroup\" attr.data-e2e=\"{{ e2eAttr }}\">\n <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 <span *ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n <div class=\"eui-timeline-item__content\">\n <div #customContent>\n <ng-content></ng-content>\n </div>\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</li>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { EuiTimelineItemComponent } from './eui-timeline-item.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [EuiTimelineComponent, EuiTimelineItemComponent],\n declarations: [EuiTimelineComponent, EuiTimelineItemComponent],\n})\nexport class EuiTimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"eui-components-eui-timeline.mjs","sources":["../../eui-timeline/eui-timeline.component.ts","../../eui-timeline/eui-timeline.component.html","../../eui-timeline/eui-timeline-item.component.ts","../../eui-timeline/eui-timeline-item.component.html","../../eui-timeline/eui-timeline.module.ts","../../eui-timeline/eui-components-eui-timeline.ts"],"sourcesContent":["import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\nimport { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBoolean } from '@eui/base';\n\n@Component({\n selector: 'eui-timeline',\n templateUrl: './eui-timeline.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiTimelineComponent {\n @HostBinding('class')\n public get cssClasses(): string {\n return this.getCssClasses();\n }\n @HostBinding('attr.data-e2e')\n @Input()\n e2eAttr = 'eui-timeline';\n\n @Input()\n @coerceBoolean\n isLeftAligned: BooleanInput = false;\n\n private getCssClasses(): string {\n return [\n 'eui-timeline',\n this.isLeftAligned ? 'eui-timeline--left-aligned' : '',\n ]\n .join(' ')\n .trim();\n }\n}\n","<ng-content></ng-content>\n","// TODO v17 - adapt to default cmp coerce base directive input etc...\nimport { AfterContentInit, Component, forwardRef, Host, HostBinding, Inject, Input, ViewEncapsulation } from '@angular/core';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBoolean } from '@eui/base';\nimport { BaseStatesDirective } from '@eui/components/shared';\n\n@Component({\n selector: 'eui-timeline-item',\n templateUrl: './eui-timeline-item.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [\n {\n directive: BaseStatesDirective,\n inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],\n },\n ],\n})\nexport class EuiTimelineItemComponent implements AfterContentInit {\n @HostBinding('class')\n public get cssClasses(): string {\n return this.getCssClasses();\n }\n @HostBinding('attr.data-e2e')\n @Input()\n e2eAttr = 'eui-timeline-item';\n\n @Input() label: string;\n @Input() subLabel: string;\n @Input() date: string;\n @Input() dateStyleClass = '';\n @Input() time: string;\n @Input() timeStyleClass = '';\n\n @Input()\n @coerceBoolean\n isLeftAligned: BooleanInput = false;\n\n @Input()\n @coerceBoolean\n isGroup: BooleanInput = false;\n\n euiTimelineComponent: EuiTimelineComponent;\n\n constructor(\n @Host() @Inject(forwardRef(() => EuiTimelineComponent)) uxTimelineItemsComponent: EuiTimelineComponent,\n public baseStatesDirective: BaseStatesDirective,\n ) {\n this.euiTimelineComponent = uxTimelineItemsComponent;\n }\n\n ngAfterContentInit(): void {\n this.isLeftAligned = this.euiTimelineComponent.isLeftAligned;\n }\n\n private getCssClasses(): string {\n return [this.baseStatesDirective.getCssClasses('eui-timeline-item'), this.isGroup ? 'eui-timeline-item--more' : '']\n .join(' ')\n .trim();\n }\n}\n","<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<span *ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n<div class=\"eui-timeline-item__content\">\n <div #customContent>\n <ng-content></ng-content>\n </div>\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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { EuiTimelineItemComponent } from './eui-timeline-item.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [EuiTimelineComponent, EuiTimelineItemComponent],\n declarations: [EuiTimelineComponent, EuiTimelineItemComponent],\n})\nexport class EuiTimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -220,7 +220,7 @@ class EuiTreeListItemComponent {
220
220
  .trim();
221
221
  }
222
222
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTreeListItemComponent, deps: [{ token: forwardRef(() => EuiTreeListComponent), host: true }, { token: i1.Router }, { token: i0.ElementRef }, { token: i2.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
223
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiTreeListItemComponent, selector: "eui-tree-list-item", inputs: { e2eAttr: "e2eAttr", id: "id", label: "label", linkUrl: "linkUrl", subLabel: "subLabel", active: "active", expanded: "expanded", alwaysExpanded: "alwaysExpanded", url: "url", isDisplaySubLinksOnHover: "isDisplaySubLinksOnHover", subLinks: "subLinks", isNavigateOnlyOnLabelClick: "isNavigateOnlyOnLabelClick", isVisible: "isVisible" }, outputs: { toggled: "toggled" }, host: { properties: { "class": "this.cssClasses", "attr.tabindex": "this.tabIndex", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "customLabel", first: true, predicate: i0.forwardRef(() => EuiTreeListItemLabelTagDirective), descendants: true }, { propertyName: "customDetailContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemDetailsContentTagDirective), descendants: true }, { propertyName: "customSubContainerContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemSubContainerContentTagDirective), descendants: true }, { propertyName: "subTreeList", predicate: i0.forwardRef(() => EuiTreeListComponent), descendants: true }, { propertyName: "customContent", predicate: i0.forwardRef(() => EuiTreeListItemContentComponent) }], viewQueries: [{ propertyName: "focusable", first: true, predicate: ["focusable"], descendants: true }], hostDirectives: [{ directive: i2.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiSuccess", "euiSuccess", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div class=\"eui-tree-list-item-header\">\n <div\n #focusable\n class=\"eui-tree-list-item-header__content\"\n role=\"treeitem\"\n [id]=\"id\"\n (keydown)=\"onKeyDown($event)\"\n attr.aria-label=\"{{ label }} {{ subLabel }}\"\n [attr.aria-expanded]=\"expanded\">\n\n <ng-container *ngIf=\"hasCustomContent; else noCustomContent\">\n <ng-content select=\"eui-tree-list-item-content\"></ng-content>\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </ng-container>\n\n <ng-template #noCustomContent>\n <div class=\"eui-u-flex\">\n <eui-label *ngIf=\"!customLabel\">\n {{label}}\n <eui-label *ngIf=\"subLabel\" euiSublabel>{{subLabel}}</eui-label>\n </eui-label>\n\n <eui-label *ngIf=\"customLabel\">\n <div class=\"eui-u-flex\">\n <ng-content select=\"eui-tree-list-item-label\"></ng-content>\n </div>\n </eui-label>\n </div>\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </ng-template>\n </div>\n\n <ng-container *ngIf=\"customDetailContent\">\n <div class=\"eui-tree-list-item-header__details-content\">\n <ng-content select=\"eui-tree-list-item-details\"></ng-content>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"customSubContainerContent\">\n <ng-content select=\"eui-tree-list-item-sub-container\"></ng-content>\n </ng-container>\n</div>\n\n<ng-template [ngIf]=\"expanded || alwaysExpanded\">\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #rightContent>\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary euiSizeS aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i5.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
223
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiTreeListItemComponent, selector: "eui-tree-list-item", inputs: { e2eAttr: "e2eAttr", id: "id", label: "label", linkUrl: "linkUrl", subLabel: "subLabel", active: "active", expanded: "expanded", alwaysExpanded: "alwaysExpanded", url: "url", isDisplaySubLinksOnHover: "isDisplaySubLinksOnHover", subLinks: "subLinks", isNavigateOnlyOnLabelClick: "isNavigateOnlyOnLabelClick", isVisible: "isVisible" }, outputs: { toggled: "toggled" }, host: { properties: { "class": "this.cssClasses", "attr.tabindex": "this.tabIndex", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "customLabel", first: true, predicate: i0.forwardRef(() => EuiTreeListItemLabelTagDirective), descendants: true }, { propertyName: "customDetailContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemDetailsContentTagDirective), descendants: true }, { propertyName: "customSubContainerContent", first: true, predicate: i0.forwardRef(() => EuiTreeListItemSubContainerContentTagDirective), descendants: true }, { propertyName: "subTreeList", predicate: i0.forwardRef(() => EuiTreeListComponent), descendants: true }, { propertyName: "customContent", predicate: i0.forwardRef(() => EuiTreeListItemContentComponent) }], viewQueries: [{ propertyName: "focusable", first: true, predicate: ["focusable"], descendants: true }], hostDirectives: [{ directive: i2.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiSuccess", "euiSuccess", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div class=\"eui-tree-list-item-header\">\n <div\n #focusable\n class=\"eui-tree-list-item-header__content\"\n role=\"treeitem\"\n [id]=\"id\"\n (keydown)=\"onKeyDown($event)\"\n attr.aria-label=\"{{ label }} {{ subLabel }}\"\n [attr.aria-expanded]=\"expanded\"\n role=\"treeitem\">\n\n <ng-container *ngIf=\"hasCustomContent; else noCustomContent\">\n <ng-content select=\"eui-tree-list-item-content\"></ng-content>\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </ng-container>\n\n <ng-template #noCustomContent>\n <div class=\"eui-u-flex\">\n <eui-label *ngIf=\"!customLabel\">\n {{label}}\n <eui-label *ngIf=\"subLabel\" euiSublabel>{{subLabel}}</eui-label>\n </eui-label>\n\n <eui-label *ngIf=\"customLabel\">\n <div class=\"eui-u-flex\">\n <ng-content select=\"eui-tree-list-item-label\"></ng-content>\n </div>\n </eui-label>\n </div>\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </ng-template>\n </div>\n\n <ng-container *ngIf=\"customDetailContent\">\n <div class=\"eui-tree-list-item-header__details-content\">\n <ng-content select=\"eui-tree-list-item-details\"></ng-content>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"customSubContainerContent\">\n <ng-content select=\"eui-tree-list-item-sub-container\"></ng-content>\n </ng-container>\n</div>\n\n<ng-template [ngIf]=\"expanded || alwaysExpanded\">\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #rightContent>\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary euiSizeS aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i5.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label, label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
224
224
  }
225
225
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTreeListItemComponent, decorators: [{
226
226
  type: Component,
@@ -229,7 +229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ng
229
229
  directive: BaseStatesDirective,
230
230
  inputs: ['euiPrimary', 'euiSecondary', 'euiInfo', 'euiSuccess', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],
231
231
  },
232
- ], template: "<div class=\"eui-tree-list-item-header\">\n <div\n #focusable\n class=\"eui-tree-list-item-header__content\"\n role=\"treeitem\"\n [id]=\"id\"\n (keydown)=\"onKeyDown($event)\"\n attr.aria-label=\"{{ label }} {{ subLabel }}\"\n [attr.aria-expanded]=\"expanded\">\n\n <ng-container *ngIf=\"hasCustomContent; else noCustomContent\">\n <ng-content select=\"eui-tree-list-item-content\"></ng-content>\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </ng-container>\n\n <ng-template #noCustomContent>\n <div class=\"eui-u-flex\">\n <eui-label *ngIf=\"!customLabel\">\n {{label}}\n <eui-label *ngIf=\"subLabel\" euiSublabel>{{subLabel}}</eui-label>\n </eui-label>\n\n <eui-label *ngIf=\"customLabel\">\n <div class=\"eui-u-flex\">\n <ng-content select=\"eui-tree-list-item-label\"></ng-content>\n </div>\n </eui-label>\n </div>\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </ng-template>\n </div>\n\n <ng-container *ngIf=\"customDetailContent\">\n <div class=\"eui-tree-list-item-header__details-content\">\n <ng-content select=\"eui-tree-list-item-details\"></ng-content>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"customSubContainerContent\">\n <ng-content select=\"eui-tree-list-item-sub-container\"></ng-content>\n </ng-container>\n</div>\n\n<ng-template [ngIf]=\"expanded || alwaysExpanded\">\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #rightContent>\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary euiSizeS aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n</ng-template>\n" }]
232
+ ], template: "<div class=\"eui-tree-list-item-header\">\n <div\n #focusable\n class=\"eui-tree-list-item-header__content\"\n role=\"treeitem\"\n [id]=\"id\"\n (keydown)=\"onKeyDown($event)\"\n attr.aria-label=\"{{ label }} {{ subLabel }}\"\n [attr.aria-expanded]=\"expanded\"\n role=\"treeitem\">\n\n <ng-container *ngIf=\"hasCustomContent; else noCustomContent\">\n <ng-content select=\"eui-tree-list-item-content\"></ng-content>\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </ng-container>\n\n <ng-template #noCustomContent>\n <div class=\"eui-u-flex\">\n <eui-label *ngIf=\"!customLabel\">\n {{label}}\n <eui-label *ngIf=\"subLabel\" euiSublabel>{{subLabel}}</eui-label>\n </eui-label>\n\n <eui-label *ngIf=\"customLabel\">\n <div class=\"eui-u-flex\">\n <ng-content select=\"eui-tree-list-item-label\"></ng-content>\n </div>\n </eui-label>\n </div>\n <ng-container *ngTemplateOutlet=\"rightContent\"></ng-container>\n </ng-template>\n </div>\n\n <ng-container *ngIf=\"customDetailContent\">\n <div class=\"eui-tree-list-item-header__details-content\">\n <ng-content select=\"eui-tree-list-item-details\"></ng-content>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"customSubContainerContent\">\n <ng-content select=\"eui-tree-list-item-sub-container\"></ng-content>\n </ng-container>\n</div>\n\n<ng-template [ngIf]=\"expanded || alwaysExpanded\">\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #rightContent>\n <div class=\"eui-tree-list-item-header__content-right-content\">\n <div class=\"eui-tree-list-item-header__content-expand-toggle-wrapper\">\n <button *ngIf=\"hasSub && !alwaysExpanded\" euiButton euiIconButton euiBasicButton euiRounded euiPrimary euiSizeS aria-label=\"Expand - collapse button icon\" (click)=\"toggle($event)\">\n <ng-container *ngIf=\"expanded\">\n <eui-icon-svg icon=\"eui-chevron-up\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n <ng-container *ngIf=\"!expanded\">\n <eui-icon-svg icon=\"eui-chevron-forward\" fillColor=\"grey-100\"></eui-icon-svg>\n </ng-container>\n </button>\n </div>\n </div>\n</ng-template>\n" }]
233
233
  }], ctorParameters: () => [{ type: undefined, decorators: [{
234
234
  type: Host
235
235
  }, {