@eui/components 17.3.0-snapshot-1710756594967 → 17.3.0-snapshot-1710860987215
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/dependencies.html +2 -2
- package/docs/js/menu-wc_es5.js +3 -4
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/eui-progress-bar/eui-progress-bar.component.mjs +9 -17
- package/esm2022/eui-tabs/eui-tab/eui-tab.component.mjs +2 -2
- package/esm2022/eui-tabs/eui-tabs.component.mjs +2 -2
- package/eui-progress-bar/eui-progress-bar.component.d.ts +3 -0
- package/eui-progress-bar/eui-progress-bar.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-progress-bar.mjs +8 -16
- package/fesm2022/eui-components-eui-progress-bar.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tabs.mjs +4 -4
- package/fesm2022/eui-components-eui-tabs.mjs.map +1 -1
- package/package.json +3 -3
@@ -1,7 +1,5 @@
|
|
1
|
-
import {
|
2
|
-
import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';
|
1
|
+
import { Component, Input, ChangeDetectionStrategy, HostBinding, booleanAttribute, numberAttribute, } from '@angular/core';
|
3
2
|
import { BaseStatesDirective } from '@eui/components/shared';
|
4
|
-
import { coerceBoolean, coerceNumber } from '@eui/base';
|
5
3
|
import * as i0 from "@angular/core";
|
6
4
|
import * as i1 from "@eui/components/shared";
|
7
5
|
import * as i2 from "@angular/common";
|
@@ -35,17 +33,8 @@ export class EuiProgressBarComponent {
|
|
35
33
|
.trim();
|
36
34
|
}
|
37
35
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiProgressBarComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
38
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
36
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: EuiProgressBarComponent, selector: "eui-progress-bar", inputs: { e2eAttr: "e2eAttr", label: "label", progress: ["progress", "progress", numberAttribute], isIndeterminate: ["isIndeterminate", "isIndeterminate", booleanAttribute], hasStatusIcon: ["hasStatusIcon", "hasStatusIcon", booleanAttribute] }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses" } }, usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiSize2XS", "euiSize2XS", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiVariant", "euiVariant", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div *ngIf=\"label || hasStatusIcon\" class=\"eui-progress-bar__header\">\n <div *ngIf=\"label\" class=\"eui-progress-bar__header-label\">{{ label }}</div>\n <div *ngIf=\"hasStatusIcon\" class=\"eui-progress-bar__header-status\">\n <eui-icon-svg *ngIf=\"baseStatesDirective?.euiSuccess\" icon=\"eui-ecl-success\" fillColor=\"success-100\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"baseStatesDirective?.euiWarning\" icon=\"eui-ecl-warning\" fillColor=\"warning-100\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"baseStatesDirective?.euiDanger\" icon=\"eui-ecl-error\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n</div>\n<div class=\"eui-progress-bar__indicator-container\">\n <div class=\"eui-progress-bar__indicator\" [style.width]=\"!isIndeterminate ? progress + '%' : null\"></div>\n</div>\n", styles: [":host.eui-progress-bar{align-items:center;display:flex;flex-direction:column;position:relative}.eui-progress-bar__header{align-items:center;display:flex;justify-content:space-between;height:var(--eui-base-spacing-l);margin-bottom:var(--eui-base-spacing-s);width:100%}.eui-progress-bar__header-label{display:flex;justify-content:flex-start;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-progress-bar__header-status{display:flex;justify-content:flex-end}.eui-progress-bar__indicator-container{margin-bottom:var(--eui-base-spacing-2xs);background-color:var(--eui-base-color-grey-15);height:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-primary-100);height:100%;transition:width .25s ease}:host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-2xs)}:host.eui-progress-bar--size-xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xs)}:host.eui-progress-bar--size-s .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-s)}:host.eui-progress-bar--size-m .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-m)}:host.eui-progress-bar--size-l .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-l)}:host.eui-progress-bar--size-xl .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xl)}@media screen and (max-width: 767px){:host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xs)}}:host.eui-progress-bar--secondary .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-grey-100)}:host.eui-progress-bar--success .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-success-100)}:host.eui-progress-bar--info .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-info-100)}:host.eui-progress-bar--warning .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-warning-100)}:host.eui-progress-bar--danger .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-danger-100)}:host.eui-progress-bar--accent .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-accent-100)}:host.eui-progress-bar--indeterminate .eui-progress-bar__indicator-container .eui-progress-bar__indicator{animation:progress-linear-indeterminate 2s infinite linear;background-color:var(--eui-base-color-grey-15);background-size:200% 100%;background-image:linear-gradient(to right,transparent 50%,var(--eui-base-color-primary-100) 50%,var(--eui-base-color-primary-100) 60%,transparent 60%,transparent 71.5%,var(--eui-base-color-primary-100) 71.5%,var(--eui-base-color-primary-100) 84%,transparent 84%);transition:all .2s}@keyframes progress-linear-indeterminate{0%{background-size:200% 100%;background-position:left -31.25% top 0%}50%{background-size:800% 100%;background-position:left -49% top 0%}to{background-size:400% 100%;background-position:left -102% top 0%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
39
37
|
}
|
40
|
-
__decorate([
|
41
|
-
coerceNumber
|
42
|
-
], EuiProgressBarComponent.prototype, "progress", void 0);
|
43
|
-
__decorate([
|
44
|
-
coerceBoolean
|
45
|
-
], EuiProgressBarComponent.prototype, "isIndeterminate", void 0);
|
46
|
-
__decorate([
|
47
|
-
coerceBoolean
|
48
|
-
], EuiProgressBarComponent.prototype, "hasStatusIcon", void 0);
|
49
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiProgressBarComponent, decorators: [{
|
50
39
|
type: Component,
|
51
40
|
args: [{ selector: 'eui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
|
@@ -80,10 +69,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
80
69
|
}], label: [{
|
81
70
|
type: Input
|
82
71
|
}], progress: [{
|
83
|
-
type: Input
|
72
|
+
type: Input,
|
73
|
+
args: [{ transform: numberAttribute }]
|
84
74
|
}], isIndeterminate: [{
|
85
|
-
type: Input
|
75
|
+
type: Input,
|
76
|
+
args: [{ transform: booleanAttribute }]
|
86
77
|
}], hasStatusIcon: [{
|
87
|
-
type: Input
|
78
|
+
type: Input,
|
79
|
+
args: [{ transform: booleanAttribute }]
|
88
80
|
}] } });
|
89
|
-
//# sourceMappingURL=data:application/json;base64,
|
81
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpLXByb2dyZXNzLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9ldWktcHJvZ3Jlc3MtYmFyL2V1aS1wcm9ncmVzcy1iYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vZXVpLXByb2dyZXNzLWJhci9ldWktcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQ1QsS0FBSyxFQUNMLHVCQUF1QixFQUd2QixXQUFXLEVBQ1gsZ0JBQWdCLEVBQ2hCLGVBQWUsR0FDbEIsTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7Ozs7O0FBNkI3RCxNQUFNLE9BQU8sdUJBQXVCO0lBRWhDLElBQ1csVUFBVTtRQUNqQixPQUFPLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBYUQsWUFBbUIsbUJBQXdDO1FBQXhDLHdCQUFtQixHQUFuQixtQkFBbUIsQ0FBcUI7UUFqQnBCLFlBQU8sR0FBRyxrQkFBa0IsQ0FBQztRQU0zRCxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBTXBCLG9CQUFlLEdBQWlCLEtBQUssQ0FBQztRQUd0QyxrQkFBYSxHQUFpQixLQUFLLENBQUM7SUFFMEIsQ0FBQztJQUUvRCxXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBSSxPQUFPLENBQUMsVUFBVSxDQUFDLEVBQUU7WUFDckIsSUFBSSxDQUFDLFFBQVEsR0FBRyxPQUFPLENBQUMsVUFBVSxDQUFDLENBQUMsWUFBWSxDQUFDO1lBQ2pELElBQUssSUFBSSxFQUFFLFFBQW1CLEdBQUcsR0FBRyxFQUFFO2dCQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLEdBQUcsQ0FBQzthQUN2QjtTQUNKO0lBQ0wsQ0FBQztJQUVPLGFBQWE7UUFDakIsT0FBTztZQUNILElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxhQUFhLENBQUMsa0JBQWtCLENBQUM7WUFDMUQsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsaUNBQWlDLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDN0QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsaUNBQWlDLENBQUMsQ0FBQyxDQUFDLEVBQUU7U0FDOUQ7YUFDSSxJQUFJLENBQUMsR0FBRyxDQUFDO2FBQ1QsSUFBSSxFQUFFLENBQUM7SUFDaEIsQ0FBQztpSUFyQ1EsdUJBQXVCO3FIQUF2Qix1QkFBdUIsaUhBU1osZUFBZSwyREFHZixnQkFBZ0IscURBR2hCLGdCQUFnQixza0JDeER4Qyw0ekJBV0E7OzJGRDhCYSx1QkFBdUI7a0JBM0JuQyxTQUFTOytCQUVJLGtCQUFrQixtQkFFWCx1QkFBdUIsQ0FBQyxNQUFNLGtCQUMvQjt3QkFDWjs0QkFDSSxTQUFTLEVBQUUsbUJBQW1COzRCQUM5QixNQUFNLEVBQUU7Z0NBQ0osY0FBYztnQ0FDZCxZQUFZO2dDQUNaLFNBQVM7Z0NBQ1QsWUFBWTtnQ0FDWixXQUFXO2dDQUNYLFdBQVc7Z0NBQ1gsWUFBWTtnQ0FDWixXQUFXO2dDQUNYLFVBQVU7Z0NBQ1YsVUFBVTtnQ0FDVixVQUFVO2dDQUNWLFdBQVc7Z0NBQ1gsWUFBWTtnQ0FDWixnQkFBZ0I7NkJBQ25CO3lCQUNKO3FCQUNKO3dGQUdzQyxPQUFPO3NCQUE3QyxXQUFXO3VCQUFDLGVBQWU7O3NCQUFHLEtBQUs7Z0JBRXpCLFVBQVU7c0JBRHBCLFdBQVc7dUJBQUMsT0FBTztnQkFLWCxLQUFLO3NCQUFiLEtBQUs7Z0JBR04sUUFBUTtzQkFEUCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRTtnQkFJckMsZUFBZTtzQkFEZCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUl0QyxhQUFhO3NCQURaLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENvbXBvbmVudCxcbiAgICBJbnB1dCxcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBTaW1wbGVDaGFuZ2VzLFxuICAgIE9uQ2hhbmdlcyxcbiAgICBIb3N0QmluZGluZyxcbiAgICBib29sZWFuQXR0cmlidXRlLFxuICAgIG51bWJlckF0dHJpYnV0ZSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCb29sZWFuSW5wdXQsIE51bWJlcklucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcblxuaW1wb3J0IHsgQmFzZVN0YXRlc0RpcmVjdGl2ZSB9IGZyb20gJ0BldWkvY29tcG9uZW50cy9zaGFyZWQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICB0ZW1wbGF0ZVVybDogJy4vZXVpLXByb2dyZXNzLWJhci5jb21wb25lbnQuaHRtbCcsXG4gICAgc2VsZWN0b3I6ICdldWktcHJvZ3Jlc3MtYmFyJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zdHlsZXMvX2luZGV4LnNjc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0RGlyZWN0aXZlczogW1xuICAgICAgICB7XG4gICAgICAgICAgICBkaXJlY3RpdmU6IEJhc2VTdGF0ZXNEaXJlY3RpdmUsXG4gICAgICAgICAgICBpbnB1dHM6IFtcbiAgICAgICAgICAgICAgICAnZXVpU2Vjb25kYXJ5JyxcbiAgICAgICAgICAgICAgICAnZXVpU3VjY2VzcycsXG4gICAgICAgICAgICAgICAgJ2V1aUluZm8nLFxuICAgICAgICAgICAgICAgICdldWlXYXJuaW5nJyxcbiAgICAgICAgICAgICAgICAnZXVpRGFuZ2VyJyxcbiAgICAgICAgICAgICAgICAnZXVpQWNjZW50JyxcbiAgICAgICAgICAgICAgICAnZXVpU2l6ZTJYUycsXG4gICAgICAgICAgICAgICAgJ2V1aVNpemVYUycsXG4gICAgICAgICAgICAgICAgJ2V1aVNpemVTJyxcbiAgICAgICAgICAgICAgICAnZXVpU2l6ZU0nLFxuICAgICAgICAgICAgICAgICdldWlTaXplTCcsXG4gICAgICAgICAgICAgICAgJ2V1aVNpemVYTCcsXG4gICAgICAgICAgICAgICAgJ2V1aVZhcmlhbnQnLFxuICAgICAgICAgICAgICAgICdldWlTaXplVmFyaWFudCcsXG4gICAgICAgICAgICBdLFxuICAgICAgICB9LFxuICAgIF0sXG59KVxuZXhwb3J0IGNsYXNzIEV1aVByb2dyZXNzQmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1lMmUnKSBASW5wdXQoKSBlMmVBdHRyID0gJ2V1aS1wcm9ncmVzcy1iYXInO1xuICAgIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICAgIHB1YmxpYyBnZXQgY3NzQ2xhc3NlcygpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5nZXRDc3NDbGFzc2VzKCk7XG4gICAgfVxuXG4gICAgQElucHV0KCkgbGFiZWwgPSAnJztcblxuICAgIEBJbnB1dCh7IHRyYW5zZm9ybTogbnVtYmVyQXR0cmlidXRlIH0pXG4gICAgcHJvZ3Jlc3M6IE51bWJlcklucHV0O1xuXG4gICAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pXG4gICAgaXNJbmRldGVybWluYXRlOiBCb29sZWFuSW5wdXQgPSBmYWxzZTtcblxuICAgIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KVxuICAgIGhhc1N0YXR1c0ljb246IEJvb2xlYW5JbnB1dCA9IGZhbHNlO1xuXG4gICAgY29uc3RydWN0b3IocHVibGljIGJhc2VTdGF0ZXNEaXJlY3RpdmU6IEJhc2VTdGF0ZXNEaXJlY3RpdmUpIHt9XG5cbiAgICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgICAgIGlmIChjaGFuZ2VzWydwcm9ncmVzcyddKSB7XG4gICAgICAgICAgICB0aGlzLnByb2dyZXNzID0gY2hhbmdlc1sncHJvZ3Jlc3MnXS5jdXJyZW50VmFsdWU7XG4gICAgICAgICAgICBpZiAoKHRoaXM/LnByb2dyZXNzIGFzIG51bWJlcikgPiAxMDApIHtcbiAgICAgICAgICAgICAgICB0aGlzLnByb2dyZXNzID0gMTAwO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBnZXRDc3NDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiBbXG4gICAgICAgICAgICB0aGlzLmJhc2VTdGF0ZXNEaXJlY3RpdmUuZ2V0Q3NzQ2xhc3NlcygnZXVpLXByb2dyZXNzLWJhcicpLFxuICAgICAgICAgICAgdGhpcy5pc0luZGV0ZXJtaW5hdGUgPyAnZXVpLXByb2dyZXNzLWJhci0taW5kZXRlcm1pbmF0ZScgOiAnJyxcbiAgICAgICAgICAgIHRoaXMuaGFzU3RhdHVzSWNvbiA/ICdldWktcHJvZ3Jlc3MtYmFyLS1oYXNTdGF0dXNJY29uJyA6ICcnLFxuICAgICAgICBdXG4gICAgICAgICAgICAuam9pbignICcpXG4gICAgICAgICAgICAudHJpbSgpO1xuICAgIH1cbn1cbiIsIjxkaXYgKm5nSWY9XCJsYWJlbCB8fCBoYXNTdGF0dXNJY29uXCIgY2xhc3M9XCJldWktcHJvZ3Jlc3MtYmFyX19oZWFkZXJcIj5cbiAgICA8ZGl2ICpuZ0lmPVwibGFiZWxcIiBjbGFzcz1cImV1aS1wcm9ncmVzcy1iYXJfX2hlYWRlci1sYWJlbFwiPnt7IGxhYmVsIH19PC9kaXY+XG4gICAgPGRpdiAqbmdJZj1cImhhc1N0YXR1c0ljb25cIiBjbGFzcz1cImV1aS1wcm9ncmVzcy1iYXJfX2hlYWRlci1zdGF0dXNcIj5cbiAgICAgICAgPGV1aS1pY29uLXN2ZyAqbmdJZj1cImJhc2VTdGF0ZXNEaXJlY3RpdmU/LmV1aVN1Y2Nlc3NcIiBpY29uPVwiZXVpLWVjbC1zdWNjZXNzXCIgZmlsbENvbG9yPVwic3VjY2Vzcy0xMDBcIj48L2V1aS1pY29uLXN2Zz5cbiAgICAgICAgPGV1aS1pY29uLXN2ZyAqbmdJZj1cImJhc2VTdGF0ZXNEaXJlY3RpdmU/LmV1aVdhcm5pbmdcIiBpY29uPVwiZXVpLWVjbC13YXJuaW5nXCIgZmlsbENvbG9yPVwid2FybmluZy0xMDBcIj48L2V1aS1pY29uLXN2Zz5cbiAgICAgICAgPGV1aS1pY29uLXN2ZyAqbmdJZj1cImJhc2VTdGF0ZXNEaXJlY3RpdmU/LmV1aURhbmdlclwiIGljb249XCJldWktZWNsLWVycm9yXCIgZmlsbENvbG9yPVwiZGFuZ2VyLTEwMFwiPjwvZXVpLWljb24tc3ZnPlxuICAgIDwvZGl2PlxuPC9kaXY+XG48ZGl2IGNsYXNzPVwiZXVpLXByb2dyZXNzLWJhcl9faW5kaWNhdG9yLWNvbnRhaW5lclwiPlxuICAgIDxkaXYgY2xhc3M9XCJldWktcHJvZ3Jlc3MtYmFyX19pbmRpY2F0b3JcIiBbc3R5bGUud2lkdGhdPVwiIWlzSW5kZXRlcm1pbmF0ZSA/IHByb2dyZXNzICsgJyUnIDogbnVsbFwiPjwvZGl2PlxuPC9kaXY+XG4iXX0=
|
@@ -74,11 +74,11 @@ export class EuiTabComponent extends BaseDirective {
|
|
74
74
|
}
|
75
75
|
}
|
76
76
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
77
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiTabComponent, selector: "eui-tab", inputs: { url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: "isClosable", isVisible: "isVisible", isActive: "isActive", isDisabled: "isDisabled", hasBackgroundFilled: "hasBackgroundFilled", isHandleCloseOnClose: "isHandleCloseOnClose" }, queries: [{ propertyName: "templateLabel", first: true, predicate: EuiTabLabelComponent, descendants: true }, { propertyName: "templateContent", first: true, predicate: EuiTabContentComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }); }
|
77
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiTabComponent, selector: "eui-tab", inputs: { url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: "isClosable", isVisible: "isVisible", isActive: "isActive", isDisabled: "isDisabled", hasBackgroundFilled: "hasBackgroundFilled", isHandleCloseOnClose: "isHandleCloseOnClose" }, queries: [{ propertyName: "templateLabel", first: true, predicate: EuiTabLabelComponent, descendants: true }, { propertyName: "templateContent", first: true, predicate: EuiTabContentComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }); }
|
78
78
|
}
|
79
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiTabComponent, decorators: [{
|
80
80
|
type: Component,
|
81
|
-
args: [{ selector: 'eui-tab', template: "<ng-content></ng-content>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }]
|
81
|
+
args: [{ selector: 'eui-tab', template: "<ng-content></ng-content>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }]
|
82
82
|
}], ctorParameters: () => [], propDecorators: { url: [{
|
83
83
|
type: Input
|
84
84
|
}], e2eAttr: [{
|
@@ -323,11 +323,11 @@ export class EuiTabsComponent {
|
|
323
323
|
this.cd.detectChanges();
|
324
324
|
}
|
325
325
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
326
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiTabsComponent, selector: "eui-tabs", inputs: { styleClass: "styleClass", tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: "isMainNavigation", isHandleChangeTab: "isHandleChangeTab", isSubTabs: "isSubTabs", isVerticalTabs: "isVerticalTabs" }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsItems", first: true, predicate: ["euiTabsItems"], descendants: true }, { propertyName: "euiTabsItemsWrapper", first: true, predicate: ["euiTabsItemsWrapper"], descendants: true }, { propertyName: "host", first: true, predicate: ["host"], descendants: true }, { propertyName: "euiTabLabelItems", predicate: ["euiTabLabelItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div\n #host\n class=\"eui-tabs {{ styleClass }}\"\n [class.eui-tabs--main-navigation]=\"isMainNavigation\"\n [class.eui-tabs--vertical]=\"isVerticalTabs\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n <div\n #euiTabsItems\n class=\"eui-tabs__items\"\n [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n [class.eui-tabs__items--scrolling]=\"scrolling\"\n (cdkObserveContent)=\"onContentChanges()\">\n <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n <ng-container *ngFor=\"let tab of tabs; let i = index\">\n <ng-container *ngIf=\"tab.isVisible\">\n <div\n tabindex=\"0\"\n role=\"tab\"\n class=\"eui-tab-item\"\n [class.eui-tab-item--closable]=\"tab.isClosable\"\n [class.eui-tab-item--active]=\"activeTabIndex === i\"\n [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n [class.eui-tab-item--secondary]=\"tab.euiSecondary\"\n [class.eui-tab-item--primary]=\"tab.euiPrimary\"\n [class.eui-tab-item--info]=\"tab.euiInfo\"\n [class.eui-tab-item--success]=\"tab.euiSuccess\"\n [class.eui-tab-item--warning]=\"tab.euiWarning\"\n [class.eui-tab-item--danger]=\"tab.euiDanger\"\n [class.eui-tab-item--accent]=\"tab.euiAccent\"\n [class.eui-tab-item--background-filled]=\"tab.hasBackgroundFilled\"\n [attr.aria-disabled]=\"tab.isDisabled\"\n (click)=\"changeTab(i)\"\n [euiTooltip]=\"tab.tooltip\"\n (keyup)=\"onKeyUp($event, i)\">\n <div class=\"eui-tab-item__label\">\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n </div>\n <button\n *ngIf=\"tab.isClosable\"\n (click)=\"closeTab(i, $event)\"\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeXS\n type=\"button\"\n aria-label=\"Close tab button\"\n class=\"eui-u-ml-s\">\n <eui-icon-svg\n icon=\"eui-ecl-close\"\n size=\"l\"\n fillColor=\"grey-75\"\n class=\"eui-tab__close-icon\"\n aria-label=\"Close icon\">\n </eui-icon-svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"eui-tabs__navigation\">\n <div class=\"eui-tabs__navigation__left-item\">\n <button\n (click)=\"goToLeft()\"\n euiButton\n euiIconButton\n euiBasicButton\n type=\"button\"\n [euiDisabled]=\"navigationLeftButtonDisabled\"\n aria-label=\"Scroll left\">\n <eui-icon-svg icon=\"eui-chevron-back\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-tabs__navigation__right-item\">\n <button\n (click)=\"goToRight()\"\n euiButton\n euiIconButton\n euiBasicButton\n type=\"button\"\n [euiDisabled]=\"navigationRightButtonDisabled\"\n aria-label=\"Scroll right\">\n <eui-icon-svg icon=\"eui-chevron-forward\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n </div>\n\n <ng-container *ngFor=\"let tab of tabs; let i = index\">\n <div class=\"eui-tab-content-wrapper\" tabindex=\"0\" *ngIf=\"i === activeTabIndex && tab.templateContent\">\n <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n </div>\n </ng-container>\n</div>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i5.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: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "directive", type: i7.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "directive", type: i8.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
326
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: EuiTabsComponent, selector: "eui-tabs", inputs: { styleClass: "styleClass", tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: "isMainNavigation", isHandleChangeTab: "isHandleChangeTab", isSubTabs: "isSubTabs", isVerticalTabs: "isVerticalTabs" }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsItems", first: true, predicate: ["euiTabsItems"], descendants: true }, { propertyName: "euiTabsItemsWrapper", first: true, predicate: ["euiTabsItemsWrapper"], descendants: true }, { propertyName: "host", first: true, predicate: ["host"], descendants: true }, { propertyName: "euiTabLabelItems", predicate: ["euiTabLabelItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div\n #host\n class=\"eui-tabs {{ styleClass }}\"\n [class.eui-tabs--main-navigation]=\"isMainNavigation\"\n [class.eui-tabs--vertical]=\"isVerticalTabs\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n <div\n #euiTabsItems\n class=\"eui-tabs__items\"\n [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n [class.eui-tabs__items--scrolling]=\"scrolling\"\n (cdkObserveContent)=\"onContentChanges()\">\n <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n <ng-container *ngFor=\"let tab of tabs; let i = index\">\n <ng-container *ngIf=\"tab.isVisible\">\n <div\n tabindex=\"0\"\n role=\"tab\"\n class=\"eui-tab-item\"\n [class.eui-tab-item--closable]=\"tab.isClosable\"\n [class.eui-tab-item--active]=\"activeTabIndex === i\"\n [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n [class.eui-tab-item--secondary]=\"tab.euiSecondary\"\n [class.eui-tab-item--primary]=\"tab.euiPrimary\"\n [class.eui-tab-item--info]=\"tab.euiInfo\"\n [class.eui-tab-item--success]=\"tab.euiSuccess\"\n [class.eui-tab-item--warning]=\"tab.euiWarning\"\n [class.eui-tab-item--danger]=\"tab.euiDanger\"\n [class.eui-tab-item--accent]=\"tab.euiAccent\"\n [class.eui-tab-item--background-filled]=\"tab.hasBackgroundFilled\"\n [attr.aria-disabled]=\"tab.isDisabled\"\n (click)=\"changeTab(i)\"\n [euiTooltip]=\"tab.tooltip\"\n (keyup)=\"onKeyUp($event, i)\">\n <div class=\"eui-tab-item__label\">\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n </div>\n <button\n *ngIf=\"tab.isClosable\"\n (click)=\"closeTab(i, $event)\"\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeXS\n type=\"button\"\n aria-label=\"Close tab button\"\n class=\"eui-u-ml-s\">\n <eui-icon-svg\n icon=\"eui-ecl-close\"\n size=\"l\"\n fillColor=\"grey-75\"\n class=\"eui-tab__close-icon\"\n aria-label=\"Close icon\">\n </eui-icon-svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"eui-tabs__navigation\">\n <div class=\"eui-tabs__navigation__left-item\">\n <button\n (click)=\"goToLeft()\"\n euiButton\n euiIconButton\n euiBasicButton\n type=\"button\"\n [euiDisabled]=\"navigationLeftButtonDisabled\"\n aria-label=\"Scroll left\">\n <eui-icon-svg icon=\"eui-chevron-back\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-tabs__navigation__right-item\">\n <button\n (click)=\"goToRight()\"\n euiButton\n euiIconButton\n euiBasicButton\n type=\"button\"\n [euiDisabled]=\"navigationRightButtonDisabled\"\n aria-label=\"Scroll right\">\n <eui-icon-svg icon=\"eui-chevron-forward\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n </div>\n\n <ng-container *ngFor=\"let tab of tabs; let i = index\">\n <div class=\"eui-tab-content-wrapper\" tabindex=\"0\" *ngIf=\"i === activeTabIndex && tab.templateContent\">\n <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n </div>\n </ng-container>\n</div>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i5.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: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "directive", type: i7.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "directive", type: i8.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
327
327
|
}
|
328
328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiTabsComponent, decorators: [{
|
329
329
|
type: Component,
|
330
|
-
args: [{ selector: 'eui-tabs', encapsulation: ViewEncapsulation.None, template: "<div\n #host\n class=\"eui-tabs {{ styleClass }}\"\n [class.eui-tabs--main-navigation]=\"isMainNavigation\"\n [class.eui-tabs--vertical]=\"isVerticalTabs\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n <div\n #euiTabsItems\n class=\"eui-tabs__items\"\n [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n [class.eui-tabs__items--scrolling]=\"scrolling\"\n (cdkObserveContent)=\"onContentChanges()\">\n <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n <ng-container *ngFor=\"let tab of tabs; let i = index\">\n <ng-container *ngIf=\"tab.isVisible\">\n <div\n tabindex=\"0\"\n role=\"tab\"\n class=\"eui-tab-item\"\n [class.eui-tab-item--closable]=\"tab.isClosable\"\n [class.eui-tab-item--active]=\"activeTabIndex === i\"\n [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n [class.eui-tab-item--secondary]=\"tab.euiSecondary\"\n [class.eui-tab-item--primary]=\"tab.euiPrimary\"\n [class.eui-tab-item--info]=\"tab.euiInfo\"\n [class.eui-tab-item--success]=\"tab.euiSuccess\"\n [class.eui-tab-item--warning]=\"tab.euiWarning\"\n [class.eui-tab-item--danger]=\"tab.euiDanger\"\n [class.eui-tab-item--accent]=\"tab.euiAccent\"\n [class.eui-tab-item--background-filled]=\"tab.hasBackgroundFilled\"\n [attr.aria-disabled]=\"tab.isDisabled\"\n (click)=\"changeTab(i)\"\n [euiTooltip]=\"tab.tooltip\"\n (keyup)=\"onKeyUp($event, i)\">\n <div class=\"eui-tab-item__label\">\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n </div>\n <button\n *ngIf=\"tab.isClosable\"\n (click)=\"closeTab(i, $event)\"\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeXS\n type=\"button\"\n aria-label=\"Close tab button\"\n class=\"eui-u-ml-s\">\n <eui-icon-svg\n icon=\"eui-ecl-close\"\n size=\"l\"\n fillColor=\"grey-75\"\n class=\"eui-tab__close-icon\"\n aria-label=\"Close icon\">\n </eui-icon-svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"eui-tabs__navigation\">\n <div class=\"eui-tabs__navigation__left-item\">\n <button\n (click)=\"goToLeft()\"\n euiButton\n euiIconButton\n euiBasicButton\n type=\"button\"\n [euiDisabled]=\"navigationLeftButtonDisabled\"\n aria-label=\"Scroll left\">\n <eui-icon-svg icon=\"eui-chevron-back\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-tabs__navigation__right-item\">\n <button\n (click)=\"goToRight()\"\n euiButton\n euiIconButton\n euiBasicButton\n type=\"button\"\n [euiDisabled]=\"navigationRightButtonDisabled\"\n aria-label=\"Scroll right\">\n <eui-icon-svg icon=\"eui-chevron-forward\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n </div>\n\n <ng-container *ngFor=\"let tab of tabs; let i = index\">\n <div class=\"eui-tab-content-wrapper\" tabindex=\"0\" *ngIf=\"i === activeTabIndex && tab.templateContent\">\n <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n </div>\n </ng-container>\n</div>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }]
|
330
|
+
args: [{ selector: 'eui-tabs', encapsulation: ViewEncapsulation.None, template: "<div\n #host\n class=\"eui-tabs {{ styleClass }}\"\n [class.eui-tabs--main-navigation]=\"isMainNavigation\"\n [class.eui-tabs--vertical]=\"isVerticalTabs\"\n attr.data-e2e=\"{{ e2eAttr }}\">\n <div class=\"eui-u-flex\" [class.eui-tabs__wrapper--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__wrapper--vertical]=\"isVerticalTabs\">\n <div\n #euiTabsItems\n class=\"eui-tabs__items\"\n [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\"\n [class.eui-tabs__items--scrolling]=\"scrolling\"\n (cdkObserveContent)=\"onContentChanges()\">\n <div #euiTabsItemsWrapper class=\"eui-tabs__items-wrapper\" [attr.data-offset]=\"currentOffset\" role=\"tablist\">\n <ng-container *ngFor=\"let tab of tabs; let i = index\">\n <ng-container *ngIf=\"tab.isVisible\">\n <div\n tabindex=\"0\"\n role=\"tab\"\n class=\"eui-tab-item\"\n [class.eui-tab-item--closable]=\"tab.isClosable\"\n [class.eui-tab-item--active]=\"activeTabIndex === i\"\n [class.eui-tab-item--disabled]=\"tab.isDisabled\"\n [class.eui-tab-item--secondary]=\"tab.euiSecondary\"\n [class.eui-tab-item--primary]=\"tab.euiPrimary\"\n [class.eui-tab-item--info]=\"tab.euiInfo\"\n [class.eui-tab-item--success]=\"tab.euiSuccess\"\n [class.eui-tab-item--warning]=\"tab.euiWarning\"\n [class.eui-tab-item--danger]=\"tab.euiDanger\"\n [class.eui-tab-item--accent]=\"tab.euiAccent\"\n [class.eui-tab-item--background-filled]=\"tab.hasBackgroundFilled\"\n [attr.aria-disabled]=\"tab.isDisabled\"\n (click)=\"changeTab(i)\"\n [euiTooltip]=\"tab.tooltip\"\n (keyup)=\"onKeyUp($event, i)\">\n <div class=\"eui-tab-item__label\">\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel.templatePortal\"></ng-template>\n </div>\n <button\n *ngIf=\"tab.isClosable\"\n (click)=\"closeTab(i, $event)\"\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeXS\n type=\"button\"\n aria-label=\"Close tab button\"\n class=\"eui-u-ml-s\">\n <eui-icon-svg\n icon=\"eui-ecl-close\"\n size=\"l\"\n fillColor=\"grey-75\"\n class=\"eui-tab__close-icon\"\n aria-label=\"Close icon\">\n </eui-icon-svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"eui-tabs__navigation\">\n <div class=\"eui-tabs__navigation__left-item\">\n <button\n (click)=\"goToLeft()\"\n euiButton\n euiIconButton\n euiBasicButton\n type=\"button\"\n [euiDisabled]=\"navigationLeftButtonDisabled\"\n aria-label=\"Scroll left\">\n <eui-icon-svg icon=\"eui-chevron-back\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-tabs__navigation__right-item\">\n <button\n (click)=\"goToRight()\"\n euiButton\n euiIconButton\n euiBasicButton\n type=\"button\"\n [euiDisabled]=\"navigationRightButtonDisabled\"\n aria-label=\"Scroll right\">\n <eui-icon-svg icon=\"eui-chevron-forward\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n </div>\n\n <ng-container *ngFor=\"let tab of tabs; let i = index\">\n <div class=\"eui-tab-content-wrapper\" tabindex=\"0\" *ngIf=\"i === activeTabIndex && tab.templateContent\">\n <ng-template [cdkPortalOutlet]=\"tab.templateContent.templatePortal\"></ng-template>\n </div>\n </ng-container>\n</div>\n", styles: [".eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-m) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:active:not([readonly]),.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:active:not([readonly]),.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;transition:none}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n"] }]
|
331
331
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: i2.AnimationBuilder }], propDecorators: { styleClass: [{
|
332
332
|
type: Input
|
333
333
|
}], tabs: [{
|
@@ -16,5 +16,8 @@ export declare class EuiProgressBarComponent implements OnChanges {
|
|
16
16
|
private getCssClasses;
|
17
17
|
static ɵfac: i0.ɵɵFactoryDeclaration<EuiProgressBarComponent, never>;
|
18
18
|
static ɵcmp: i0.ɵɵComponentDeclaration<EuiProgressBarComponent, "eui-progress-bar", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "label": { "alias": "label"; "required": false; }; "progress": { "alias": "progress"; "required": false; }; "isIndeterminate": { "alias": "isIndeterminate"; "required": false; }; "hasStatusIcon": { "alias": "hasStatusIcon"; "required": false; }; }, {}, never, never, false, [{ directive: typeof i1.BaseStatesDirective; inputs: { "euiSecondary": "euiSecondary"; "euiSuccess": "euiSuccess"; "euiInfo": "euiInfo"; "euiWarning": "euiWarning"; "euiDanger": "euiDanger"; "euiAccent": "euiAccent"; "euiSize2XS": "euiSize2XS"; "euiSizeXS": "euiSizeXS"; "euiSizeS": "euiSizeS"; "euiSizeM": "euiSizeM"; "euiSizeL": "euiSizeL"; "euiSizeXL": "euiSizeXL"; "euiVariant": "euiVariant"; "euiSizeVariant": "euiSizeVariant"; }; outputs: {}; }]>;
|
19
|
+
static ngAcceptInputType_progress: unknown;
|
20
|
+
static ngAcceptInputType_isIndeterminate: unknown;
|
21
|
+
static ngAcceptInputType_hasStatusIcon: unknown;
|
19
22
|
}
|
20
23
|
//# sourceMappingURL=eui-progress-bar.component.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"eui-progress-bar.component.d.ts","sourceRoot":"","sources":["../../eui-progress-bar/eui-progress-bar.component.ts"],"names":[],"mappings":"AAAA,OAAO,
|
1
|
+
{"version":3,"file":"eui-progress-bar.component.d.ts","sourceRoot":"","sources":["../../eui-progress-bar/eui-progress-bar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,aAAa,EACb,SAAS,EAIZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;;;AAE7D,qBA2Ba,uBAAwB,YAAW,SAAS;IAkBlC,mBAAmB,EAAE,mBAAmB;IAjBpB,OAAO,SAAsB;IACpE,IACW,UAAU,IAAI,MAAM,CAE9B;IAEQ,KAAK,SAAM;IAGpB,QAAQ,EAAE,WAAW,CAAC;IAGtB,eAAe,EAAE,YAAY,CAAS;IAGtC,aAAa,EAAE,YAAY,CAAS;gBAEjB,mBAAmB,EAAE,mBAAmB;IAE3D,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IASzC,OAAO,CAAC,aAAa;yCA7BZ,uBAAuB;2CAAvB,uBAAuB;uCAuC6mzP,OAAQ;8CAA1t/N,OAAQ;4CAAR,OAAQ;CADt8zB"}
|
@@ -1,9 +1,7 @@
|
|
1
|
-
import { __decorate } from 'tslib';
|
2
1
|
import * as i0 from '@angular/core';
|
3
|
-
import { Component, ChangeDetectionStrategy, HostBinding, Input, NgModule } from '@angular/core';
|
2
|
+
import { numberAttribute, booleanAttribute, Component, ChangeDetectionStrategy, HostBinding, Input, NgModule } from '@angular/core';
|
4
3
|
import * as i1 from '@eui/components/shared';
|
5
4
|
import { BaseStatesDirective } from '@eui/components/shared';
|
6
|
-
import { coerceNumber, coerceBoolean } from '@eui/base';
|
7
5
|
import * as i2 from '@angular/common';
|
8
6
|
import { CommonModule } from '@angular/common';
|
9
7
|
import * as i3 from '@eui/components/eui-icon';
|
@@ -38,17 +36,8 @@ class EuiProgressBarComponent {
|
|
38
36
|
.trim();
|
39
37
|
}
|
40
38
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiProgressBarComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
41
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
39
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.0", type: EuiProgressBarComponent, selector: "eui-progress-bar", inputs: { e2eAttr: "e2eAttr", label: "label", progress: ["progress", "progress", numberAttribute], isIndeterminate: ["isIndeterminate", "isIndeterminate", booleanAttribute], hasStatusIcon: ["hasStatusIcon", "hasStatusIcon", booleanAttribute] }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses" } }, usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiSize2XS", "euiSize2XS", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiVariant", "euiVariant", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div *ngIf=\"label || hasStatusIcon\" class=\"eui-progress-bar__header\">\n <div *ngIf=\"label\" class=\"eui-progress-bar__header-label\">{{ label }}</div>\n <div *ngIf=\"hasStatusIcon\" class=\"eui-progress-bar__header-status\">\n <eui-icon-svg *ngIf=\"baseStatesDirective?.euiSuccess\" icon=\"eui-ecl-success\" fillColor=\"success-100\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"baseStatesDirective?.euiWarning\" icon=\"eui-ecl-warning\" fillColor=\"warning-100\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"baseStatesDirective?.euiDanger\" icon=\"eui-ecl-error\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n</div>\n<div class=\"eui-progress-bar__indicator-container\">\n <div class=\"eui-progress-bar__indicator\" [style.width]=\"!isIndeterminate ? progress + '%' : null\"></div>\n</div>\n", styles: [":host.eui-progress-bar{align-items:center;display:flex;flex-direction:column;position:relative}.eui-progress-bar__header{align-items:center;display:flex;justify-content:space-between;height:var(--eui-base-spacing-l);margin-bottom:var(--eui-base-spacing-s);width:100%}.eui-progress-bar__header-label{display:flex;justify-content:flex-start;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-progress-bar__header-status{display:flex;justify-content:flex-end}.eui-progress-bar__indicator-container{margin-bottom:var(--eui-base-spacing-2xs);background-color:var(--eui-base-color-grey-15);height:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-primary-100);height:100%;transition:width .25s ease}:host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-2xs)}:host.eui-progress-bar--size-xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xs)}:host.eui-progress-bar--size-s .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-s)}:host.eui-progress-bar--size-m .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-m)}:host.eui-progress-bar--size-l .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-l)}:host.eui-progress-bar--size-xl .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xl)}@media screen and (max-width: 767px){:host.eui-progress-bar--size-2xs .eui-progress-bar__indicator-container{height:var(--eui-base-spacing-xs)}}:host.eui-progress-bar--secondary .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-grey-100)}:host.eui-progress-bar--success .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-success-100)}:host.eui-progress-bar--info .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-info-100)}:host.eui-progress-bar--warning .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-warning-100)}:host.eui-progress-bar--danger .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-danger-100)}:host.eui-progress-bar--accent .eui-progress-bar__indicator-container .eui-progress-bar__indicator{background-color:var(--eui-base-color-accent-100)}:host.eui-progress-bar--indeterminate .eui-progress-bar__indicator-container .eui-progress-bar__indicator{animation:progress-linear-indeterminate 2s infinite linear;background-color:var(--eui-base-color-grey-15);background-size:200% 100%;background-image:linear-gradient(to right,transparent 50%,var(--eui-base-color-primary-100) 50%,var(--eui-base-color-primary-100) 60%,transparent 60%,transparent 71.5%,var(--eui-base-color-primary-100) 71.5%,var(--eui-base-color-primary-100) 84%,transparent 84%);transition:all .2s}@keyframes progress-linear-indeterminate{0%{background-size:200% 100%;background-position:left -31.25% top 0%}50%{background-size:800% 100%;background-position:left -49% top 0%}to{background-size:400% 100%;background-position:left -102% top 0%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
42
40
|
}
|
43
|
-
__decorate([
|
44
|
-
coerceNumber
|
45
|
-
], EuiProgressBarComponent.prototype, "progress", void 0);
|
46
|
-
__decorate([
|
47
|
-
coerceBoolean
|
48
|
-
], EuiProgressBarComponent.prototype, "isIndeterminate", void 0);
|
49
|
-
__decorate([
|
50
|
-
coerceBoolean
|
51
|
-
], EuiProgressBarComponent.prototype, "hasStatusIcon", void 0);
|
52
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: EuiProgressBarComponent, decorators: [{
|
53
42
|
type: Component,
|
54
43
|
args: [{ selector: 'eui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
|
@@ -83,11 +72,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
83
72
|
}], label: [{
|
84
73
|
type: Input
|
85
74
|
}], progress: [{
|
86
|
-
type: Input
|
75
|
+
type: Input,
|
76
|
+
args: [{ transform: numberAttribute }]
|
87
77
|
}], isIndeterminate: [{
|
88
|
-
type: Input
|
78
|
+
type: Input,
|
79
|
+
args: [{ transform: booleanAttribute }]
|
89
80
|
}], hasStatusIcon: [{
|
90
|
-
type: Input
|
81
|
+
type: Input,
|
82
|
+
args: [{ transform: booleanAttribute }]
|
91
83
|
}] } });
|
92
84
|
|
93
85
|
class EuiProgressBarModule {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"eui-components-eui-progress-bar.mjs","sources":["../../eui-progress-bar/eui-progress-bar.component.ts","../../eui-progress-bar/eui-progress-bar.component.html","../../eui-progress-bar/eui-progress-bar.module.ts","../../eui-progress-bar/eui-components-eui-progress-bar.ts"],"sourcesContent":["import {
|
1
|
+
{"version":3,"file":"eui-components-eui-progress-bar.mjs","sources":["../../eui-progress-bar/eui-progress-bar.component.ts","../../eui-progress-bar/eui-progress-bar.component.html","../../eui-progress-bar/eui-progress-bar.module.ts","../../eui-progress-bar/eui-components-eui-progress-bar.ts"],"sourcesContent":["import {\n Component,\n Input,\n ChangeDetectionStrategy,\n SimpleChanges,\n OnChanges,\n HostBinding,\n booleanAttribute,\n numberAttribute,\n} from '@angular/core';\nimport { BooleanInput, NumberInput } from '@angular/cdk/coercion';\n\nimport { BaseStatesDirective } from '@eui/components/shared';\n\n@Component({\n templateUrl: './eui-progress-bar.component.html',\n selector: 'eui-progress-bar',\n styleUrls: ['./styles/_index.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: BaseStatesDirective,\n inputs: [\n 'euiSecondary',\n 'euiSuccess',\n 'euiInfo',\n 'euiWarning',\n 'euiDanger',\n 'euiAccent',\n 'euiSize2XS',\n 'euiSizeXS',\n 'euiSizeS',\n 'euiSizeM',\n 'euiSizeL',\n 'euiSizeXL',\n 'euiVariant',\n 'euiSizeVariant',\n ],\n },\n ],\n})\nexport class EuiProgressBarComponent implements OnChanges {\n @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eui-progress-bar';\n @HostBinding('class')\n public get cssClasses(): string {\n return this.getCssClasses();\n }\n\n @Input() label = '';\n\n @Input({ transform: numberAttribute })\n progress: NumberInput;\n\n @Input({ transform: booleanAttribute })\n isIndeterminate: BooleanInput = false;\n\n @Input({ transform: booleanAttribute })\n hasStatusIcon: BooleanInput = false;\n\n constructor(public baseStatesDirective: BaseStatesDirective) {}\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['progress']) {\n this.progress = changes['progress'].currentValue;\n if ((this?.progress as number) > 100) {\n this.progress = 100;\n }\n }\n }\n\n private getCssClasses(): string {\n return [\n this.baseStatesDirective.getCssClasses('eui-progress-bar'),\n this.isIndeterminate ? 'eui-progress-bar--indeterminate' : '',\n this.hasStatusIcon ? 'eui-progress-bar--hasStatusIcon' : '',\n ]\n .join(' ')\n .trim();\n }\n}\n","<div *ngIf=\"label || hasStatusIcon\" class=\"eui-progress-bar__header\">\n <div *ngIf=\"label\" class=\"eui-progress-bar__header-label\">{{ label }}</div>\n <div *ngIf=\"hasStatusIcon\" class=\"eui-progress-bar__header-status\">\n <eui-icon-svg *ngIf=\"baseStatesDirective?.euiSuccess\" icon=\"eui-ecl-success\" fillColor=\"success-100\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"baseStatesDirective?.euiWarning\" icon=\"eui-ecl-warning\" fillColor=\"warning-100\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"baseStatesDirective?.euiDanger\" icon=\"eui-ecl-error\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n</div>\n<div class=\"eui-progress-bar__indicator-container\">\n <div class=\"eui-progress-bar__indicator\" [style.width]=\"!isIndeterminate ? progress + '%' : null\"></div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { EuiProgressBarComponent } from './eui-progress-bar.component';\n\n@NgModule({\n imports: [CommonModule, EuiIconModule],\n declarations: [EuiProgressBarComponent],\n exports: [EuiProgressBarComponent],\n})\nexport class EuiProgressBarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;MAyCa,uBAAuB,CAAA;AAEhC,IAAA,IACW,UAAU,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;KAC/B;AAaD,IAAA,WAAA,CAAmB,mBAAwC,EAAA;QAAxC,IAAmB,CAAA,mBAAA,GAAnB,mBAAmB,CAAqB;QAjBpB,IAAO,CAAA,OAAA,GAAG,kBAAkB,CAAC;QAM3D,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QAMpB,IAAe,CAAA,eAAA,GAAiB,KAAK,CAAC;QAGtC,IAAa,CAAA,aAAA,GAAiB,KAAK,CAAC;KAE2B;AAE/D,IAAA,WAAW,CAAC,OAAsB,EAAA;AAC9B,QAAA,IAAI,OAAO,CAAC,UAAU,CAAC,EAAE;YACrB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;AACjD,YAAA,IAAK,IAAI,EAAE,QAAmB,GAAG,GAAG,EAAE;AAClC,gBAAA,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;AACvB,aAAA;AACJ,SAAA;KACJ;IAEO,aAAa,GAAA;QACjB,OAAO;AACH,YAAA,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,kBAAkB,CAAC;YAC1D,IAAI,CAAC,eAAe,GAAG,iCAAiC,GAAG,EAAE;YAC7D,IAAI,CAAC,aAAa,GAAG,iCAAiC,GAAG,EAAE;AAC9D,SAAA;aACI,IAAI,CAAC,GAAG,CAAC;AACT,aAAA,IAAI,EAAE,CAAC;KACf;iIArCQ,uBAAuB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAvB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,iHASZ,eAAe,CAAA,EAAA,eAAA,EAAA,CAAA,iBAAA,EAAA,iBAAA,EAGf,gBAAgB,CAGhB,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EAAA,gBAAgB,skBCxDxC,4zBAWA,EAAA,MAAA,EAAA,CAAA,0sGAAA,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,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,+CAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,WAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,EAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FD8Ba,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBA3BnC,SAAS;AAEI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAEX,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACZ,wBAAA;AACI,4BAAA,SAAS,EAAE,mBAAmB;AAC9B,4BAAA,MAAM,EAAE;gCACJ,cAAc;gCACd,YAAY;gCACZ,SAAS;gCACT,YAAY;gCACZ,WAAW;gCACX,WAAW;gCACX,YAAY;gCACZ,WAAW;gCACX,UAAU;gCACV,UAAU;gCACV,UAAU;gCACV,WAAW;gCACX,YAAY;gCACZ,gBAAgB;AACnB,6BAAA;AACJ,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,4zBAAA,EAAA,MAAA,EAAA,CAAA,0sGAAA,CAAA,EAAA,CAAA;wFAGsC,OAAO,EAAA,CAAA;sBAA7C,WAAW;uBAAC,eAAe,CAAA;;sBAAG,KAAK;gBAEzB,UAAU,EAAA,CAAA;sBADpB,WAAW;uBAAC,OAAO,CAAA;gBAKX,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAGN,QAAQ,EAAA,CAAA;sBADP,KAAK;uBAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAA;gBAIrC,eAAe,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAItC,aAAa,EAAA,CAAA;sBADZ,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;;;ME7C7B,oBAAoB,CAAA;iIAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAApB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,iBAHd,uBAAuB,CAAA,EAAA,OAAA,EAAA,CAD5B,YAAY,EAAE,aAAa,aAE3B,uBAAuB,CAAA,EAAA,CAAA,CAAA,EAAA;kIAExB,oBAAoB,EAAA,OAAA,EAAA,CAJnB,YAAY,EAAE,aAAa,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAI5B,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC;oBACtC,YAAY,EAAE,CAAC,uBAAuB,CAAC;oBACvC,OAAO,EAAE,CAAC,uBAAuB,CAAC;AACrC,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}
|