@eui/components 18.0.0-next.57 → 18.0.0-next.58
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/EuiAppSidebarMenuComponent.html +25 -1
- package/docs/components/EuiDashboardCardComponent.html +24 -0
- package/docs/components/EuiMenuComponent.html +25 -1
- package/docs/components/EuiMenuItemComponent.html +24 -0
- package/docs/components/EuiSidebarMenuComponent.html +25 -1
- package/docs/components/EuiToolbarNavbarComponent.html +105 -4
- package/docs/dependencies.html +1 -1
- package/docs/js/menu-wc.js +6 -6
- package/docs/js/menu-wc_es5.js +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/modules/EuiToolbarModule.html +3 -0
- package/esm2022/eui-dashboard-card/eui-dashboard-card.component.mjs +14 -4
- package/esm2022/eui-dialog/container/eui-dialog-container.component.mjs +2 -2
- package/esm2022/eui-dialog/eui-dialog.component.mjs +2 -2
- package/esm2022/eui-menu/eui-menu-item.component.mjs +11 -4
- package/esm2022/eui-menu/eui-menu.component.mjs +7 -3
- package/esm2022/eui-sidebar-menu/eui-sidebar-menu.component.mjs +7 -3
- package/esm2022/eui-slide-toggle/eui-slide-toggle.component.mjs +2 -2
- package/esm2022/eui-timebar/eui-timebar.component.mjs +2 -2
- package/esm2022/layout/eui-app/eui-app-sidebar/sidebar-menu/sidebar-menu.component.mjs +7 -3
- package/esm2022/layout/eui-app/eui-app.component.mjs +1 -1
- package/esm2022/layout/eui-search/search.component.mjs +2 -2
- package/esm2022/layout/eui-toolbar/toolbar-navbar/toolbar-navbar.component.mjs +15 -11
- package/esm2022/layout/eui-toolbar/toolbar.component.mjs +2 -2
- package/esm2022/layout/eui-toolbar/toolbar.module.mjs +5 -1
- package/eui-dashboard-card/eui-dashboard-card.component.d.ts +3 -1
- package/eui-dashboard-card/eui-dashboard-card.component.d.ts.map +1 -1
- package/eui-menu/eui-menu-item.component.d.ts +3 -1
- package/eui-menu/eui-menu-item.component.d.ts.map +1 -1
- package/eui-menu/eui-menu.component.d.ts +3 -1
- package/eui-menu/eui-menu.component.d.ts.map +1 -1
- package/eui-sidebar-menu/eui-sidebar-menu.component.d.ts +3 -1
- package/eui-sidebar-menu/eui-sidebar-menu.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-dashboard-card.mjs +15 -5
- package/fesm2022/eui-components-eui-dashboard-card.mjs.map +2 -2
- package/fesm2022/eui-components-eui-dialog.mjs +4 -4
- package/fesm2022/eui-components-eui-dialog.mjs.map +1 -1
- package/fesm2022/eui-components-eui-menu.mjs +17 -6
- package/fesm2022/eui-components-eui-menu.mjs.map +2 -2
- package/fesm2022/eui-components-eui-sidebar-menu.mjs +6 -2
- package/fesm2022/eui-components-eui-sidebar-menu.mjs.map +2 -2
- package/fesm2022/eui-components-eui-slide-toggle.mjs +2 -2
- package/fesm2022/eui-components-eui-timebar.mjs +2 -2
- package/fesm2022/eui-components-eui-timebar.mjs.map +1 -1
- package/fesm2022/eui-components-layout.mjs +161 -119
- package/fesm2022/eui-components-layout.mjs.map +4 -4
- package/layout/eui-app/eui-app-sidebar/sidebar-menu/sidebar-menu.component.d.ts +3 -1
- package/layout/eui-app/eui-app-sidebar/sidebar-menu/sidebar-menu.component.d.ts.map +1 -1
- package/layout/eui-toolbar/toolbar-navbar/toolbar-navbar.component.d.ts +7 -2
- package/layout/eui-toolbar/toolbar-navbar/toolbar-navbar.component.d.ts.map +1 -1
- package/layout/eui-toolbar/toolbar.module.d.ts +4 -3
- package/layout/eui-toolbar/toolbar.module.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -250,11 +250,11 @@ export class EuiTimebarComponent {
|
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
252
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: ["isShowLegend", "isShowLegend", booleanAttribute], isShowLegendAsIndex: ["isShowLegendAsIndex", "isShowLegendAsIndex", booleanAttribute], isShowCurrentDateMarker: ["isShowCurrentDateMarker", "isShowCurrentDateMarker", booleanAttribute], isCurrentDateMarkerAlwaysInRange: ["isCurrentDateMarkerAlwaysInRange", "isCurrentDateMarkerAlwaysInRange", booleanAttribute], isGroupOverlappingLabels: ["isGroupOverlappingLabels", "isGroupOverlappingLabels", booleanAttribute] }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-border-radius-base);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:100%;color:var(--eui-c-white);margin-right:var(--eui-s-m);padding:var(--eui-s-xs) var(--eui-s-s)}.eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-s-m)}.eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
253
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: ["isShowLegend", "isShowLegend", booleanAttribute], isShowLegendAsIndex: ["isShowLegendAsIndex", "isShowLegendAsIndex", booleanAttribute], isShowCurrentDateMarker: ["isShowCurrentDateMarker", "isShowCurrentDateMarker", booleanAttribute], isCurrentDateMarkerAlwaysInRange: ["isCurrentDateMarkerAlwaysInRange", "isCurrentDateMarkerAlwaysInRange", booleanAttribute], isGroupOverlappingLabels: ["isGroupOverlappingLabels", "isGroupOverlappingLabels", booleanAttribute] }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-br-max);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:var(--eui-br-max);color:var(--eui-c-white);margin-right:var(--eui-s-m);padding:var(--eui-s-xs) var(--eui-s-s)}.eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-s-m)}.eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
254
254
|
}
|
|
255
255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiTimebarComponent, decorators: [{
|
|
256
256
|
type: Component,
|
|
257
|
-
args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-border-radius-base);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:100%;color:var(--eui-c-white);margin-right:var(--eui-s-m);padding:var(--eui-s-xs) var(--eui-s-s)}.eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-s-m)}.eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"] }]
|
|
257
|
+
args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!item.isGrouped\">\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-br-max);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:var(--eui-br-max);color:var(--eui-c-white);margin-right:var(--eui-s-m);padding:var(--eui-s-xs) var(--eui-s-s)}.eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-s-m)}.eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"] }]
|
|
258
258
|
}], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
|
|
259
259
|
type: ViewChild,
|
|
260
260
|
args: ['container']
|
|
@@ -17,6 +17,7 @@ export class EuiAppSidebarMenuComponent {
|
|
|
17
17
|
this.isFlat = false;
|
|
18
18
|
this.hasScrollToItem = false;
|
|
19
19
|
this.hasLowercaseItems = false;
|
|
20
|
+
this.hasBoldRootLevel = false;
|
|
20
21
|
this.sidebarItemClick = new EventEmitter();
|
|
21
22
|
this.subs = new Subscription();
|
|
22
23
|
}
|
|
@@ -48,11 +49,11 @@ export class EuiAppSidebarMenuComponent {
|
|
|
48
49
|
this.sidebarItemClick.emit(event);
|
|
49
50
|
}
|
|
50
51
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiAppSidebarMenuComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: { hasFilter: ["hasFilter", "hasFilter", booleanAttribute], hasIcons: ["hasIcons", "hasIcons", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], expandAllItems: ["expandAllItems", "expandAllItems", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], hasScrollToItem: ["hasScrollToItem", "hasScrollToItem", booleanAttribute], hasLowercaseItems: ["hasLowercaseItems", "hasLowercaseItems", booleanAttribute], items: "items" }, outputs: { sidebarItemClick: "sidebarItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<eui-menu\n [items]=\"items\"\n [hasFilter]=\"hasFilter\"\n [hasIcons]=\"hasIcons\"\n [hasTooltip]=\"hasTooltip\"\n [expandAllItems]=\"expandAllItems\"\n [isFlat]=\"isFlat\"\n [hasScrollToItem]=\"hasScrollToItem\"\n [hasCollapsedInitials]=\"hasCollapsedInitials\"\n [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen && !(asService.state$ | async).isSidebarHover\"\n (itemClick)=\"onMenuItemClicked($event)\">\n</eui-menu>\n", dependencies: [{ kind: "component", type: i2.EuiMenuComponent, selector: "eui-menu", inputs: ["items", "searchFilterLabel", "externalLinkLabel", "fragmentId", "filterValue", "isCollapsed", "hasCollapsedInitials", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems", "isFlat", "hasScrollToItem"], outputs: ["isClick", "itemClick"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
52
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: { hasFilter: ["hasFilter", "hasFilter", booleanAttribute], hasIcons: ["hasIcons", "hasIcons", booleanAttribute], hasTooltip: ["hasTooltip", "hasTooltip", booleanAttribute], expandAllItems: ["expandAllItems", "expandAllItems", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], hasCollapsedInitials: ["hasCollapsedInitials", "hasCollapsedInitials", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], hasScrollToItem: ["hasScrollToItem", "hasScrollToItem", booleanAttribute], hasLowercaseItems: ["hasLowercaseItems", "hasLowercaseItems", booleanAttribute], hasBoldRootLevel: ["hasBoldRootLevel", "hasBoldRootLevel", booleanAttribute], items: "items" }, outputs: { sidebarItemClick: "sidebarItemClick" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<eui-menu\n [items]=\"items\"\n [hasFilter]=\"hasFilter\"\n [hasIcons]=\"hasIcons\"\n [hasTooltip]=\"hasTooltip\"\n [expandAllItems]=\"expandAllItems\"\n [isFlat]=\"isFlat\"\n [hasScrollToItem]=\"hasScrollToItem\"\n [hasCollapsedInitials]=\"hasCollapsedInitials\"\n [hasBoldRootLevel]=\"hasBoldRootLevel\"\n [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen && !(asService.state$ | async).isSidebarHover\"\n (itemClick)=\"onMenuItemClicked($event)\">\n</eui-menu>\n", dependencies: [{ kind: "component", type: i2.EuiMenuComponent, selector: "eui-menu", inputs: ["items", "searchFilterLabel", "externalLinkLabel", "fragmentId", "filterValue", "isCollapsed", "hasCollapsedInitials", "hasFilter", "hasIcons", "hasTooltip", "expandAllItems", "isFlat", "hasScrollToItem", "hasBoldRootLevel"], outputs: ["isClick", "itemClick"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
52
53
|
}
|
|
53
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiAppSidebarMenuComponent, decorators: [{
|
|
54
55
|
type: Component,
|
|
55
|
-
args: [{ selector: 'eui-app-sidebar-menu', encapsulation: ViewEncapsulation.None, template: "<eui-menu\n [items]=\"items\"\n [hasFilter]=\"hasFilter\"\n [hasIcons]=\"hasIcons\"\n [hasTooltip]=\"hasTooltip\"\n [expandAllItems]=\"expandAllItems\"\n [isFlat]=\"isFlat\"\n [hasScrollToItem]=\"hasScrollToItem\"\n [hasCollapsedInitials]=\"hasCollapsedInitials\"\n [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen && !(asService.state$ | async).isSidebarHover\"\n (itemClick)=\"onMenuItemClicked($event)\">\n</eui-menu>\n" }]
|
|
56
|
+
args: [{ selector: 'eui-app-sidebar-menu', encapsulation: ViewEncapsulation.None, template: "<eui-menu\n [items]=\"items\"\n [hasFilter]=\"hasFilter\"\n [hasIcons]=\"hasIcons\"\n [hasTooltip]=\"hasTooltip\"\n [expandAllItems]=\"expandAllItems\"\n [isFlat]=\"isFlat\"\n [hasScrollToItem]=\"hasScrollToItem\"\n [hasCollapsedInitials]=\"hasCollapsedInitials\"\n [hasBoldRootLevel]=\"hasBoldRootLevel\"\n [isCollapsed]=\"!(asService.state$ | async).isSidebarOpen && !(asService.state$ | async).isSidebarHover\"\n (itemClick)=\"onMenuItemClicked($event)\">\n</eui-menu>\n" }]
|
|
56
57
|
}], ctorParameters: () => [{ type: i1.EuiAppShellService }], propDecorators: { class: [{
|
|
57
58
|
type: HostBinding
|
|
58
59
|
}], hasFilter: [{
|
|
@@ -82,9 +83,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ng
|
|
|
82
83
|
}], hasLowercaseItems: [{
|
|
83
84
|
type: Input,
|
|
84
85
|
args: [{ transform: booleanAttribute }]
|
|
86
|
+
}], hasBoldRootLevel: [{
|
|
87
|
+
type: Input,
|
|
88
|
+
args: [{ transform: booleanAttribute }]
|
|
85
89
|
}], items: [{
|
|
86
90
|
type: Input
|
|
87
91
|
}], sidebarItemClick: [{
|
|
88
92
|
type: Output
|
|
89
93
|
}] } });
|
|
90
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
94
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xheW91dC9ldWktYXBwL2V1aS1hcHAtc2lkZWJhci9zaWRlYmFyLW1lbnUvc2lkZWJhci1tZW51LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xheW91dC9ldWktYXBwL2V1aS1hcHAtc2lkZWJhci9zaWRlYmFyLW1lbnUvc2lkZWJhci1tZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQ1QsV0FBVyxFQUNYLGlCQUFpQixFQUNqQixLQUFLLEVBSUwsTUFBTSxFQUNOLFlBQVksRUFFWixnQkFBZ0IsR0FDbkIsTUFBTSxlQUFlLENBQUM7QUFHdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLE1BQU0sQ0FBQzs7Ozs7QUFPcEMsTUFBTSxPQUFPLDBCQUEwQjtJQXNCbkMsWUFBbUIsU0FBNkI7UUFBN0IsY0FBUyxHQUFULFNBQVMsQ0FBb0I7UUFyQmpDLFVBQUssR0FBRyxzQkFBc0IsQ0FBQztRQUVOLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLG1CQUFjLEdBQUcsS0FBSyxDQUFDO1FBQ3ZCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLHlCQUFvQixHQUFHLEtBQUssQ0FBQztRQUM3QixXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2Ysb0JBQWUsR0FBRyxLQUFLLENBQUM7UUFDeEIsc0JBQWlCLEdBQUcsS0FBSyxDQUFDO1FBQzFCLHFCQUFnQixHQUFHLEtBQUssQ0FBQztRQU12RCxxQkFBZ0IsR0FBRyxJQUFJLFlBQVksRUFBZSxDQUFDO1FBS3pELElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBRUQsUUFBUTtRQUNKLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDO1lBQ3BCLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLO1lBQ3ZCLFlBQVksRUFBRSxJQUFJLENBQUMsS0FBSztTQUMzQixDQUFDLENBQUM7UUFFSCw2QkFBNkI7UUFDN0IsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3RHLENBQUM7SUFFRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQzlCLElBQUksT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ2hCLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDO2dCQUNwQixHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSztnQkFDdkIsWUFBWSxFQUFFLElBQUksQ0FBQyxLQUFLO2FBQzNCLENBQUMsQ0FBQztRQUNQLENBQUM7SUFDTCxDQUFDO0lBRU0saUJBQWlCLENBQUMsS0FBa0I7UUFDdkMsb0VBQW9FO1FBQ3BFLElBQ0ksS0FBSyxDQUFDLEdBQUc7WUFDVCxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxlQUFlLENBQUMsRUFDbEksQ0FBQztZQUNDLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUN6QyxDQUFDO1FBRUQsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN0QyxDQUFDO21IQTNEUSwwQkFBMEI7dUdBQTFCLDBCQUEwQixvRkFHZixnQkFBZ0Isc0NBQ2hCLGdCQUFnQiw0Q0FDaEIsZ0JBQWdCLHdEQUNoQixnQkFBZ0IsK0NBQ2hCLGdCQUFnQiwwRUFDaEIsZ0JBQWdCLGdDQUNoQixnQkFBZ0IsMkRBQ2hCLGdCQUFnQixpRUFDaEIsZ0JBQWdCLDhEQUNoQixnQkFBZ0Isc0tDbEN4Qyw0ZkFhQTs7Z0dEU2EsMEJBQTBCO2tCQUx0QyxTQUFTOytCQUNJLHNCQUFzQixpQkFFakIsaUJBQWlCLENBQUMsSUFBSTt1RkFHdEIsS0FBSztzQkFBbkIsV0FBVztnQkFFNEIsU0FBUztzQkFBaEQsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFDRSxRQUFRO3NCQUEvQyxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUNFLFVBQVU7c0JBQWpELEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBQ0UsY0FBYztzQkFBckQsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFDRSxXQUFXO3NCQUFsRCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUNFLG9CQUFvQjtzQkFBM0QsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFDRSxNQUFNO3NCQUE3QyxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUNFLGVBQWU7c0JBQXRELEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUU7Z0JBQ0UsaUJBQWlCO3NCQUF4RCxLQUFLO3VCQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFO2dCQUNFLGdCQUFnQjtzQkFBdkQsS0FBSzt1QkFBQyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRTtnQkFJN0IsS0FBSztzQkFBYixLQUFLO2dCQUVJLGdCQUFnQjtzQkFBekIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIEhvc3RCaW5kaW5nLFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxuICAgIElucHV0LFxuICAgIE9uQ2hhbmdlcyxcbiAgICBPbkluaXQsXG4gICAgU2ltcGxlQ2hhbmdlcyxcbiAgICBPdXRwdXQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIE9uRGVzdHJveSxcbiAgICBib29sZWFuQXR0cmlidXRlLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEV1aUFwcFNoZWxsU2VydmljZSB9IGZyb20gJ0BldWkvY29yZSc7XG5pbXBvcnQgeyBFdWlNZW51SXRlbSB9IGZyb20gJ0BldWkvYmFzZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdldWktYXBwLXNpZGViYXItbWVudScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NpZGViYXItbWVudS5jb21wb25lbnQuaHRtbCcsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbn0pXG5leHBvcnQgY2xhc3MgRXVpQXBwU2lkZWJhck1lbnVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgICBASG9zdEJpbmRpbmcoKSBjbGFzcyA9ICdldWktYXBwLXNpZGViYXItbWVudSc7XG5cbiAgICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgaGFzRmlsdGVyID0gZmFsc2U7XG4gICAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGhhc0ljb25zID0gZmFsc2U7XG4gICAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGhhc1Rvb2x0aXAgPSBmYWxzZTtcbiAgICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgZXhwYW5kQWxsSXRlbXMgPSBmYWxzZTtcbiAgICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgaXNDb2xsYXBzZWQgPSBmYWxzZTtcbiAgICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgaGFzQ29sbGFwc2VkSW5pdGlhbHMgPSBmYWxzZTtcbiAgICBASW5wdXQoeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSkgaXNGbGF0ID0gZmFsc2U7XG4gICAgQElucHV0KHsgdHJhbnNmb3JtOiBib29sZWFuQXR0cmlidXRlIH0pIGhhc1Njcm9sbFRvSXRlbSA9IGZhbHNlO1xuICAgIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSBoYXNMb3dlcmNhc2VJdGVtcyA9IGZhbHNlO1xuICAgIEBJbnB1dCh7IHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSB9KSBoYXNCb2xkUm9vdExldmVsID0gZmFsc2U7XG5cbiAgICAvLyBUT0RPOiBmaW5kIHRoZSBjb3JyZWN0IHR5cGUgb3IgdHVybiBpbnRvIGEgZ2VuZXJpYywgaHR0cHM6Ly93d3cudHlwZXNjcmlwdGxhbmcub3JnL2RvY3MvaGFuZGJvb2svMi9nZW5lcmljcy5odG1sXG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgICBASW5wdXQoKSBpdGVtczogYW55W107XG5cbiAgICBAT3V0cHV0KCkgc2lkZWJhckl0ZW1DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXVpTWVudUl0ZW0+KCk7XG5cbiAgICBwcml2YXRlIHN1YnM6IFN1YnNjcmlwdGlvbjtcblxuICAgIGNvbnN0cnVjdG9yKHB1YmxpYyBhc1NlcnZpY2U6IEV1aUFwcFNoZWxsU2VydmljZSkge1xuICAgICAgICB0aGlzLnN1YnMgPSBuZXcgU3Vic2NyaXB0aW9uKCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuYXNTZXJ2aWNlLnNldFN0YXRlKHtcbiAgICAgICAgICAgIC4uLnRoaXMuYXNTZXJ2aWNlLnN0YXRlLFxuICAgICAgICAgICAgc2lkZWJhckxpbmtzOiB0aGlzLml0ZW1zLFxuICAgICAgICB9KTtcblxuICAgICAgICAvLyBzdWJzY3JpYmUgdG8gc3RhdGUgY2hhbmdlc1xuICAgICAgICB0aGlzLnN1YnMuYWRkKHRoaXMuYXNTZXJ2aWNlLmdldFN0YXRlKCdzaWRlYmFyTGlua3MnKS5zdWJzY3JpYmUoKGxpbmtzKSA9PiAodGhpcy5pdGVtcyA9IGxpbmtzKSkpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnN1YnMudW5zdWJzY3JpYmUoKTtcbiAgICB9XG5cbiAgICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgICAgIGlmIChjaGFuZ2VzLml0ZW1zKSB7XG4gICAgICAgICAgICB0aGlzLmFzU2VydmljZS5zZXRTdGF0ZSh7XG4gICAgICAgICAgICAgICAgLi4udGhpcy5hc1NlcnZpY2Uuc3RhdGUsXG4gICAgICAgICAgICAgICAgc2lkZWJhckxpbmtzOiB0aGlzLml0ZW1zLFxuICAgICAgICAgICAgfSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwdWJsaWMgb25NZW51SXRlbUNsaWNrZWQoZXZlbnQ6IEV1aU1lbnVJdGVtKTogdm9pZCB7XG4gICAgICAgIC8vIEF1dG8tY2xvc2Ugc2lkZWJhciBtZW51IGFmdGVyIGNsaWNrIHdoZW4gaW4gbW9iaWxlIC8gdGFibGV0IG1vZGVzXG4gICAgICAgIGlmIChcbiAgICAgICAgICAgIGV2ZW50LnVybCAmJlxuICAgICAgICAgICAgKHRoaXMuYXNTZXJ2aWNlLnN0YXRlLmJyZWFrcG9pbnRzLmlzTW9iaWxlIHx8IHRoaXMuYXNTZXJ2aWNlLnN0YXRlLmJyZWFrcG9pbnRzLmlzVGFibGV0IHx8IHRoaXMuYXNTZXJ2aWNlLnN0YXRlLmlzU2lkZWJhckhpZGRlbilcbiAgICAgICAgKSB7XG4gICAgICAgICAgICB0aGlzLmFzU2VydmljZS5pc1NpZGViYXJPcGVuID0gZmFsc2U7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLnNpZGViYXJJdGVtQ2xpY2suZW1pdChldmVudCk7XG4gICAgfVxufVxuIiwiPGV1aS1tZW51XG4gICAgW2l0ZW1zXT1cIml0ZW1zXCJcbiAgICBbaGFzRmlsdGVyXT1cImhhc0ZpbHRlclwiXG4gICAgW2hhc0ljb25zXT1cImhhc0ljb25zXCJcbiAgICBbaGFzVG9vbHRpcF09XCJoYXNUb29sdGlwXCJcbiAgICBbZXhwYW5kQWxsSXRlbXNdPVwiZXhwYW5kQWxsSXRlbXNcIlxuICAgIFtpc0ZsYXRdPVwiaXNGbGF0XCJcbiAgICBbaGFzU2Nyb2xsVG9JdGVtXT1cImhhc1Njcm9sbFRvSXRlbVwiXG4gICAgW2hhc0NvbGxhcHNlZEluaXRpYWxzXT1cImhhc0NvbGxhcHNlZEluaXRpYWxzXCJcbiAgICBbaGFzQm9sZFJvb3RMZXZlbF09XCJoYXNCb2xkUm9vdExldmVsXCJcbiAgICBbaXNDb2xsYXBzZWRdPVwiIShhc1NlcnZpY2Uuc3RhdGUkIHwgYXN5bmMpLmlzU2lkZWJhck9wZW4gJiYgIShhc1NlcnZpY2Uuc3RhdGUkIHwgYXN5bmMpLmlzU2lkZWJhckhvdmVyXCJcbiAgICAoaXRlbUNsaWNrKT1cIm9uTWVudUl0ZW1DbGlja2VkKCRldmVudClcIj5cbjwvZXVpLW1lbnU+XG4iXX0=
|
|
@@ -96,7 +96,7 @@ export class EuiAppComponent {
|
|
|
96
96
|
this.destroy$.unsubscribe();
|
|
97
97
|
}
|
|
98
98
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiAppComponent, deps: [{ token: i1.EuiAppShellService }, { token: i1.EuiGrowlService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
99
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiAppComponent, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", isSidebarOpen: ["isSidebarOpen", "isSidebarOpen", booleanAttribute], isSidebarExpandOnHover: ["isSidebarExpandOnHover", "isSidebarExpandOnHover", booleanAttribute], isShrinkHeaderActive: ["isShrinkHeaderActive", "isShrinkHeaderActive", booleanAttribute], isSidebarHidden: ["isSidebarHidden", "isSidebarHidden", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "appSidebar", first: true, predicate: i0.forwardRef(() => EuiAppSidebarComponent), descendants: true }, { propertyName: "customPageWrapper", first: true, predicate: i0.forwardRef(() => EuiAppPageWrapperDirective), descendants: true }, { propertyName: "appToolbar", first: true, predicate: i0.forwardRef(() => EuiAppToolbarComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).menuLinks.length !== 0 && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n <eui-app-sidebar>\n <eui-app-sidebar-body>\n <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n </eui-app-sidebar-body>\n </eui-app-sidebar>\n</ng-container>\n\n<div class=\"eui-app-main\">\n <ng-content select=\"eui-app-top-message\"></ng-content>\n\n <ng-content select=\"eui-app-header\"></ng-content>\n\n <ng-container\n *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n <eui-app-toolbar>\n <eui-toolbar></eui-toolbar>\n </eui-app-toolbar>\n </ng-container>\n\n <ng-template #elseBlockToolbar>\n <ng-content select=\"eui-app-toolbar\"></ng-content>\n </ng-template>\n\n <ng-content select=\"eui-app-breadcrumb\"></ng-content>\n\n <div class=\"eui-app-main-content\" role=\"main\">\n <ng-content select=\"eui-app-page-wrapper\"></ng-content>\n <ng-container *ngIf=\"hasNoPageWrapper\">\n <router-outlet></router-outlet>\n </ng-container>\n </div>\n\n <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n [value]=\"euiGrowlService.growlMessages\"\n [sticky]=\"euiGrowlService.isGrowlSticky\"\n [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n [life]=\"euiGrowlService.growlLife\"\n [position]=\"euiGrowlService.growlPosition\"\n (clicked)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 996px){.sidebar--hidden.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}.eui-app-main{min-height:100vh;background:var(--eui-c-bg);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);display:flex;flex-direction:column}@media screen and (max-width: 767px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 996px){.sidebar--close .eui-app-main{margin-left:var(--eui-app-sidebar-width-close);width:calc(100% - var(--eui-app-sidebar-width-close))}.sidebar--hidden.sidebar--close .eui-app-main,.sidebar--hidden.sidebar--open .eui-app-main{margin-left:0;width:100%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i4.EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["euiSecondary", "hasLanguageSelector"] }, { kind: "component", type: i5.EuiToolbarComponent, selector: "eui-toolbar", inputs: ["euiSecondary"] }, { kind: "component", type: i6.EuiAppSidebarComponent, selector: "eui-app-sidebar" }, { kind: "component", type: i7.EuiAppSidebarBodyComponent, selector: "eui-app-sidebar-body" }, { kind: "component", type: i8.EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: ["hasFilter", "hasIcons", "hasTooltip", "expandAllItems", "isCollapsed", "hasCollapsedInitials", "isFlat", "hasScrollToItem", "hasLowercaseItems", "items"], outputs: ["sidebarItemClick"] }, { kind: "component", type: i9.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked", "ariaLabel"] }, { kind: "component", type: i10.EuiGrowlComponent, selector: "eui-growl", inputs: ["sticky", "life", "value", "style", "position", "e2eAttr", "closeAllSticky"], outputs: ["growlClick"] }, { kind: "component", type: i11.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
99
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiAppComponent, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", isSidebarOpen: ["isSidebarOpen", "isSidebarOpen", booleanAttribute], isSidebarExpandOnHover: ["isSidebarExpandOnHover", "isSidebarExpandOnHover", booleanAttribute], isShrinkHeaderActive: ["isShrinkHeaderActive", "isShrinkHeaderActive", booleanAttribute], isSidebarHidden: ["isSidebarHidden", "isSidebarHidden", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "appSidebar", first: true, predicate: i0.forwardRef(() => EuiAppSidebarComponent), descendants: true }, { propertyName: "customPageWrapper", first: true, predicate: i0.forwardRef(() => EuiAppPageWrapperDirective), descendants: true }, { propertyName: "appToolbar", first: true, predicate: i0.forwardRef(() => EuiAppToolbarComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).menuLinks.length !== 0 && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n <eui-app-sidebar>\n <eui-app-sidebar-body>\n <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n </eui-app-sidebar-body>\n </eui-app-sidebar>\n</ng-container>\n\n<div class=\"eui-app-main\">\n <ng-content select=\"eui-app-top-message\"></ng-content>\n\n <ng-content select=\"eui-app-header\"></ng-content>\n\n <ng-container\n *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n <eui-app-toolbar>\n <eui-toolbar></eui-toolbar>\n </eui-app-toolbar>\n </ng-container>\n\n <ng-template #elseBlockToolbar>\n <ng-content select=\"eui-app-toolbar\"></ng-content>\n </ng-template>\n\n <ng-content select=\"eui-app-breadcrumb\"></ng-content>\n\n <div class=\"eui-app-main-content\" role=\"main\">\n <ng-content select=\"eui-app-page-wrapper\"></ng-content>\n <ng-container *ngIf=\"hasNoPageWrapper\">\n <router-outlet></router-outlet>\n </ng-container>\n </div>\n\n <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n [value]=\"euiGrowlService.growlMessages\"\n [sticky]=\"euiGrowlService.isGrowlSticky\"\n [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n [life]=\"euiGrowlService.growlLife\"\n [position]=\"euiGrowlService.growlPosition\"\n (clicked)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 996px){.sidebar--hidden.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}.eui-app-main{min-height:100vh;background:var(--eui-c-bg);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);display:flex;flex-direction:column}@media screen and (max-width: 767px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 996px){.sidebar--close .eui-app-main{margin-left:var(--eui-app-sidebar-width-close);width:calc(100% - var(--eui-app-sidebar-width-close))}.sidebar--hidden.sidebar--close .eui-app-main,.sidebar--hidden.sidebar--open .eui-app-main{margin-left:0;width:100%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i4.EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["euiSecondary", "hasLanguageSelector"] }, { kind: "component", type: i5.EuiToolbarComponent, selector: "eui-toolbar", inputs: ["euiSecondary"] }, { kind: "component", type: i6.EuiAppSidebarComponent, selector: "eui-app-sidebar" }, { kind: "component", type: i7.EuiAppSidebarBodyComponent, selector: "eui-app-sidebar-body" }, { kind: "component", type: i8.EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: ["hasFilter", "hasIcons", "hasTooltip", "expandAllItems", "isCollapsed", "hasCollapsedInitials", "isFlat", "hasScrollToItem", "hasLowercaseItems", "hasBoldRootLevel", "items"], outputs: ["sidebarItemClick"] }, { kind: "component", type: i9.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked", "ariaLabel"] }, { kind: "component", type: i10.EuiGrowlComponent, selector: "eui-growl", inputs: ["sticky", "life", "value", "style", "position", "e2eAttr", "closeAllSticky"], outputs: ["growlClick"] }, { kind: "component", type: i11.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
100
100
|
}
|
|
101
101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiAppComponent, decorators: [{
|
|
102
102
|
type: Component,
|
|
@@ -70,11 +70,11 @@ export class EuiSearchComponent {
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
73
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiSearchComponent, selector: "eui-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute], isInputText: ["isInputText", "isInputText", booleanAttribute], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute] }, outputs: { search: "search", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n <div class=\"eui-input-group-addon\">\n <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n placeholder=\"{{placeholderLabel}}\"\n panelWidth=\"{{panelWidth}}\"\n (inputBlur)=\"onInputBlur($event)\"\n (inputFocus)=\"onInputFocus($event)\"\n (inputChange)=\"onSearch($event)\">\n <ng-container *ngIf=\"templates.length !== 0\">\n <ng-template let-option euiTemplate=\"dropdownOption\">\n <ng-container\n [ngTemplateOutlet]=\"resultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n </ng-template>\n </ng-container>\n </eui-autocomplete>\n\n <input *ngIf=\"isInputText\"\n class=\"mywp-search-bar__input\" euiInputText [(ngModel)]=\"searchInput\"\n placeholder=\"{{ placeholderLabel }}\"\n (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (keydown)=\"onSearchInput($event)\"/>\n\n <button *ngIf=\"hasSearchButton\"\n class=\"eui-search__input-button\"\n euiButton\n euiBasicButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n euiIconButton\n (click)=\"onSearchClick()\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n </button>\n\n <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n </div>\n </div>\n</div>\n", styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-
|
|
73
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiSearchComponent, selector: "eui-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute], isInputText: ["isInputText", "isInputText", booleanAttribute], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute] }, outputs: { search: "search", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n <div class=\"eui-input-group-addon\">\n <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n placeholder=\"{{placeholderLabel}}\"\n panelWidth=\"{{panelWidth}}\"\n (inputBlur)=\"onInputBlur($event)\"\n (inputFocus)=\"onInputFocus($event)\"\n (inputChange)=\"onSearch($event)\">\n <ng-container *ngIf=\"templates.length !== 0\">\n <ng-template let-option euiTemplate=\"dropdownOption\">\n <ng-container\n [ngTemplateOutlet]=\"resultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n </ng-template>\n </ng-container>\n </eui-autocomplete>\n\n <input *ngIf=\"isInputText\"\n class=\"mywp-search-bar__input\" euiInputText [(ngModel)]=\"searchInput\"\n placeholder=\"{{ placeholderLabel }}\"\n (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (keydown)=\"onSearchInput($event)\"/>\n\n <button *ngIf=\"hasSearchButton\"\n class=\"eui-search__input-button\"\n euiButton\n euiBasicButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n euiIconButton\n (click)=\"onSearchClick()\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n </button>\n\n <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n </div>\n </div>\n</div>\n", styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-max)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-light);color:var(--eui-c-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-c-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:6px;top:6px;color:var(--eui-c-neutral-lightest)!important}.eui-search__input-button .eui-icon-svg{z-index:1}.eui-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-search__icon{position:absolute;right:8px;top:10px}.eui-search__icon svg{color:var(--eui-c-neutral-lightest)!important;fill:var(--eui-c-neutral-lightest)!important}.eui-search--no-animation .eui-input-text{transition:none}.eui-search--focus.eui-search--no-animation .eui-input-text{width:200px}@media screen and (max-width: 767px){.eui-search{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["autocompleteData", "visibleOptions", "matching", "placeholder", "autocompleteDataSelected", "chipsSortOrder", "itemsSortOrder", "chipsPosition", "groupBy", "toggleLinkMoreLabel", "toggleLinkLessLabel", "classList", "panelWidth", "dragAndDropSourceName", "dragAndDropConnectedTo", "isFreeValueAllowed", "isReadonly", "isLoading", "hasChips", "isAsync", "isChipsSorted", "isItemsSorted", "isChipsRemovable", "isDuplicateValueAllowed", "isAddOnBlur", "isForceSelection", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsDragAndDrop"], outputs: ["panelClose", "panelOpen", "inputFocus", "inputBlur", "clear", "selectionChange", "itemAdd", "itemRemove", "inputChange", "chipDragStart", "chipDragRelease", "chipDrop"] }, { kind: "directive", type: i5.EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "component", type: i6.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i7.EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: ["e2eAttr"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
74
74
|
}
|
|
75
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiSearchComponent, decorators: [{
|
|
76
76
|
type: Component,
|
|
77
|
-
args: [{ selector: 'eui-search', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n <div class=\"eui-input-group-addon\">\n <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n placeholder=\"{{placeholderLabel}}\"\n panelWidth=\"{{panelWidth}}\"\n (inputBlur)=\"onInputBlur($event)\"\n (inputFocus)=\"onInputFocus($event)\"\n (inputChange)=\"onSearch($event)\">\n <ng-container *ngIf=\"templates.length !== 0\">\n <ng-template let-option euiTemplate=\"dropdownOption\">\n <ng-container\n [ngTemplateOutlet]=\"resultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n </ng-template>\n </ng-container>\n </eui-autocomplete>\n\n <input *ngIf=\"isInputText\"\n class=\"mywp-search-bar__input\" euiInputText [(ngModel)]=\"searchInput\"\n placeholder=\"{{ placeholderLabel }}\"\n (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (keydown)=\"onSearchInput($event)\"/>\n\n <button *ngIf=\"hasSearchButton\"\n class=\"eui-search__input-button\"\n euiButton\n euiBasicButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n euiIconButton\n (click)=\"onSearchClick()\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n </button>\n\n <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n </div>\n </div>\n</div>\n", styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-
|
|
77
|
+
args: [{ selector: 'eui-search', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n <div class=\"eui-input-group-addon\">\n <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n placeholder=\"{{placeholderLabel}}\"\n panelWidth=\"{{panelWidth}}\"\n (inputBlur)=\"onInputBlur($event)\"\n (inputFocus)=\"onInputFocus($event)\"\n (inputChange)=\"onSearch($event)\">\n <ng-container *ngIf=\"templates.length !== 0\">\n <ng-template let-option euiTemplate=\"dropdownOption\">\n <ng-container\n [ngTemplateOutlet]=\"resultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-container>\n </ng-template>\n </ng-container>\n </eui-autocomplete>\n\n <input *ngIf=\"isInputText\"\n class=\"mywp-search-bar__input\" euiInputText [(ngModel)]=\"searchInput\"\n placeholder=\"{{ placeholderLabel }}\"\n (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (keydown)=\"onSearchInput($event)\"/>\n\n <button *ngIf=\"hasSearchButton\"\n class=\"eui-search__input-button\"\n euiButton\n euiBasicButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n euiIconButton\n (click)=\"onSearchClick()\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n </button>\n\n <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n <eui-icon-svg icon=\"eui-search\"></eui-icon-svg>\n </div>\n </div>\n</div>\n", styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-max)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-light);color:var(--eui-c-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-c-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:6px;top:6px;color:var(--eui-c-neutral-lightest)!important}.eui-search__input-button .eui-icon-svg{z-index:1}.eui-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-search__icon{position:absolute;right:8px;top:10px}.eui-search__icon svg{color:var(--eui-c-neutral-lightest)!important;fill:var(--eui-c-neutral-lightest)!important}.eui-search--no-animation .eui-input-text{transition:none}.eui-search--focus.eui-search--no-animation .eui-input-text{width:200px}@media screen and (max-width: 767px){.eui-search{display:none}}\n"] }]
|
|
78
78
|
}], propDecorators: { cssClasses: [{
|
|
79
79
|
type: HostBinding,
|
|
80
80
|
args: ['class']
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import { Component, ChangeDetectionStrategy, HostBinding, ViewEncapsulation, Output, EventEmitter, ContentChildren, forwardRef } from '@angular/core';
|
|
2
2
|
import { EuiToolbarNavbarItemComponent } from '../toolbar-navbar-item/toolbar-navbar-item.component';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@eui/core";
|
|
5
|
+
import * as i2 from "@angular/common";
|
|
6
|
+
import * as i3 from "@eui/components/eui-icon";
|
|
7
|
+
import * as i4 from "@eui/components/eui-button";
|
|
8
|
+
import * as i5 from "@eui/components/eui-dropdown";
|
|
4
9
|
export class EuiToolbarNavbarComponent {
|
|
5
|
-
constructor() {
|
|
10
|
+
constructor(asService) {
|
|
11
|
+
this.asService = asService;
|
|
6
12
|
this.class = 'eui-toolbar-navbar';
|
|
7
13
|
this.itemClick = new EventEmitter();
|
|
8
14
|
}
|
|
15
|
+
ngAfterContentInit() {
|
|
16
|
+
this.baseItemSelected = this.items.filter(i => i.isActive)[0];
|
|
17
|
+
}
|
|
9
18
|
itemSelected(id) {
|
|
10
19
|
this.items.forEach((item) => {
|
|
11
20
|
if (item.id === id) {
|
|
@@ -17,18 +26,13 @@ export class EuiToolbarNavbarComponent {
|
|
|
17
26
|
});
|
|
18
27
|
this.itemClick.emit(id);
|
|
19
28
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiToolbarNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
29
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiToolbarNavbarComponent, deps: [{ token: i1.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: EuiToolbarNavbarComponent, selector: "eui-toolbar-navbar", outputs: { itemClick: "itemClick" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EuiToolbarNavbarItemComponent) }], ngImport: i0, template: "@if ( (asService.breakpoints$ | async).isTablet || (asService.breakpoints$ | async).isMobile ) {\n <eui-dropdown isLabelUpdatedFromSelectedItem>\n <button euiButton euiSecondary [attr.aria-label]=\"'Button trigger'\">\n <span class=\"eui-label\">{{ baseItemSelected.id }}</span>\n <eui-icon-svg icon=\"eui-ellipsis-vertical\" size=\"s\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <button *ngFor=\"let item of items\" euiDropdownItem (click)=\"itemSelected(item.id)\" ariaLabel=\"{{item.id}}\">\n {{ item.id }}\n </button>\n </eui-dropdown-content>\n </eui-dropdown>\n} @else {\n <ng-content></ng-content>\n}\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i5.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "component", type: i5.EuiDropdownItemComponent, selector: "eui-dropdown-item, [euiDropdownItem]", inputs: ["subDropdown", "isActive"] }, { kind: "directive", type: i5.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
22
31
|
}
|
|
23
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiToolbarNavbarComponent, decorators: [{
|
|
24
33
|
type: Component,
|
|
25
|
-
args: [{
|
|
26
|
-
|
|
27
|
-
template: '<ng-content></ng-content>',
|
|
28
|
-
changeDetection: ChangeDetectionStrategy.Default,
|
|
29
|
-
encapsulation: ViewEncapsulation.None,
|
|
30
|
-
}]
|
|
31
|
-
}], propDecorators: { class: [{
|
|
34
|
+
args: [{ selector: 'eui-toolbar-navbar', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "@if ( (asService.breakpoints$ | async).isTablet || (asService.breakpoints$ | async).isMobile ) {\n <eui-dropdown isLabelUpdatedFromSelectedItem>\n <button euiButton euiSecondary [attr.aria-label]=\"'Button trigger'\">\n <span class=\"eui-label\">{{ baseItemSelected.id }}</span>\n <eui-icon-svg icon=\"eui-ellipsis-vertical\" size=\"s\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <button *ngFor=\"let item of items\" euiDropdownItem (click)=\"itemSelected(item.id)\" ariaLabel=\"{{item.id}}\">\n {{ item.id }}\n </button>\n </eui-dropdown-content>\n </eui-dropdown>\n} @else {\n <ng-content></ng-content>\n}\n" }]
|
|
35
|
+
}], ctorParameters: () => [{ type: i1.EuiAppShellService }], propDecorators: { class: [{
|
|
32
36
|
type: HostBinding
|
|
33
37
|
}], itemClick: [{
|
|
34
38
|
type: Output
|
|
@@ -36,4 +40,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ng
|
|
|
36
40
|
type: ContentChildren,
|
|
37
41
|
args: [forwardRef(() => EuiToolbarNavbarItemComponent)]
|
|
38
42
|
}] } });
|
|
39
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbGJhci1uYXZiYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGF5b3V0L2V1aS10b29sYmFyL3Rvb2xiYXItbmF2YmFyL3Rvb2xiYXItbmF2YmFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xheW91dC9ldWktdG9vbGJhci90b29sYmFyLW5hdmJhci90b29sYmFyLW5hdmJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLHVCQUF1QixFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLGVBQWUsRUFBRSxVQUFVLEVBQStCLE1BQU0sZUFBZSxDQUFDO0FBQ25MLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLHNEQUFzRCxDQUFDOzs7Ozs7O0FBU3JHLE1BQU0sT0FBTyx5QkFBeUI7SUFTbEMsWUFDVyxTQUE2QjtRQUE3QixjQUFTLEdBQVQsU0FBUyxDQUFvQjtRQVR6QixVQUFLLEdBQUcsb0JBQW9CLENBQUM7UUFFbEMsY0FBUyxHQUF5QixJQUFJLFlBQVksRUFBRSxDQUFDO0lBUTVELENBQUM7SUFFSixrQkFBa0I7UUFDZCxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDbEUsQ0FBQztJQUVNLFlBQVksQ0FBQyxFQUFVO1FBQzFCLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUU7WUFDeEIsSUFBSSxJQUFJLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRSxDQUFDO2dCQUNqQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztZQUN6QixDQUFDO2lCQUFNLENBQUM7Z0JBQ0osSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7WUFDMUIsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFBO1FBQ0YsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDNUIsQ0FBQzttSEExQlEseUJBQXlCO3VHQUF6Qix5QkFBeUIsMExBS0EsNkJBQTZCLDhCQ2ZuRSwrc0JBZUE7O2dHRExhLHlCQUF5QjtrQkFOckMsU0FBUzsrQkFDSSxvQkFBb0IsbUJBRWIsdUJBQXVCLENBQUMsT0FBTyxpQkFDakMsaUJBQWlCLENBQUMsSUFBSTt1RkFHdEIsS0FBSztzQkFBbkIsV0FBVztnQkFFRixTQUFTO3NCQUFsQixNQUFNO2dCQUUyRCxLQUFLO3NCQUF0RSxlQUFlO3VCQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyw2QkFBNkIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIEhvc3RCaW5kaW5nLCBWaWV3RW5jYXBzdWxhdGlvbiwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIENvbnRlbnRDaGlsZHJlbiwgZm9yd2FyZFJlZiwgUXVlcnlMaXN0LCBBZnRlckNvbnRlbnRJbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBFdWlUb29sYmFyTmF2YmFySXRlbUNvbXBvbmVudCB9IGZyb20gJy4uL3Rvb2xiYXItbmF2YmFyLWl0ZW0vdG9vbGJhci1uYXZiYXItaXRlbS5jb21wb25lbnQnO1xuaW1wb3J0IHsgRXVpQXBwU2hlbGxTZXJ2aWNlIH0gZnJvbSAnQGV1aS9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdldWktdG9vbGJhci1uYXZiYXInLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90b29sYmFyLW5hdmJhci5jb21wb25lbnQuaHRtbCcsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5EZWZhdWx0LFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIEV1aVRvb2xiYXJOYXZiYXJDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgICBASG9zdEJpbmRpbmcoKSBjbGFzcyA9ICdldWktdG9vbGJhci1uYXZiYXInO1xuXG4gICAgQE91dHB1dCgpIGl0ZW1DbGljazogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBAQ29udGVudENoaWxkcmVuKGZvcndhcmRSZWYoKCkgPT4gRXVpVG9vbGJhck5hdmJhckl0ZW1Db21wb25lbnQpKSBpdGVtczogUXVlcnlMaXN0PEV1aVRvb2xiYXJOYXZiYXJJdGVtQ29tcG9uZW50PjtcblxuICAgIHB1YmxpYyBiYXNlSXRlbVNlbGVjdGVkOiBFdWlUb29sYmFyTmF2YmFySXRlbUNvbXBvbmVudDtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBwdWJsaWMgYXNTZXJ2aWNlOiBFdWlBcHBTaGVsbFNlcnZpY2UsXG4gICAgKSB7fVxuXG4gICAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLmJhc2VJdGVtU2VsZWN0ZWQgPSB0aGlzLml0ZW1zLmZpbHRlcihpID0+IGkuaXNBY3RpdmUpWzBdO1xuICAgIH1cblxuICAgIHB1YmxpYyBpdGVtU2VsZWN0ZWQoaWQ6IHN0cmluZyk6IHZvaWQge1xuICAgICAgICB0aGlzLml0ZW1zLmZvckVhY2goKGl0ZW0pID0+IHtcbiAgICAgICAgICAgIGlmIChpdGVtLmlkID09PSBpZCkge1xuICAgICAgICAgICAgICAgIGl0ZW0uaXNBY3RpdmUgPSB0cnVlO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICBpdGVtLmlzQWN0aXZlID0gZmFsc2U7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0pXG4gICAgICAgIHRoaXMuaXRlbUNsaWNrLmVtaXQoaWQpO1xuICAgIH1cbn1cbiIsIkBpZiAoIChhc1NlcnZpY2UuYnJlYWtwb2ludHMkIHwgYXN5bmMpLmlzVGFibGV0IHx8IChhc1NlcnZpY2UuYnJlYWtwb2ludHMkIHwgYXN5bmMpLmlzTW9iaWxlICkge1xuICAgIDxldWktZHJvcGRvd24gaXNMYWJlbFVwZGF0ZWRGcm9tU2VsZWN0ZWRJdGVtPlxuICAgICAgICA8YnV0dG9uIGV1aUJ1dHRvbiBldWlTZWNvbmRhcnkgW2F0dHIuYXJpYS1sYWJlbF09XCInQnV0dG9uIHRyaWdnZXInXCI+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImV1aS1sYWJlbFwiPnt7IGJhc2VJdGVtU2VsZWN0ZWQuaWQgfX08L3NwYW4+XG4gICAgICAgICAgICA8ZXVpLWljb24tc3ZnIGljb249XCJldWktZWxsaXBzaXMtdmVydGljYWxcIiBzaXplPVwic1wiPjwvZXVpLWljb24tc3ZnPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPGV1aS1kcm9wZG93bi1jb250ZW50PlxuICAgICAgICAgICAgPGJ1dHRvbiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtc1wiIGV1aURyb3Bkb3duSXRlbSAoY2xpY2spPVwiaXRlbVNlbGVjdGVkKGl0ZW0uaWQpXCIgYXJpYUxhYmVsPVwie3tpdGVtLmlkfX1cIj5cbiAgICAgICAgICAgICAgICB7eyBpdGVtLmlkIH19XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgPC9ldWktZHJvcGRvd24tY29udGVudD5cbiAgICA8L2V1aS1kcm9wZG93bj5cbn0gQGVsc2Uge1xuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbn1cbiJdfQ==
|