@eui/components 15.0.0-rc.17 → 15.0.0-rc.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components/EuiChipComponent.html +1 -1
- package/docs/components/EuiGrowlComponent.html +1 -1
- package/docs/components/EuiPaginatorComponent.html +1 -1
- package/docs/components/EuiTabsComponent.html +1 -1
- package/docs/components/UxDynamicModalComponent.html +1 -1
- package/docs/components/UxFieldSearchComponent.html +1 -1
- package/docs/dependencies.html +3 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/miscellaneous/variables.html +29 -29
- package/esm2020/eui-button/eui-button.component.mjs +2 -2
- package/esm2020/eui-chip/eui-chip.component.mjs +3 -3
- package/esm2020/eui-growl/eui-growl.component.mjs +3 -3
- package/esm2020/eui-paginator/eui-paginator.component.mjs +3 -3
- package/esm2020/eui-tabs/eui-tabs.component.mjs +3 -3
- package/esm2020/eui-timeline/eui-timeline-item.component.mjs +2 -2
- package/esm2020/eui-timeline/eui-timeline.component.mjs +2 -2
- package/esm2020/legacy/ux-datepicker/ux-datepicker.component.mjs +2 -2
- package/esm2020/legacy/ux-dynamic-modal/ux-dynamic-modal.component.mjs +3 -3
- package/esm2020/legacy/ux-field-search/ux-field-search.component.mjs +3 -3
- package/fesm2015/eui-components-eui-button.mjs +2 -2
- package/fesm2015/eui-components-eui-button.mjs.map +1 -1
- package/fesm2015/eui-components-eui-chip.mjs +2 -2
- package/fesm2015/eui-components-eui-chip.mjs.map +1 -1
- package/fesm2015/eui-components-eui-growl.mjs +2 -2
- package/fesm2015/eui-components-eui-growl.mjs.map +1 -1
- package/fesm2015/eui-components-eui-paginator.mjs +2 -2
- package/fesm2015/eui-components-eui-paginator.mjs.map +1 -1
- package/fesm2015/eui-components-eui-tabs.mjs +2 -2
- package/fesm2015/eui-components-eui-tabs.mjs.map +1 -1
- package/fesm2015/eui-components-eui-timeline.mjs +4 -4
- package/fesm2015/eui-components-legacy-ux-datepicker.mjs +2 -2
- package/fesm2015/eui-components-legacy-ux-datepicker.mjs.map +1 -1
- package/fesm2015/eui-components-legacy-ux-dynamic-modal.mjs +2 -2
- package/fesm2015/eui-components-legacy-ux-dynamic-modal.mjs.map +1 -1
- package/fesm2015/eui-components-legacy-ux-field-search.mjs +2 -2
- package/fesm2015/eui-components-legacy-ux-field-search.mjs.map +1 -1
- package/fesm2020/eui-components-eui-button.mjs +2 -2
- package/fesm2020/eui-components-eui-button.mjs.map +1 -1
- package/fesm2020/eui-components-eui-chip.mjs +2 -2
- package/fesm2020/eui-components-eui-chip.mjs.map +1 -1
- package/fesm2020/eui-components-eui-growl.mjs +2 -2
- package/fesm2020/eui-components-eui-growl.mjs.map +1 -1
- package/fesm2020/eui-components-eui-paginator.mjs +2 -2
- package/fesm2020/eui-components-eui-paginator.mjs.map +1 -1
- package/fesm2020/eui-components-eui-tabs.mjs +2 -2
- package/fesm2020/eui-components-eui-tabs.mjs.map +1 -1
- package/fesm2020/eui-components-eui-timeline.mjs +4 -4
- package/fesm2020/eui-components-legacy-ux-datepicker.mjs +2 -2
- package/fesm2020/eui-components-legacy-ux-datepicker.mjs.map +1 -1
- package/fesm2020/eui-components-legacy-ux-dynamic-modal.mjs +2 -2
- package/fesm2020/eui-components-legacy-ux-dynamic-modal.mjs.map +1 -1
- package/fesm2020/eui-components-legacy-ux-field-search.mjs +2 -2
- package/fesm2020/eui-components-legacy-ux-field-search.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -75,10 +75,10 @@ class EuiGrowlComponent {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
/** @nocollapse */ EuiGrowlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiGrowlComponent, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
/** @nocollapse */ EuiGrowlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EuiGrowlComponent, selector: "eui-growl", inputs: { sticky: "sticky", life: "life", value: "value", style: "style", styleClass: "styleClass", position: "position", e2eAttr: "e2eAttr" }, outputs: { clicked: "clicked" }, viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container role=\"region\" aria-live=\"polite\" class=\"eui-growl {{styleClass}} eui-growl--{{position}}\" (click)=\"onClick()\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #msgel *ngFor=\"let msg of value\"\n class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n [ngClass]=\"{'eui-growl-item-container--info':msg.severity === 'info',\n 'eui-growl-item-container--warning':msg.severity === 'warning',\n 'eui-growl-item-container--danger':msg.severity === 'danger',\n 'eui-growl-item-container--success':msg.severity === 'success',\n 'eui-growl--sticky':sticky}\"\n [class.eui-u-anim--slideInUp]=\"position === 'bottom-left' || position === 'bottom-center' || position === 'bottom-right'\"\n [class.eui-u-anim--slideInDown]=\"position === 'top-left' || position === 'top-center' || position === 'top-right'\">\n\n <div class=\"eui-growl-item\">\n <eui-icon-svg *ngIf=\"msg.severity === 'info'\" icon=\"eui-ecl-information\"
|
|
78
|
+
/** @nocollapse */ EuiGrowlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EuiGrowlComponent, selector: "eui-growl", inputs: { sticky: "sticky", life: "life", value: "value", style: "style", styleClass: "styleClass", position: "position", e2eAttr: "e2eAttr" }, outputs: { clicked: "clicked" }, viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container role=\"region\" aria-live=\"polite\" class=\"eui-growl {{styleClass}} eui-growl--{{position}}\" (click)=\"onClick()\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #msgel *ngFor=\"let msg of value\"\n class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n [ngClass]=\"{'eui-growl-item-container--info':msg.severity === 'info',\n 'eui-growl-item-container--warning':msg.severity === 'warning',\n 'eui-growl-item-container--danger':msg.severity === 'danger',\n 'eui-growl-item-container--success':msg.severity === 'success',\n 'eui-growl--sticky':sticky}\"\n [class.eui-u-anim--slideInUp]=\"position === 'bottom-left' || position === 'bottom-center' || position === 'bottom-right'\"\n [class.eui-u-anim--slideInDown]=\"position === 'top-left' || position === 'top-center' || position === 'top-right'\">\n\n <div class=\"eui-growl-item\">\n <eui-icon-svg *ngIf=\"msg.severity === 'info'\" icon=\"eui-ecl-information\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'warning'\" icon=\"eui-alert-circle\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'danger'\" icon=\"eui-ecl-error\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'success'\" icon=\"eui-check\"></eui-icon-svg>\n\n <div class=\"eui-growl-item-message\">\n <span class=\"eui-growl-item-message-title\">{{msg.summary}}</span>\n <p class=\"eui-growl-item-message-detail\" [innerHTML]=\"msg.detail\"></p>\n </div>\n <div class=\"eui-growl-item-close\" (click)=\"remove(msg)\">\n <eui-icon-svg icon=\"eui-close\"></eui-icon-svg>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".eui-growl{--eui-bottom-left-horizontal-offset: var(--eui-base-spacing-l);--eui-bottom-left-vertical-offset: var(--eui-base-spacing-l);--eui-bottom-right-horizontal-offset: var(--eui-base-spacing-l);--eui-bottom-right-vertical-offset: var(--eui-base-spacing-l);position:fixed;width:20rem;z-index:var(--eui-base-z-index-growl-message)}.eui-growl--bottom-left{bottom:var(--eui-bottom-left-vertical-offset);left:var(--eui-bottom-left-horizontal-offset)}.eui-growl--bottom-center{bottom:var(--eui-base-spacing-l);right:50%;transform:translate(50%)}.eui-growl--bottom-right{bottom:var(--eui-bottom-right-vertical-offset);right:var(--eui-bottom-right-horizontal-offset)}.eui-growl--top-left{left:var(--eui-base-spacing-l);top:var(--eui-base-spacing-l)}.eui-growl--top-center{right:50%;top:var(--eui-base-spacing-l);transform:translate(50%)}.eui-growl--top-right{right:var(--eui-base-spacing-l);top:var(--eui-base-spacing-l)}.eui-growl a{color:var(--eui-base-color-white)!important;text-decoration:underline}.eui-growl-item-container{color:var(--eui-base-color-white);filter:alpha(opacity=95);margin:0 0 10px;opacity:.95;position:relative}.eui-growl-item-container.eui-growl-item-container--info{background-color:var(--eui-base-color-info-100);border-bottom:4px solid var(--eui-base-color-info-130)}.eui-growl-item-container.eui-growl-item-container--warning{background-color:var(--eui-base-color-warning-100);border-bottom:4px solid var(--eui-base-color-warning-130)}.eui-growl-item-container.eui-growl-item-container--success{background-color:var(--eui-base-color-success-100);border-bottom:4px solid var(--eui-base-color-success-130)}.eui-growl-item-container.eui-growl-item-container--danger{background-color:var(--eui-base-color-danger-100);border-bottom:4px solid var(--eui-base-color-danger-130)}.eui-growl-item-image{display:flex;text-shadow:1px 1px 1px rgba(0,0,0,.25)}.eui-growl-item{display:flex;padding:var(--eui-base-spacing-xs);position:relative;width:20rem}.eui-growl-item .eui-icon-svg{fill:var(--eui-base-color-white)}.eui-growl-item-close{cursor:pointer;font-size:var(--eui-base-font-size);margin-left:auto;padding:var(--eui-base-spacing-2xs)}.eui-growl-item-message{display:block;margin-left:var(--eui-base-spacing-xs);overflow-y:auto;max-height:80vh}.eui-growl-item-message::-webkit-scrollbar{display:inherit;height:4px;width:4px;background-color:var(--eui-base-color-grey-10)}.eui-growl-item-message::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-growl-item-message::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.eui-growl-item-message::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-growl-item-message code{color:var(--eui-base-color-grey-5);font-size:var(--eui-base-font-size-xs);word-wrap:break-word}.eui-growl-item-message-title{display:block;font-weight:700;padding:var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-xs) 0}.eui-growl-item-message-detail{display:block;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "aria-label", "ariaHidden", "focusable", "isLoading"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
79
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiGrowlComponent, decorators: [{
|
|
80
80
|
type: Component,
|
|
81
|
-
args: [{ selector: 'eui-growl', encapsulation: ViewEncapsulation.None, template: "<div #container role=\"region\" aria-live=\"polite\" class=\"eui-growl {{styleClass}} eui-growl--{{position}}\" (click)=\"onClick()\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #msgel *ngFor=\"let msg of value\"\n class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n [ngClass]=\"{'eui-growl-item-container--info':msg.severity === 'info',\n 'eui-growl-item-container--warning':msg.severity === 'warning',\n 'eui-growl-item-container--danger':msg.severity === 'danger',\n 'eui-growl-item-container--success':msg.severity === 'success',\n 'eui-growl--sticky':sticky}\"\n [class.eui-u-anim--slideInUp]=\"position === 'bottom-left' || position === 'bottom-center' || position === 'bottom-right'\"\n [class.eui-u-anim--slideInDown]=\"position === 'top-left' || position === 'top-center' || position === 'top-right'\">\n\n <div class=\"eui-growl-item\">\n <eui-icon-svg *ngIf=\"msg.severity === 'info'\" icon=\"eui-ecl-information\"
|
|
81
|
+
args: [{ selector: 'eui-growl', encapsulation: ViewEncapsulation.None, template: "<div #container role=\"region\" aria-live=\"polite\" class=\"eui-growl {{styleClass}} eui-growl--{{position}}\" (click)=\"onClick()\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #msgel *ngFor=\"let msg of value\"\n class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n [ngClass]=\"{'eui-growl-item-container--info':msg.severity === 'info',\n 'eui-growl-item-container--warning':msg.severity === 'warning',\n 'eui-growl-item-container--danger':msg.severity === 'danger',\n 'eui-growl-item-container--success':msg.severity === 'success',\n 'eui-growl--sticky':sticky}\"\n [class.eui-u-anim--slideInUp]=\"position === 'bottom-left' || position === 'bottom-center' || position === 'bottom-right'\"\n [class.eui-u-anim--slideInDown]=\"position === 'top-left' || position === 'top-center' || position === 'top-right'\">\n\n <div class=\"eui-growl-item\">\n <eui-icon-svg *ngIf=\"msg.severity === 'info'\" icon=\"eui-ecl-information\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'warning'\" icon=\"eui-alert-circle\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'danger'\" icon=\"eui-ecl-error\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'success'\" icon=\"eui-check\"></eui-icon-svg>\n\n <div class=\"eui-growl-item-message\">\n <span class=\"eui-growl-item-message-title\">{{msg.summary}}</span>\n <p class=\"eui-growl-item-message-detail\" [innerHTML]=\"msg.detail\"></p>\n </div>\n <div class=\"eui-growl-item-close\" (click)=\"remove(msg)\">\n <eui-icon-svg icon=\"eui-close\"></eui-icon-svg>\n </div>\n </div>\n\n </div>\n</div>\n", styles: [".eui-growl{--eui-bottom-left-horizontal-offset: var(--eui-base-spacing-l);--eui-bottom-left-vertical-offset: var(--eui-base-spacing-l);--eui-bottom-right-horizontal-offset: var(--eui-base-spacing-l);--eui-bottom-right-vertical-offset: var(--eui-base-spacing-l);position:fixed;width:20rem;z-index:var(--eui-base-z-index-growl-message)}.eui-growl--bottom-left{bottom:var(--eui-bottom-left-vertical-offset);left:var(--eui-bottom-left-horizontal-offset)}.eui-growl--bottom-center{bottom:var(--eui-base-spacing-l);right:50%;transform:translate(50%)}.eui-growl--bottom-right{bottom:var(--eui-bottom-right-vertical-offset);right:var(--eui-bottom-right-horizontal-offset)}.eui-growl--top-left{left:var(--eui-base-spacing-l);top:var(--eui-base-spacing-l)}.eui-growl--top-center{right:50%;top:var(--eui-base-spacing-l);transform:translate(50%)}.eui-growl--top-right{right:var(--eui-base-spacing-l);top:var(--eui-base-spacing-l)}.eui-growl a{color:var(--eui-base-color-white)!important;text-decoration:underline}.eui-growl-item-container{color:var(--eui-base-color-white);filter:alpha(opacity=95);margin:0 0 10px;opacity:.95;position:relative}.eui-growl-item-container.eui-growl-item-container--info{background-color:var(--eui-base-color-info-100);border-bottom:4px solid var(--eui-base-color-info-130)}.eui-growl-item-container.eui-growl-item-container--warning{background-color:var(--eui-base-color-warning-100);border-bottom:4px solid var(--eui-base-color-warning-130)}.eui-growl-item-container.eui-growl-item-container--success{background-color:var(--eui-base-color-success-100);border-bottom:4px solid var(--eui-base-color-success-130)}.eui-growl-item-container.eui-growl-item-container--danger{background-color:var(--eui-base-color-danger-100);border-bottom:4px solid var(--eui-base-color-danger-130)}.eui-growl-item-image{display:flex;text-shadow:1px 1px 1px rgba(0,0,0,.25)}.eui-growl-item{display:flex;padding:var(--eui-base-spacing-xs);position:relative;width:20rem}.eui-growl-item .eui-icon-svg{fill:var(--eui-base-color-white)}.eui-growl-item-close{cursor:pointer;font-size:var(--eui-base-font-size);margin-left:auto;padding:var(--eui-base-spacing-2xs)}.eui-growl-item-message{display:block;margin-left:var(--eui-base-spacing-xs);overflow-y:auto;max-height:80vh}.eui-growl-item-message::-webkit-scrollbar{display:inherit;height:4px;width:4px;background-color:var(--eui-base-color-grey-10)}.eui-growl-item-message::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-growl-item-message::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-25)}.eui-growl-item-message::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-growl-item-message code{color:var(--eui-base-color-grey-5);font-size:var(--eui-base-font-size-xs);word-wrap:break-word}.eui-growl-item-message-title{display:block;font-weight:700;padding:var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-xs) 0}.eui-growl-item-message-detail{display:block;margin:0;padding:0}\n"] }]
|
|
82
82
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { sticky: [{
|
|
83
83
|
type: Input
|
|
84
84
|
}], life: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-components-eui-growl.mjs","sources":["../../eui-growl/eui-growl.component.ts","../../eui-growl/eui-growl.component.html","../../eui-growl/eui-growl.module.ts","../../eui-growl/eui-components-eui-growl.ts"],"sourcesContent":["import { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport {\n Component,\n DoCheck,\n ElementRef,\n EventEmitter,\n Input,\n IterableDiffer,\n IterableDiffers,\n OnDestroy,\n Output,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { UxMessage } from '@eui/core';\n@Component({\n selector: 'eui-growl',\n templateUrl: './eui-growl.component.html',\n styleUrls: ['./styles/_index.scss'],\n // changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiGrowlComponent implements DoCheck, OnDestroy {\n\n @Input()\n get sticky(): boolean { return this._sticky; }\n set sticky(value: BooleanInput) { this._sticky = coerceBooleanProperty(value); }\n private _sticky: boolean = false;\n @Input() life: number = 3000;\n @Input() value: UxMessage[] = [];\n @Input() style: any;\n @Input() styleClass: string;\n @Input() position: string;\n @Input() e2eAttr: string = 'eui-growl';\n\n @Output() clicked: EventEmitter<any> = new EventEmitter<any>();\n\n @ViewChild('container') containerViewChild: ElementRef<HTMLDivElement>;\n\n /** @deprecated This will be private in next release */\n differ: IterableDiffer<UxMessage>; // TODO: next release make it private\n /** @deprecated This will be private in next release */\n zIndex: number; // TODO: next release remove it - it's unused\n /** @deprecated This will be private in next release */\n stopDoCheckPropagation: boolean; // TODO: next release make it private\n /** @deprecated This will be private in next release */\n timeout: any; // TODO: to be removed on next major release\n\n constructor(public el: ElementRef, differs: IterableDiffers) {\n this.differ = differs.find([]).create(undefined);\n }\n\n ngDoCheck() {\n let changes = this.differ.diff(this.value);\n\n if (changes) {\n // clear timeout in queue to avoid memory leak\n changes.forEachRemovedItem(({ item }) => clearTimeout(item?.timeout));\n // for newly added items create timeout if they are not sticky\n changes.forEachAddedItem(({ item }) => this.createRemovalTimeout(item));\n }\n }\n\n /**\n * @param msg The text message to appear in the container\n */\n remove(msg: UxMessage): void;\n /**\n * @deprecated This is DEPRECATED please use it like remove(msg: UxMessage);\n * @param msgel @deprecated\n */\n remove(msg: UxMessage, msgel?: any): void {\n if (msgel) {\n console.warn('This is DEPRECATED please use it like remove(msg: UxMessage);\\n' +\n 'This will be a breaking change in the eUI release.');\n }\n this.value.splice(this.findMessageIndex(msg), 1);\n }\n\n /**\n * Removes all growl messages from the stack\n */\n removeAll(): void {\n if (this.value?.length) {\n this.value.splice(0, this.value.length);\n }\n }\n\n ngOnDestroy() {\n if (!this.sticky) {\n // make sure to clear any leftover async Timeout for messages\n this.value.forEach(v => clearTimeout(v?.timeout));\n }\n }\n\n onClick() {\n this.clicked.emit();\n }\n\n /**\n * Removes all growl messages from the stack\n * @param msg UxMessage\n */\n private createRemovalTimeout(value: UxMessage) {\n // if message it's NOT sticky and there's not any async running timeout\n if (!value.sticky && !value.timeout) {\n // set Timeout callback for each message based on the given life value\n value.timeout = setTimeout(() => this.remove(value), value.life || this.life);\n }\n }\n\n /**\n * Finds UxMessage index of the array otherwise returns -1\n * @param msg UxMessage\n */\n private findMessageIndex(msg: UxMessage): number {\n return (this.value?.length) ? this.value.findIndex((value) => value === msg) : -1;\n }\n}\n","<div #container role=\"region\" aria-live=\"polite\" class=\"eui-growl {{styleClass}} eui-growl--{{position}}\" (click)=\"onClick()\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #msgel *ngFor=\"let msg of value\"\n class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n [ngClass]=\"{'eui-growl-item-container--info':msg.severity === 'info',\n 'eui-growl-item-container--warning':msg.severity === 'warning',\n 'eui-growl-item-container--danger':msg.severity === 'danger',\n 'eui-growl-item-container--success':msg.severity === 'success',\n 'eui-growl--sticky':sticky}\"\n [class.eui-u-anim--slideInUp]=\"position === 'bottom-left' || position === 'bottom-center' || position === 'bottom-right'\"\n [class.eui-u-anim--slideInDown]=\"position === 'top-left' || position === 'top-center' || position === 'top-right'\">\n\n <div class=\"eui-growl-item\">\n <eui-icon-svg *ngIf=\"msg.severity === 'info'\" icon=\"eui-ecl-information\" fillColor=\"white\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'warning'\" icon=\"eui-alert-circle\" fillColor=\"white\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'danger'\" icon=\"eui-ecl-error\" fillColor=\"white\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'success'\" icon=\"eui-check-circle\" fillColor=\"white\"></eui-icon-svg>\n\n <div class=\"eui-growl-item-message\">\n <span class=\"eui-growl-item-message-title\">{{msg.summary}}</span>\n <p class=\"eui-growl-item-message-detail\" [innerHTML]=\"msg.detail\"></p>\n </div>\n <div class=\"eui-growl-item-close\" (click)=\"remove(msg)\">\n <eui-icon-svg icon=\"eui-close\"></eui-icon-svg>\n </div>\n </div>\n\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiGrowlComponent } from './eui-growl.component';\nimport { EuiIconModule } from '@eui/components/eui-icon';\n\n@NgModule({\n imports: [CommonModule, EuiIconModule],\n exports: [EuiGrowlComponent],\n declarations: [EuiGrowlComponent]\n})\nexport class EuiGrowlModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-components-eui-growl.mjs","sources":["../../eui-growl/eui-growl.component.ts","../../eui-growl/eui-growl.component.html","../../eui-growl/eui-growl.module.ts","../../eui-growl/eui-components-eui-growl.ts"],"sourcesContent":["import { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport {\n Component,\n DoCheck,\n ElementRef,\n EventEmitter,\n Input,\n IterableDiffer,\n IterableDiffers,\n OnDestroy,\n Output,\n ViewChild,\n ViewEncapsulation\n} from '@angular/core';\nimport { UxMessage } from '@eui/core';\n@Component({\n selector: 'eui-growl',\n templateUrl: './eui-growl.component.html',\n styleUrls: ['./styles/_index.scss'],\n // changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiGrowlComponent implements DoCheck, OnDestroy {\n\n @Input()\n get sticky(): boolean { return this._sticky; }\n set sticky(value: BooleanInput) { this._sticky = coerceBooleanProperty(value); }\n private _sticky: boolean = false;\n @Input() life: number = 3000;\n @Input() value: UxMessage[] = [];\n @Input() style: any;\n @Input() styleClass: string;\n @Input() position: string;\n @Input() e2eAttr: string = 'eui-growl';\n\n @Output() clicked: EventEmitter<any> = new EventEmitter<any>();\n\n @ViewChild('container') containerViewChild: ElementRef<HTMLDivElement>;\n\n /** @deprecated This will be private in next release */\n differ: IterableDiffer<UxMessage>; // TODO: next release make it private\n /** @deprecated This will be private in next release */\n zIndex: number; // TODO: next release remove it - it's unused\n /** @deprecated This will be private in next release */\n stopDoCheckPropagation: boolean; // TODO: next release make it private\n /** @deprecated This will be private in next release */\n timeout: any; // TODO: to be removed on next major release\n\n constructor(public el: ElementRef, differs: IterableDiffers) {\n this.differ = differs.find([]).create(undefined);\n }\n\n ngDoCheck() {\n let changes = this.differ.diff(this.value);\n\n if (changes) {\n // clear timeout in queue to avoid memory leak\n changes.forEachRemovedItem(({ item }) => clearTimeout(item?.timeout));\n // for newly added items create timeout if they are not sticky\n changes.forEachAddedItem(({ item }) => this.createRemovalTimeout(item));\n }\n }\n\n /**\n * @param msg The text message to appear in the container\n */\n remove(msg: UxMessage): void;\n /**\n * @deprecated This is DEPRECATED please use it like remove(msg: UxMessage);\n * @param msgel @deprecated\n */\n remove(msg: UxMessage, msgel?: any): void {\n if (msgel) {\n console.warn('This is DEPRECATED please use it like remove(msg: UxMessage);\\n' +\n 'This will be a breaking change in the eUI release.');\n }\n this.value.splice(this.findMessageIndex(msg), 1);\n }\n\n /**\n * Removes all growl messages from the stack\n */\n removeAll(): void {\n if (this.value?.length) {\n this.value.splice(0, this.value.length);\n }\n }\n\n ngOnDestroy() {\n if (!this.sticky) {\n // make sure to clear any leftover async Timeout for messages\n this.value.forEach(v => clearTimeout(v?.timeout));\n }\n }\n\n onClick() {\n this.clicked.emit();\n }\n\n /**\n * Removes all growl messages from the stack\n * @param msg UxMessage\n */\n private createRemovalTimeout(value: UxMessage) {\n // if message it's NOT sticky and there's not any async running timeout\n if (!value.sticky && !value.timeout) {\n // set Timeout callback for each message based on the given life value\n value.timeout = setTimeout(() => this.remove(value), value.life || this.life);\n }\n }\n\n /**\n * Finds UxMessage index of the array otherwise returns -1\n * @param msg UxMessage\n */\n private findMessageIndex(msg: UxMessage): number {\n return (this.value?.length) ? this.value.findIndex((value) => value === msg) : -1;\n }\n}\n","<div #container role=\"region\" aria-live=\"polite\" class=\"eui-growl {{styleClass}} eui-growl--{{position}}\" (click)=\"onClick()\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #msgel *ngFor=\"let msg of value\"\n class=\"eui-growl-item-container eui-u-anim eui-u-anim--fast\"\n [ngClass]=\"{'eui-growl-item-container--info':msg.severity === 'info',\n 'eui-growl-item-container--warning':msg.severity === 'warning',\n 'eui-growl-item-container--danger':msg.severity === 'danger',\n 'eui-growl-item-container--success':msg.severity === 'success',\n 'eui-growl--sticky':sticky}\"\n [class.eui-u-anim--slideInUp]=\"position === 'bottom-left' || position === 'bottom-center' || position === 'bottom-right'\"\n [class.eui-u-anim--slideInDown]=\"position === 'top-left' || position === 'top-center' || position === 'top-right'\">\n\n <div class=\"eui-growl-item\">\n <eui-icon-svg *ngIf=\"msg.severity === 'info'\" icon=\"eui-ecl-information\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'warning'\" icon=\"eui-alert-circle\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'danger'\" icon=\"eui-ecl-error\"></eui-icon-svg>\n <eui-icon-svg *ngIf=\"msg.severity === 'success'\" icon=\"eui-check\"></eui-icon-svg>\n\n <div class=\"eui-growl-item-message\">\n <span class=\"eui-growl-item-message-title\">{{msg.summary}}</span>\n <p class=\"eui-growl-item-message-detail\" [innerHTML]=\"msg.detail\"></p>\n </div>\n <div class=\"eui-growl-item-close\" (click)=\"remove(msg)\">\n <eui-icon-svg icon=\"eui-close\"></eui-icon-svg>\n </div>\n </div>\n\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiGrowlComponent } from './eui-growl.component';\nimport { EuiIconModule } from '@eui/components/eui-icon';\n\n@NgModule({\n imports: [CommonModule, EuiIconModule],\n exports: [EuiGrowlComponent],\n declarations: [EuiGrowlComponent]\n})\nexport class EuiGrowlModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -161,10 +161,10 @@ class EuiPaginatorComponent {
|
|
|
161
161
|
}
|
|
162
162
|
}
|
|
163
163
|
/** @nocollapse */ EuiPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiPaginatorComponent, deps: [{ token: i1.UxAppShellService }], target: i0.ɵɵFactoryTarget.Component });
|
|
164
|
-
/** @nocollapse */ EuiPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EuiPaginatorComponent, selector: "eui-paginator", inputs: { pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", page: "page", length: "length", nbPageNumberNavigation: "nbPageNumberNavigation", isHidden: "isHidden", hasPageNumberNavigation: "hasPageNumberNavigation" }, outputs: { pageChange: "pageChange" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!isHidden && !(uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page\">\n <div class=\"eui-paginator__page-selector\">\n {{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}
|
|
164
|
+
/** @nocollapse */ EuiPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EuiPaginatorComponent, selector: "eui-paginator", inputs: { pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", page: "page", length: "length", nbPageNumberNavigation: "nbPageNumberNavigation", isHidden: "isHidden", hasPageNumberNavigation: "hasPageNumberNavigation" }, outputs: { pageChange: "pageChange" }, host: { properties: { "class": "this.string" } }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!isHidden && !(uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page\">\n <div class=\"eui-paginator__page-selector\">\n {{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}:\n <eui-dropdown>\n <button type=\"button\" euiButton euiBasicButton euiSizeS>\n <span euiLabel><strong>{{ pageSize }}</strong></span>\n <eui-icon-svg icon=\"eui-caret-down\" fillColor=\"primary\" size=\"s\" aria-label=\"Select Items per page\" class=\"eui-u-ml-2xs\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <div>\n <button type=\"button\" euiDropdownItem euiSizeS *ngFor=\"let pageSizeOption of pageSizeOptions\" (click)=\"changePageSize(pageSizeOption)\">{{ pageSizeOption }}</button>\n </div>\n </eui-dropdown-content>\n </eui-dropdown>\n </div>\n <div *ngIf=\"(length$ | async) > 0\" class=\"eui-paginator__page-range\">\n {{ 'eui.euitable.SHOWING-RANGE' | translate :{ range: range } }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n </div>\n</div>\n\n<div *ngIf=\"!isHidden\" class=\"eui-paginator__page-navigation\">\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page === 0 || length === 0 ? 'disabled' : null\" (click)=\"goFirstPage()\">\n <eui-icon-svg icon=\"eui-caret-first\" aria-label=\"Go to first page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page === 0 || length === 0 ? 'disabled' : null\" (click)=\"goPreviousPage()\">\n <!-- to be compliant with DS as play-back is not existing in ionicons -->\n <eui-icon-svg icon=\"eui-caret-left\" aria-label=\"Go to previous page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-numbers\" *ngIf=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\">\n <button type=\"button\" euiSizeS *ngFor=\"let pageNumber of pageNumberNavigation\" euiButton euiBasicButton euiPrimary euiRounded euiIconButton [euiOutline]=\"pageNumber === page\" (click)=\"goToPage(pageNumber)\">\n {{ pageNumber + 1 }}\n </button>\n </div>\n <div *ngIf=\"(length$ | async) > 0 && (uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page-range\">\n {{ range }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page + 1 === nbPage || length === 0 ? 'disabled' : null\" (click)=\"goNextPage()\">\n <eui-icon-svg icon=\"eui-caret-right\" aria-label=\"Go to next page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page + 1 === nbPage || length === 0 ? 'disabled' : null\" (click)=\"goLastPage()\">\n <eui-icon-svg icon=\"eui-caret-last\" aria-label=\"Go to last page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n</div>\n", styles: [".eui-paginator{--eui-paginator-font-size: var(--eui-base-font-size-m);--eui-paginator-padding: var(--eui-base-spacing-s);align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-paginator-padding) 0;position:relative;width:100%}.eui-paginator__page{display:flex;flex-direction:column;font-size:var(--eui-paginator-font-size)}.eui-paginator__page-selector{align-items:center;display:inline-flex;flex-wrap:wrap;font-size:var(--eui-base-font-size-s)}.eui-paginator__page-range{align-items:center;display:inline-flex;font-size:var(--eui-base-font-size-s)}.eui-paginator__page-navigation{align-items:center;display:flex}.eui-paginator__page-navigation-item,.eui-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-card.eui-card--no-content-padding .eui-card-content .eui-paginator{padding:var(--eui-paginator-padding)}@media screen and (max-width: 767px){.eui-paginator{align-items:center;display:flex;justify-content:center;margin:var(--eui-base-spacing-s) 0;width:100%}.eui-paginator__page-range{margin:0 var(--eui-base-spacing-m)}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem"] }, { kind: "component", type: i4.EuiDropdownItemComponent, selector: "eui-dropdown-item, [euiDropdownItem]", inputs: ["subDropdown", "isActive"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
165
165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiPaginatorComponent, decorators: [{
|
|
166
166
|
type: Component,
|
|
167
|
-
args: [{ selector: 'eui-paginator', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!isHidden && !(uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page\">\n <div class=\"eui-paginator__page-selector\">\n {{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}
|
|
167
|
+
args: [{ selector: 'eui-paginator', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!isHidden && !(uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page\">\n <div class=\"eui-paginator__page-selector\">\n {{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}:\n <eui-dropdown>\n <button type=\"button\" euiButton euiBasicButton euiSizeS>\n <span euiLabel><strong>{{ pageSize }}</strong></span>\n <eui-icon-svg icon=\"eui-caret-down\" fillColor=\"primary\" size=\"s\" aria-label=\"Select Items per page\" class=\"eui-u-ml-2xs\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <div>\n <button type=\"button\" euiDropdownItem euiSizeS *ngFor=\"let pageSizeOption of pageSizeOptions\" (click)=\"changePageSize(pageSizeOption)\">{{ pageSizeOption }}</button>\n </div>\n </eui-dropdown-content>\n </eui-dropdown>\n </div>\n <div *ngIf=\"(length$ | async) > 0\" class=\"eui-paginator__page-range\">\n {{ 'eui.euitable.SHOWING-RANGE' | translate :{ range: range } }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n </div>\n</div>\n\n<div *ngIf=\"!isHidden\" class=\"eui-paginator__page-navigation\">\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page === 0 || length === 0 ? 'disabled' : null\" (click)=\"goFirstPage()\">\n <eui-icon-svg icon=\"eui-caret-first\" aria-label=\"Go to first page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page === 0 || length === 0 ? 'disabled' : null\" (click)=\"goPreviousPage()\">\n <!-- to be compliant with DS as play-back is not existing in ionicons -->\n <eui-icon-svg icon=\"eui-caret-left\" aria-label=\"Go to previous page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-numbers\" *ngIf=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\">\n <button type=\"button\" euiSizeS *ngFor=\"let pageNumber of pageNumberNavigation\" euiButton euiBasicButton euiPrimary euiRounded euiIconButton [euiOutline]=\"pageNumber === page\" (click)=\"goToPage(pageNumber)\">\n {{ pageNumber + 1 }}\n </button>\n </div>\n <div *ngIf=\"(length$ | async) > 0 && (uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page-range\">\n {{ range }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page + 1 === nbPage || length === 0 ? 'disabled' : null\" (click)=\"goNextPage()\">\n <eui-icon-svg icon=\"eui-caret-right\" aria-label=\"Go to next page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page + 1 === nbPage || length === 0 ? 'disabled' : null\" (click)=\"goLastPage()\">\n <eui-icon-svg icon=\"eui-caret-last\" aria-label=\"Go to last page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n</div>\n", styles: [".eui-paginator{--eui-paginator-font-size: var(--eui-base-font-size-m);--eui-paginator-padding: var(--eui-base-spacing-s);align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-paginator-padding) 0;position:relative;width:100%}.eui-paginator__page{display:flex;flex-direction:column;font-size:var(--eui-paginator-font-size)}.eui-paginator__page-selector{align-items:center;display:inline-flex;flex-wrap:wrap;font-size:var(--eui-base-font-size-s)}.eui-paginator__page-range{align-items:center;display:inline-flex;font-size:var(--eui-base-font-size-s)}.eui-paginator__page-navigation{align-items:center;display:flex}.eui-paginator__page-navigation-item,.eui-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-card.eui-card--no-content-padding .eui-card-content .eui-paginator{padding:var(--eui-paginator-padding)}@media screen and (max-width: 767px){.eui-paginator{align-items:center;display:flex;justify-content:center;margin:var(--eui-base-spacing-s) 0;width:100%}.eui-paginator__page-range{margin:0 var(--eui-base-spacing-m)}}\n"] }]
|
|
168
168
|
}], ctorParameters: function () { return [{ type: i1.UxAppShellService }]; }, propDecorators: { string: [{
|
|
169
169
|
type: HostBinding,
|
|
170
170
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-components-eui-paginator.mjs","sources":["../../eui-paginator/models/pagination-event.model.ts","../../eui-paginator/eui-paginator.component.ts","../../eui-paginator/eui-paginator.component.html","../../eui-paginator/eui-paginator.module.ts","../../eui-paginator/eui-components-eui-paginator.ts"],"sourcesContent":["export class EuiPaginationEvent {\n page: number;\n pageSize: number;\n nbPage: number;\n\n constructor(values: Object = {}) {\n Object.assign(this, values);\n }\n}\n","import {\n Component, OnInit, Input, OnDestroy, EventEmitter, Output, OnChanges, SimpleChanges, HostBinding,\n ViewEncapsulation, ChangeDetectionStrategy\n} from '@angular/core';\nimport { Subject, BehaviorSubject } from 'rxjs';\nimport { takeUntil, distinctUntilChanged } from 'rxjs/operators';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { UxAppShellService } from '@eui/core';\n\nimport { EuiPaginationEvent } from './models/pagination-event.model';\n\n@Component({\n selector: 'eui-paginator',\n templateUrl: './eui-paginator.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n\nexport class EuiPaginatorComponent implements OnInit, OnDestroy, OnChanges {\n\n @HostBinding('class') string = 'eui-paginator';\n @Input() pageSizeOptions: number[] = [5, 10, 25, 50, 100];\n @Input() pageSize = 10;\n @Input() page = 0;\n @Input() length: number;\n @Input() nbPageNumberNavigation: number = 5;\n @Input()\n get isHidden(): boolean { return this._isHidden; }\n set isHidden(value: BooleanInput) { this._isHidden = coerceBooleanProperty(value); }\n _isHidden = false;\n\n @Output() pageChange = new EventEmitter<EuiPaginationEvent>();\n\n public page$: BehaviorSubject<EuiPaginationEvent> = new BehaviorSubject(null);\n public length$: BehaviorSubject<number> = new BehaviorSubject(0);\n public range: string;\n public rangeLength: string;\n public nbPage: number;\n\n @Input()\n get hasPageNumberNavigation(): boolean { return this._hasPageNumberNavigation; }\n set hasPageNumberNavigation(value: BooleanInput) { this._hasPageNumberNavigation = coerceBooleanProperty(value); }\n private _hasPageNumberNavigation = false;\n\n private nbPageNumberNav: number;\n private destroy$: Subject<boolean> = new Subject<boolean>();\n\n constructor(public uxAppShellService: UxAppShellService) { }\n\n ngOnChanges(c: SimpleChanges): void {\n if (c && c.length) {\n this.length$.next(c.length.currentValue);\n this.getRange();\n }\n if (c && c.page) {\n this.page$.next(new EuiPaginationEvent({ page: c.page.currentValue, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n }\n if (c && c.pageSize) {\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: c.pageSize.currentValue, nbPage: this.nbPage }));\n this.changePageSize(c.pageSize.currentValue);\n this.getRange();\n }\n }\n\n ngOnInit(): void {\n if (this.length) {\n this.length$.next(this.length);\n }\n\n this.nbPageNumberNav = this.nbPageNumberNavigation;\n\n this.length$.pipe(takeUntil(this.destroy$), distinctUntilChanged()).subscribe((length) => {\n this.length = length;\n this.nbPage = Math.ceil(this.length / this.pageSize);\n this.page = 0;\n this.getRange();\n\n if (this.nbPage < this.nbPageNumberNavigation) {\n this.nbPageNumberNav = this.nbPage;\n } else {\n this.nbPageNumberNav = this.nbPageNumberNavigation;\n }\n\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n });\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n }\n\n ngOnDestroy(): void {\n this.destroy$.next(true);\n this.destroy$.unsubscribe();\n }\n\n get pageNumberNavigation(): number[] {\n const pages = [];\n for (let i = 0; i < this.nbPage; i++) {\n pages.push(i);\n }\n\n const delta = Math.floor(this.nbPageNumberNav / 2);\n let start = 0;\n if (this.page - delta > 0) {\n start = this.page - delta;\n } else {\n start = 0;\n }\n\n if (this.nbPage - this.page <= this.nbPageNumberNav - (delta + 1)) {\n start = this.nbPage - this.nbPageNumberNav;\n }\n\n const end = start + this.nbPageNumberNav;\n return pages.slice(start, end);\n }\n\n public changePageSize(size: number): void {\n this.pageSize = size;\n this.nbPage = Math.ceil(this.length / this.pageSize);\n this.page = 0;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goToPage(page: number): void {\n this.page = page;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goFirstPage(): void {\n this.page = 0;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goPreviousPage(): void {\n this.page--;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goNextPage(): void {\n this.page++;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goLastPage(): void {\n this.page = this.nbPage - 1;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public setPage(page: EuiPaginationEvent): void {\n this.page$.next(page);\n }\n\n public setLength(length: number): void {\n this.length$.next(length);\n }\n\n public getRange(): void {\n const from = this.length > 0 ? (this.page * this.pageSize) + 1 : 0;\n const limit = ((this.page * this.pageSize) + this.pageSize);\n const to = limit <= this.length ? limit : this.length;\n this.range = from && to && this.length ? from + '–' + to : '';\n this.rangeLength = this.length ? this.length.toString() : '';\n }\n\n /**\n * Change the pagination to the given page number\n * @param page 0-based page number to be displayed\n */\n public getPage(page: number): void {\n setTimeout(() => {\n this.goToPage(page);\n });\n }\n}\n","<div *ngIf=\"!isHidden && !(uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page\">\n <div class=\"eui-paginator__page-selector\">\n {{ 'eui.euitable.ITEMS-PER-PAGE' | translate }} \n <eui-dropdown>\n <button type=\"button\" euiButton euiBasicButton euiSizeS>\n <span euiLabel>{{ pageSize }}</span>\n <eui-icon-svg icon=\"eui-caret-down\" fillColor=\"grey-75\" aria-label=\"Select Items per page\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <div>\n <button type=\"button\" euiDropdownItem euiSizeS *ngFor=\"let pageSizeOption of pageSizeOptions\" (click)=\"changePageSize(pageSizeOption)\">{{ pageSizeOption }}</button>\n </div>\n </eui-dropdown-content>\n </eui-dropdown>\n </div>\n <div *ngIf=\"(length$ | async) > 0\" class=\"eui-paginator__page-range\">\n {{ 'eui.euitable.SHOWING-RANGE' | translate :{ range: range } }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n </div>\n</div>\n\n<div *ngIf=\"!isHidden\" class=\"eui-paginator__page-navigation\">\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page === 0 || length === 0 ? 'disabled' : null\" (click)=\"goFirstPage()\">\n <eui-icon-svg icon=\"eui-caret-first\" aria-label=\"Go to first page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page === 0 || length === 0 ? 'disabled' : null\" (click)=\"goPreviousPage()\">\n <!-- to be compliant with DS as play-back is not existing in ionicons -->\n <eui-icon-svg icon=\"eui-caret-left\" aria-label=\"Go to previous page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-numbers\" *ngIf=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\">\n <button type=\"button\" euiSizeS *ngFor=\"let pageNumber of pageNumberNavigation\" euiButton euiBasicButton euiPrimary euiRounded euiIconButton [euiOutline]=\"pageNumber === page\" (click)=\"goToPage(pageNumber)\">\n {{ pageNumber + 1 }}\n </button>\n </div>\n <div *ngIf=\"(length$ | async) > 0 && (uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page-range\">\n {{ range }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page + 1 === nbPage || length === 0 ? 'disabled' : null\" (click)=\"goNextPage()\">\n <eui-icon-svg icon=\"eui-caret-right\" aria-label=\"Go to next page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page + 1 === nbPage || length === 0 ? 'disabled' : null\" (click)=\"goLastPage()\">\n <eui-icon-svg icon=\"eui-caret-last\" aria-label=\"Go to last page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EuiPaginatorComponent } from './eui-paginator.component';\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { EuiDropdownModule, EuiDropdownContentModule } from '@eui/components/eui-dropdown';\nimport { EuiButtonModule } from '@eui/components/eui-button';\nimport { EuiListModule } from '@eui/components/eui-list';\n\n@NgModule({\n imports: [\n CommonModule,\n EuiIconModule,\n EuiDropdownModule,\n EuiDropdownContentModule,\n EuiButtonModule,\n EuiListModule,\n TranslateModule,\n ],\n declarations: [\n EuiPaginatorComponent,\n ],\n exports: [\n EuiPaginatorComponent,\n ],\n})\nexport class EuiPaginatorModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-components-eui-paginator.mjs","sources":["../../eui-paginator/models/pagination-event.model.ts","../../eui-paginator/eui-paginator.component.ts","../../eui-paginator/eui-paginator.component.html","../../eui-paginator/eui-paginator.module.ts","../../eui-paginator/eui-components-eui-paginator.ts"],"sourcesContent":["export class EuiPaginationEvent {\n page: number;\n pageSize: number;\n nbPage: number;\n\n constructor(values: Object = {}) {\n Object.assign(this, values);\n }\n}\n","import {\n Component, OnInit, Input, OnDestroy, EventEmitter, Output, OnChanges, SimpleChanges, HostBinding,\n ViewEncapsulation, ChangeDetectionStrategy\n} from '@angular/core';\nimport { Subject, BehaviorSubject } from 'rxjs';\nimport { takeUntil, distinctUntilChanged } from 'rxjs/operators';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { UxAppShellService } from '@eui/core';\n\nimport { EuiPaginationEvent } from './models/pagination-event.model';\n\n@Component({\n selector: 'eui-paginator',\n templateUrl: './eui-paginator.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n\nexport class EuiPaginatorComponent implements OnInit, OnDestroy, OnChanges {\n\n @HostBinding('class') string = 'eui-paginator';\n @Input() pageSizeOptions: number[] = [5, 10, 25, 50, 100];\n @Input() pageSize = 10;\n @Input() page = 0;\n @Input() length: number;\n @Input() nbPageNumberNavigation: number = 5;\n @Input()\n get isHidden(): boolean { return this._isHidden; }\n set isHidden(value: BooleanInput) { this._isHidden = coerceBooleanProperty(value); }\n _isHidden = false;\n\n @Output() pageChange = new EventEmitter<EuiPaginationEvent>();\n\n public page$: BehaviorSubject<EuiPaginationEvent> = new BehaviorSubject(null);\n public length$: BehaviorSubject<number> = new BehaviorSubject(0);\n public range: string;\n public rangeLength: string;\n public nbPage: number;\n\n @Input()\n get hasPageNumberNavigation(): boolean { return this._hasPageNumberNavigation; }\n set hasPageNumberNavigation(value: BooleanInput) { this._hasPageNumberNavigation = coerceBooleanProperty(value); }\n private _hasPageNumberNavigation = false;\n\n private nbPageNumberNav: number;\n private destroy$: Subject<boolean> = new Subject<boolean>();\n\n constructor(public uxAppShellService: UxAppShellService) { }\n\n ngOnChanges(c: SimpleChanges): void {\n if (c && c.length) {\n this.length$.next(c.length.currentValue);\n this.getRange();\n }\n if (c && c.page) {\n this.page$.next(new EuiPaginationEvent({ page: c.page.currentValue, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n }\n if (c && c.pageSize) {\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: c.pageSize.currentValue, nbPage: this.nbPage }));\n this.changePageSize(c.pageSize.currentValue);\n this.getRange();\n }\n }\n\n ngOnInit(): void {\n if (this.length) {\n this.length$.next(this.length);\n }\n\n this.nbPageNumberNav = this.nbPageNumberNavigation;\n\n this.length$.pipe(takeUntil(this.destroy$), distinctUntilChanged()).subscribe((length) => {\n this.length = length;\n this.nbPage = Math.ceil(this.length / this.pageSize);\n this.page = 0;\n this.getRange();\n\n if (this.nbPage < this.nbPageNumberNavigation) {\n this.nbPageNumberNav = this.nbPage;\n } else {\n this.nbPageNumberNav = this.nbPageNumberNavigation;\n }\n\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n });\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n }\n\n ngOnDestroy(): void {\n this.destroy$.next(true);\n this.destroy$.unsubscribe();\n }\n\n get pageNumberNavigation(): number[] {\n const pages = [];\n for (let i = 0; i < this.nbPage; i++) {\n pages.push(i);\n }\n\n const delta = Math.floor(this.nbPageNumberNav / 2);\n let start = 0;\n if (this.page - delta > 0) {\n start = this.page - delta;\n } else {\n start = 0;\n }\n\n if (this.nbPage - this.page <= this.nbPageNumberNav - (delta + 1)) {\n start = this.nbPage - this.nbPageNumberNav;\n }\n\n const end = start + this.nbPageNumberNav;\n return pages.slice(start, end);\n }\n\n public changePageSize(size: number): void {\n this.pageSize = size;\n this.nbPage = Math.ceil(this.length / this.pageSize);\n this.page = 0;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goToPage(page: number): void {\n this.page = page;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goFirstPage(): void {\n this.page = 0;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goPreviousPage(): void {\n this.page--;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goNextPage(): void {\n this.page++;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public goLastPage(): void {\n this.page = this.nbPage - 1;\n this.page$.next(new EuiPaginationEvent({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage }));\n this.getRange();\n this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });\n }\n\n public setPage(page: EuiPaginationEvent): void {\n this.page$.next(page);\n }\n\n public setLength(length: number): void {\n this.length$.next(length);\n }\n\n public getRange(): void {\n const from = this.length > 0 ? (this.page * this.pageSize) + 1 : 0;\n const limit = ((this.page * this.pageSize) + this.pageSize);\n const to = limit <= this.length ? limit : this.length;\n this.range = from && to && this.length ? from + '–' + to : '';\n this.rangeLength = this.length ? this.length.toString() : '';\n }\n\n /**\n * Change the pagination to the given page number\n * @param page 0-based page number to be displayed\n */\n public getPage(page: number): void {\n setTimeout(() => {\n this.goToPage(page);\n });\n }\n}\n","<div *ngIf=\"!isHidden && !(uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page\">\n <div class=\"eui-paginator__page-selector\">\n {{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}:\n <eui-dropdown>\n <button type=\"button\" euiButton euiBasicButton euiSizeS>\n <span euiLabel><strong>{{ pageSize }}</strong></span>\n <eui-icon-svg icon=\"eui-caret-down\" fillColor=\"primary\" size=\"s\" aria-label=\"Select Items per page\" class=\"eui-u-ml-2xs\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <div>\n <button type=\"button\" euiDropdownItem euiSizeS *ngFor=\"let pageSizeOption of pageSizeOptions\" (click)=\"changePageSize(pageSizeOption)\">{{ pageSizeOption }}</button>\n </div>\n </eui-dropdown-content>\n </eui-dropdown>\n </div>\n <div *ngIf=\"(length$ | async) > 0\" class=\"eui-paginator__page-range\">\n {{ 'eui.euitable.SHOWING-RANGE' | translate :{ range: range } }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n </div>\n</div>\n\n<div *ngIf=\"!isHidden\" class=\"eui-paginator__page-navigation\">\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page === 0 || length === 0 ? 'disabled' : null\" (click)=\"goFirstPage()\">\n <eui-icon-svg icon=\"eui-caret-first\" aria-label=\"Go to first page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page === 0 || length === 0 ? 'disabled' : null\" (click)=\"goPreviousPage()\">\n <!-- to be compliant with DS as play-back is not existing in ionicons -->\n <eui-icon-svg icon=\"eui-caret-left\" aria-label=\"Go to previous page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-numbers\" *ngIf=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\">\n <button type=\"button\" euiSizeS *ngFor=\"let pageNumber of pageNumberNavigation\" euiButton euiBasicButton euiPrimary euiRounded euiIconButton [euiOutline]=\"pageNumber === page\" (click)=\"goToPage(pageNumber)\">\n {{ pageNumber + 1 }}\n </button>\n </div>\n <div *ngIf=\"(length$ | async) > 0 && (uxAppShellService.breakpoints$ | async).isMobile\" class=\"eui-paginator__page-range\">\n {{ range }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page + 1 === nbPage || length === 0 ? 'disabled' : null\" (click)=\"goNextPage()\">\n <eui-icon-svg icon=\"eui-caret-right\" aria-label=\"Go to next page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n <div class=\"eui-paginator__page-navigation-item\">\n <button type=\"button\"\n [euiSizeS]=\"hasPageNumberNavigation && !(uxAppShellService.breakpoints$ | async).isMobile\" euiButton euiIconButton euiBasicButton euiRounded\n [attr.disabled]=\"page + 1 === nbPage || length === 0 ? 'disabled' : null\" (click)=\"goLastPage()\">\n <eui-icon-svg icon=\"eui-caret-last\" aria-label=\"Go to last page\" fillColor=\"primary\"></eui-icon-svg>\n </button>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { EuiPaginatorComponent } from './eui-paginator.component';\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { EuiDropdownModule, EuiDropdownContentModule } from '@eui/components/eui-dropdown';\nimport { EuiButtonModule } from '@eui/components/eui-button';\nimport { EuiListModule } from '@eui/components/eui-list';\n\n@NgModule({\n imports: [\n CommonModule,\n EuiIconModule,\n EuiDropdownModule,\n EuiDropdownContentModule,\n EuiButtonModule,\n EuiListModule,\n TranslateModule,\n ],\n declarations: [\n EuiPaginatorComponent,\n ],\n exports: [\n EuiPaginatorComponent,\n ],\n})\nexport class EuiPaginatorModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;MAAa,kBAAkB,CAAA;AAK3B,IAAA,WAAA,CAAY,SAAiB,EAAE,EAAA;AAC3B,QAAA,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KAC/B;AACJ;;MCWY,qBAAqB,CAAA;AA6B9B,IAAA,WAAA,CAAmB,iBAAoC,EAAA;QAApC,IAAiB,CAAA,iBAAA,GAAjB,iBAAiB,CAAmB;QA3BjC,IAAM,CAAA,MAAA,GAAG,eAAe,CAAC;AACtC,QAAA,IAAA,CAAA,eAAe,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QACjD,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAC;QACd,IAAI,CAAA,IAAA,GAAG,CAAC,CAAC;QAET,IAAsB,CAAA,sBAAA,GAAW,CAAC,CAAC;QAI5C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAER,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAsB,CAAC;AAEvD,QAAA,IAAA,CAAA,KAAK,GAAwC,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC;AACvE,QAAA,IAAA,CAAA,OAAO,GAA4B,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;QAQzD,IAAwB,CAAA,wBAAA,GAAG,KAAK,CAAC;AAGjC,QAAA,IAAA,CAAA,QAAQ,GAAqB,IAAI,OAAO,EAAW,CAAC;KAEA;IArB5D,IACI,QAAQ,KAAc,OAAO,IAAI,CAAC,SAAS,CAAC,EAAE;AAClD,IAAA,IAAI,QAAQ,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAWpF,IACI,uBAAuB,KAAc,OAAO,IAAI,CAAC,wBAAwB,CAAC,EAAE;AAChF,IAAA,IAAI,uBAAuB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,wBAAwB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;AAQlH,IAAA,WAAW,CAAC,CAAgB,EAAA;AACxB,QAAA,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YACzC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACnB,SAAA;AACD,QAAA,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;YACrH,IAAI,CAAC,QAAQ,EAAE,CAAC;AACnB,SAAA;AACD,QAAA,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;YACrH,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;YAC7C,IAAI,CAAC,QAAQ,EAAE,CAAC;AACnB,SAAA;KACJ;IAED,QAAQ,GAAA;QACJ,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAClC,SAAA;AAED,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAEnD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,oBAAoB,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,KAAI;AACrF,YAAA,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AACrB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;AACrD,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;YACd,IAAI,CAAC,QAAQ,EAAE,CAAC;AAEhB,YAAA,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,sBAAsB,EAAE;AAC3C,gBAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC;AACtC,aAAA;AAAM,iBAAA;AACH,gBAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,sBAAsB,CAAC;AACtD,aAAA;AAED,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;AAC/G,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KAC9G;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;KAC/B;AAED,IAAA,IAAI,oBAAoB,GAAA;QACpB,MAAM,KAAK,GAAG,EAAE,CAAC;AACjB,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAClC,YAAA,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACjB,SAAA;AAED,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QACnD,IAAI,KAAK,GAAG,CAAC,CAAC;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,GAAG,KAAK,GAAG,CAAC,EAAE;AACvB,YAAA,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;AAC7B,SAAA;AAAM,aAAA;YACH,KAAK,GAAG,CAAC,CAAC;AACb,SAAA;AAED,QAAA,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;YAC/D,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC;AAC9C,SAAA;AAED,QAAA,MAAM,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;QACzC,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;KAClC;AAEM,IAAA,cAAc,CAAC,IAAY,EAAA;AAC9B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;AACrD,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;AACd,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAC3G,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAC3F;AAEM,IAAA,QAAQ,CAAC,IAAY,EAAA;AACxB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AACjB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAC3G,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAC3F;IAEM,WAAW,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;AACd,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAC3G,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAC3F;IAEM,cAAc,GAAA;QACjB,IAAI,CAAC,IAAI,EAAE,CAAC;AACZ,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAC3G,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAC3F;IAEM,UAAU,GAAA;QACb,IAAI,CAAC,IAAI,EAAE,CAAC;AACZ,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAC3G,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAC3F;IAEM,UAAU,GAAA;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;AAC5B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAC3G,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAC3F;AAEM,IAAA,OAAO,CAAC,IAAwB,EAAA;AACnC,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACzB;AAEM,IAAA,SAAS,CAAC,MAAc,EAAA;AAC3B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC7B;IAEM,QAAQ,GAAA;QACX,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,CAAC;AACnE,QAAA,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC5D,QAAA,MAAM,EAAE,GAAG,KAAK,IAAI,IAAI,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;QACtD,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,EAAE,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC;AAC9D,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;KAChE;AAED;;;AAGG;AACI,IAAA,OAAO,CAAC,IAAY,EAAA;QACvB,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AACxB,SAAC,CAAC,CAAC;KACN;;qIAtKQ,qBAAqB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,mBAAA,qBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,qYCnBlC,i8HA2DA,EAAA,MAAA,EAAA,CAAA,8kCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,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,YAAA,EAAA,YAAA,EAAA,WAAA,EAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,UAAA,EAAA,OAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,uBAAA,EAAA,gCAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,wBAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,eAAA,EAAA,aAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FDxCa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,iBAGV,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,i8HAAA,EAAA,MAAA,EAAA,CAAA,8kCAAA,CAAA,EAAA,CAAA;wGAKzB,MAAM,EAAA,CAAA;sBAA3B,WAAW;uBAAC,OAAO,CAAA;gBACX,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,sBAAsB,EAAA,CAAA;sBAA9B,KAAK;gBAEF,QAAQ,EAAA,CAAA;sBADX,KAAK;gBAKI,UAAU,EAAA,CAAA;sBAAnB,MAAM;gBASH,uBAAuB,EAAA,CAAA;sBAD1B,KAAK;;;MEdG,kBAAkB,CAAA;;kIAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;mIAAlB,kBAAkB,EAAA,YAAA,EAAA,CANvB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CATrB,YAAY;QACZ,aAAa;QACb,iBAAiB;QACjB,wBAAwB;QACxB,eAAe;QACf,aAAa;AACb,QAAA,eAAe,aAMf,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAGhB,mBAAA,kBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAfvB,YAAY;QACZ,aAAa;QACb,iBAAiB;QACjB,wBAAwB;QACxB,eAAe;QACf,aAAa;QACb,eAAe,CAAA,EAAA,CAAA,CAAA;2FASV,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAjB9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;wBACZ,aAAa;wBACb,iBAAiB;wBACjB,wBAAwB;wBACxB,eAAe;wBACf,aAAa;wBACb,eAAe;AAClB,qBAAA;AACD,oBAAA,YAAY,EAAE;wBACV,qBAAqB;AACxB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,qBAAqB;AACxB,qBAAA;AACJ,iBAAA,CAAA;;;ACzBD;;AAEG;;;;"}
|
|
@@ -435,10 +435,10 @@ class EuiTabsComponent {
|
|
|
435
435
|
}
|
|
436
436
|
}
|
|
437
437
|
/** @nocollapse */ EuiTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
438
|
-
/** @nocollapse */ EuiTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EuiTabsComponent, selector: "eui-tabs", inputs: { styleClass: "styleClass", tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: "isMainNavigation", isSubTabs: "isSubTabs", isVerticalTabs: "isVerticalTabs" }, outputs: { tabClosed: "tabClosed", tabSelected: "tabSelected", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(function () { return 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 #host class=\"eui-tabs {{ styleClass }}\" [class.eui-tabs--main-navigation]=\"isMainNavigation\" [class.eui-tabs--vertical]=\"isVerticalTabs\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #euiTabsItems class=\"eui-tabs__items\" [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__items--scrolling]=\"scrolling\" (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 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 <eui-icon-svg *ngIf=\"tab.isClosable\" icon=\"eui-close-circle\" class=\"eui-tab__close-icon\" (click)=\"closeTab(i, $event)\" aria-label=\"With close icon\"></eui-icon-svg>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n\n <div class=\"eui-tabs__navigation\">\n <div class=\"eui-tabs__navigation__left-item\">\n <button (click)=\"goToLeft()\" euiButton euiIconButton euiBasicButton [euiDisabled]=\"navigationLeftButtonDisabled\" 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 (click)=\"goToRight()\" euiButton euiIconButton euiBasicButton [euiDisabled]=\"navigationRightButtonDisabled\" 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 <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;position:relative;width:100%}.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:2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:auto}.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;font-weight:600;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{align-items:center;font-weight:600}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:500}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10);outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.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-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-text)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;font-size:var(--eui-base-icon-size-m);opacity:.7;padding-left:var(--eui-base-spacing-s)}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover{opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-25);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-20)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.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-10)}.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-25)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-card .eui-tabs .eui-tab-content-wrapper .eui-tab-content{overflow:auto}.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:0;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;outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.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-10)}.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-25)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-card .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{overflow:auto}.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-10)}.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--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--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--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--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--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--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}\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", "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", "content", "contentAlignment", "position", "isDisabled", "euiTooltip"], exportAs: ["euiTooltip"] }, { kind: "directive", type: i8.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
438
|
+
/** @nocollapse */ EuiTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EuiTabsComponent, selector: "eui-tabs", inputs: { styleClass: "styleClass", tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: "isMainNavigation", isSubTabs: "isSubTabs", isVerticalTabs: "isVerticalTabs" }, outputs: { tabClosed: "tabClosed", tabSelected: "tabSelected", tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "_tabs", predicate: i0.forwardRef(function () { return 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 #host class=\"eui-tabs {{ styleClass }}\" [class.eui-tabs--main-navigation]=\"isMainNavigation\" [class.eui-tabs--vertical]=\"isVerticalTabs\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #euiTabsItems class=\"eui-tabs__items\" [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__items--scrolling]=\"scrolling\" (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 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 <eui-icon-svg *ngIf=\"tab.isClosable\" icon=\"eui-ecl-close\" class=\"eui-tab__close-icon\" (click)=\"closeTab(i, $event)\" aria-label=\"With close icon\"></eui-icon-svg>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n\n <div class=\"eui-tabs__navigation\">\n <div class=\"eui-tabs__navigation__left-item\">\n <button (click)=\"goToLeft()\" euiButton euiIconButton euiBasicButton [euiDisabled]=\"navigationLeftButtonDisabled\" 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 (click)=\"goToRight()\" euiButton euiIconButton euiBasicButton [euiDisabled]=\"navigationRightButtonDisabled\" 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 <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;position:relative;width:100%}.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:2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:auto}.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;font-weight:600;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{align-items:center;font-weight:600}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:500}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10);outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.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-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-text)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;font-size:var(--eui-base-icon-size-m);opacity:.7;padding-left:var(--eui-base-spacing-s)}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover{opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-25);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-20)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.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-10)}.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-25)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-card .eui-tabs .eui-tab-content-wrapper .eui-tab-content{overflow:auto}.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:0;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;outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.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-10)}.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-25)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-card .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{overflow:auto}.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-10)}.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--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--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--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--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--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--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}\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", "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", "content", "contentAlignment", "position", "isDisabled", "euiTooltip"], exportAs: ["euiTooltip"] }, { kind: "directive", type: i8.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
439
439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EuiTabsComponent, decorators: [{
|
|
440
440
|
type: Component,
|
|
441
|
-
args: [{ selector: 'eui-tabs', encapsulation: ViewEncapsulation.None, template: "<div #host class=\"eui-tabs {{ styleClass }}\" [class.eui-tabs--main-navigation]=\"isMainNavigation\" [class.eui-tabs--vertical]=\"isVerticalTabs\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #euiTabsItems class=\"eui-tabs__items\" [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__items--scrolling]=\"scrolling\" (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 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 <eui-icon-svg *ngIf=\"tab.isClosable\" icon=\"eui-close-circle\" class=\"eui-tab__close-icon\" (click)=\"closeTab(i, $event)\" aria-label=\"With close icon\"></eui-icon-svg>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n\n <div class=\"eui-tabs__navigation\">\n <div class=\"eui-tabs__navigation__left-item\">\n <button (click)=\"goToLeft()\" euiButton euiIconButton euiBasicButton [euiDisabled]=\"navigationLeftButtonDisabled\" 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 (click)=\"goToRight()\" euiButton euiIconButton euiBasicButton [euiDisabled]=\"navigationRightButtonDisabled\" 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 <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;position:relative;width:100%}.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:2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:auto}.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;font-weight:600;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{align-items:center;font-weight:600}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:500}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10);outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.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-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-text)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;font-size:var(--eui-base-icon-size-m);opacity:.7;padding-left:var(--eui-base-spacing-s)}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover{opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-25);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-20)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.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-10)}.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-25)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-card .eui-tabs .eui-tab-content-wrapper .eui-tab-content{overflow:auto}.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:0;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;outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.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-10)}.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-25)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-card .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{overflow:auto}.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-10)}.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--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--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--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--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--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--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}\n"] }]
|
|
441
|
+
args: [{ selector: 'eui-tabs', encapsulation: ViewEncapsulation.None, template: "<div #host class=\"eui-tabs {{ styleClass }}\" [class.eui-tabs--main-navigation]=\"isMainNavigation\" [class.eui-tabs--vertical]=\"isVerticalTabs\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div #euiTabsItems class=\"eui-tabs__items\" [class.eui-tabs__items--horizontal]=\"!isVerticalTabs\" [class.eui-tabs__items--scrolling]=\"scrolling\" (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 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 <eui-icon-svg *ngIf=\"tab.isClosable\" icon=\"eui-ecl-close\" class=\"eui-tab__close-icon\" (click)=\"closeTab(i, $event)\" aria-label=\"With close icon\"></eui-icon-svg>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n\n <div class=\"eui-tabs__navigation\">\n <div class=\"eui-tabs__navigation__left-item\">\n <button (click)=\"goToLeft()\" euiButton euiIconButton euiBasicButton [euiDisabled]=\"navigationLeftButtonDisabled\" 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 (click)=\"goToRight()\" euiButton euiIconButton euiBasicButton [euiDisabled]=\"navigationRightButtonDisabled\" 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 <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;position:relative;width:100%}.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:2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:auto}.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;font-weight:600;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-xs) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{align-items:center;font-weight:600}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font-size:var(--eui-base-font-size-s);font-weight:500}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10);outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.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-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-text)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;font-size:var(--eui-base-icon-size-m);opacity:.7;padding-left:var(--eui-base-spacing-s)}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover{opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-25);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-20)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}subtabs .eui-tabs .eui-tab-content-wrapper{padding:0}subtabs .eui-tabs .eui-tab-content-wrapper .eui-tab-content-wrapper{padding:var(--eui-base-spacing-s) 0}.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-10)}.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-25)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-card .eui-tabs .eui-tab-content-wrapper .eui-tab-content{overflow:auto}.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:0;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;outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.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-10)}.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-25)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-10);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-card .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{overflow:auto}.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-10)}.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--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--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--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--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--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--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}\n"] }]
|
|
442
442
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: i2.AnimationBuilder }]; }, propDecorators: { styleClass: [{
|
|
443
443
|
type: Input
|
|
444
444
|
}], tabs: [{
|