@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.
- package/docs/components/EuiAlertComponent.html +36 -1
- package/docs/components/EuiDashboardCardComponent.html +21 -2
- package/docs/components/EuiTimelineComponent.html +48 -48
- package/docs/components/EuiTimelineItemComponent.html +94 -66
- package/docs/components/EuiTreeComponent.html +1 -1
- package/docs/components/EuiTreeListItemComponent.html +1 -1
- package/docs/dependencies.html +2 -2
- package/docs/js/menu-wc.js +12 -12
- package/docs/js/menu-wc_es5.js +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/miscellaneous/variables.html +14 -14
- package/esm2022/eui-alert/eui-alert.component.mjs +10 -6
- package/esm2022/eui-avatar/eui-avatar.component.mjs +2 -2
- package/esm2022/eui-dashboard-card/eui-dashboard-card.component.mjs +8 -4
- package/esm2022/eui-menu/eui-menu-item.component.mjs +2 -2
- package/esm2022/eui-timeline/eui-timeline-item.component.mjs +42 -19
- package/esm2022/eui-timeline/eui-timeline.component.mjs +26 -11
- package/esm2022/eui-tree/eui-tree.component.mjs +4 -4
- package/esm2022/eui-tree-list/eui-tree-list-item.component.mjs +3 -3
- package/eui-alert/eui-alert.component.d.ts +3 -2
- package/eui-alert/eui-alert.component.d.ts.map +1 -1
- package/eui-dashboard-card/eui-dashboard-card.component.d.ts +2 -1
- package/eui-dashboard-card/eui-dashboard-card.component.d.ts.map +1 -1
- package/eui-timeline/eui-timeline-item.component.d.ts +10 -8
- package/eui-timeline/eui-timeline-item.component.d.ts.map +1 -1
- package/eui-timeline/eui-timeline.component.d.ts +3 -3
- package/eui-timeline/eui-timeline.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-alert.mjs +9 -5
- package/fesm2022/eui-components-eui-alert.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-dashboard-card.mjs +7 -3
- package/fesm2022/eui-components-eui-dashboard-card.mjs.map +1 -1
- package/fesm2022/eui-components-eui-menu.mjs +1 -1
- package/fesm2022/eui-components-eui-menu.mjs.map +1 -1
- package/fesm2022/eui-components-eui-timeline.mjs +61 -25
- package/fesm2022/eui-components-eui-timeline.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tree-list.mjs +2 -2
- package/fesm2022/eui-components-eui-tree-list.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tree.mjs +3 -3
- package/fesm2022/eui-components-eui-tree.mjs.map +1 -1
- 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 {
|
4
|
-
import * as i1 from '@
|
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.
|
13
|
+
this.isLeftAligned = false;
|
11
14
|
}
|
12
|
-
get
|
13
|
-
return this.
|
15
|
+
get cssClasses() {
|
16
|
+
return this.getCssClasses();
|
14
17
|
}
|
15
|
-
|
16
|
-
|
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" },
|
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: "<
|
24
|
-
}], propDecorators: {
|
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
|
33
|
-
return this.
|
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.
|
57
|
+
this.isGroup = false;
|
44
58
|
this.euiTimelineComponent = uxTimelineItemsComponent;
|
45
59
|
}
|
46
60
|
ngAfterContentInit() {
|
47
61
|
this.isLeftAligned = this.euiTimelineComponent.isLeftAligned;
|
48
62
|
}
|
49
|
-
|
50
|
-
|
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,
|
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: {
|
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 {
|
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":";;;;;;;;;MAUa,oBAAoB,CAAA;AANjC,IAAA,WAAA,GAAA;QAaI,IAAO,CAAA,OAAA,GAAG,cAAc,CAAC;QAIzB,IAAa,CAAA,aAAA,GAAiB,KAAK,CAAC;AAUvC,KAAA;AApBG,IAAA,IACW,UAAU,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;KAC/B;IASO,aAAa,GAAA;QACjB,OAAO;YACH,cAAc;YACd,IAAI,CAAC,aAAa,GAAG,4BAA4B,GAAG,EAAE;AACzD,SAAA;aACI,IAAI,CAAC,GAAG,CAAC;AACT,aAAA,IAAI,EAAE,CAAC;KACf;sIApBQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAApB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,aAAA,EAAA,IAAA,EAAA,oBAAoB,2MCVjC,6BACA,EAAA,MAAA,EAAA,CAAA,ooKAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;ADoBI,UAAA,CAAA;IADC,aAAa;AACsB,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;gGAX3B,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;+BACI,cAAc,EAAA,aAAA,EAGT,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,ooKAAA,CAAA,EAAA,CAAA;8BAI1B,UAAU,EAAA,CAAA;sBADpB,WAAW;uBAAC,OAAO,CAAA;gBAMpB,OAAO,EAAA,CAAA;sBAFN,WAAW;uBAAC,eAAe,CAAA;;sBAC3B,KAAK;gBAKN,aAAa,EAAA,CAAA;sBAFZ,KAAK;;;MEAG,wBAAwB,CAAA;AACjC,IAAA,IACW,UAAU,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;KAC/B;IAsBD,WAC4D,CAAA,wBAA8C,EAC/F,mBAAwC,EAAA;QAAxC,IAAmB,CAAA,mBAAA,GAAnB,mBAAmB,CAAqB;QArBnD,IAAO,CAAA,OAAA,GAAG,mBAAmB,CAAC;QAKrB,IAAc,CAAA,cAAA,GAAG,EAAE,CAAC;QAEpB,IAAc,CAAA,cAAA,GAAG,EAAE,CAAC;QAI7B,IAAa,CAAA,aAAA,GAAiB,KAAK,CAAC;QAIpC,IAAO,CAAA,OAAA,GAAiB,KAAK,CAAC;AAQ1B,QAAA,IAAI,CAAC,oBAAoB,GAAG,wBAAwB,CAAC;KACxD;IAED,kBAAkB,GAAA;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;KAChE;IAEO,aAAa,GAAA;QACjB,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,OAAO,GAAG,yBAAyB,GAAG,EAAE,CAAC;aAC9G,IAAI,CAAC,GAAG,CAAC;AACT,aAAA,IAAI,EAAE,CAAC;KACf;AAzCQ,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,kBA2Bb,UAAU,CAAC,MAAM,oBAAoB,CAAC,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AA3BjD,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,aAAA,EAAA,IAAA,EAAA,wBAAwB,uoBCnBrC,w6BAgBA,EAAA,MAAA,EAAA,CAAA,ooKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;ADqBI,UAAA,CAAA;IADC,aAAa;AACsB,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIpC,UAAA,CAAA;IADC,aAAa;AACgB,CAAA,EAAA,wBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;gGAtBrB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAZpC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAGd,aAAA,EAAA,iBAAiB,CAAC,IAAI,EACrB,cAAA,EAAA;AACZ,wBAAA;AACI,4BAAA,SAAS,EAAE,mBAAmB;AAC9B,4BAAA,MAAM,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC;AACxH,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,w6BAAA,EAAA,MAAA,EAAA,CAAA,ooKAAA,CAAA,EAAA,CAAA;;0BA6BI,IAAI;;0BAAI,MAAM;AAAC,oBAAA,IAAA,EAAA,CAAA,UAAU,CAAC,MAAM,oBAAoB,CAAC,CAAA;2EAzB/C,UAAU,EAAA,CAAA;sBADpB,WAAW;uBAAC,OAAO,CAAA;gBAMpB,OAAO,EAAA,CAAA;sBAFN,WAAW;uBAAC,eAAe,CAAA;;sBAC3B,KAAK;gBAGG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBAIN,aAAa,EAAA,CAAA;sBAFZ,KAAK;gBAMN,OAAO,EAAA,CAAA;sBAFN,KAAK;;;ME7BG,iBAAiB,CAAA;sIAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;uIAAjB,iBAAiB,EAAA,YAAA,EAAA,CAFX,oBAAoB,EAAE,wBAAwB,aAFnD,YAAY,CAAA,EAAA,OAAA,EAAA,CACZ,oBAAoB,EAAE,wBAAwB,CAAA,EAAA,CAAA,CAAA,EAAA;AAG/C,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,YAJhB,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;gGAIb,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,OAAO,EAAE,CAAC,oBAAoB,EAAE,wBAAwB,CAAC;AACzD,oBAAA,YAAY,EAAE,CAAC,oBAAoB,EAAE,wBAAwB,CAAC;AACjE,iBAAA,CAAA;;;ACTD;;AAEG;;;;"}
|
@@ -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
|
}, {
|