@eui/components 19.1.3-snapshot-1744279007296 → 19.1.3-snapshot-1744701533037
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/EuiCardComponent.html +0 -15
- package/docs/components/EuiCardContentComponent.html +0 -15
- package/docs/components/EuiCardFooterActionButtonsComponent.html +0 -19
- package/docs/components/EuiCardFooterActionIconsComponent.html +0 -25
- package/docs/components/EuiCardFooterComponent.html +0 -29
- package/docs/components/EuiCardFooterMenuComponent.html +0 -55
- package/docs/components/EuiCardFooterMenuContentComponent.html +0 -29
- package/docs/components/EuiCardHeaderBodyComponent.html +0 -11
- package/docs/components/EuiCardHeaderComponent.html +0 -20
- package/docs/components/EuiCardHeaderLeftContentComponent.html +0 -13
- package/docs/components/EuiCardHeaderRightContentComponent.html +0 -16
- package/docs/components/EuiCardHeaderSubtitleComponent.html +0 -15
- package/docs/components/EuiCardHeaderTitleComponent.html +0 -16
- package/docs/components/EuiCardMediaComponent.html +0 -17
- package/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/eui-card/components/eui-card-content/eui-card-content.component.d.ts +0 -18
- package/eui-card/components/eui-card-content/eui-card-content.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-footer/eui-card-footer-action-buttons.component.d.ts +0 -22
- package/eui-card/components/eui-card-footer/eui-card-footer-action-buttons.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-footer/eui-card-footer-action-icons.component.d.ts +0 -30
- package/eui-card/components/eui-card-footer/eui-card-footer-action-icons.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-footer/eui-card-footer-menu-content.component.d.ts +0 -30
- package/eui-card/components/eui-card-footer/eui-card-footer-menu-content.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-footer/eui-card-footer-menu.component.d.ts +0 -56
- package/eui-card/components/eui-card-footer/eui-card-footer-menu.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-footer/eui-card-footer.component.d.ts +0 -30
- package/eui-card/components/eui-card-footer/eui-card-footer.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-header/eui-card-header-left-content.component.d.ts +0 -16
- package/eui-card/components/eui-card-header/eui-card-header-left-content.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-header/eui-card-header-right-content.component.d.ts +0 -19
- package/eui-card/components/eui-card-header/eui-card-header-right-content.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-header/eui-card-header-subtitle.component.d.ts +0 -18
- package/eui-card/components/eui-card-header/eui-card-header-subtitle.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-header/eui-card-header-title.component.d.ts +0 -19
- package/eui-card/components/eui-card-header/eui-card-header-title.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-header/eui-card-header.component.d.ts +0 -19
- package/eui-card/components/eui-card-header/eui-card-header.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-header-body/eui-card-header-body.component.d.ts +0 -14
- package/eui-card/components/eui-card-header-body/eui-card-header-body.component.d.ts.map +1 -1
- package/eui-card/components/eui-card-media/eui-card-media.component.d.ts +0 -16
- package/eui-card/components/eui-card-media/eui-card-media.component.d.ts.map +1 -1
- package/eui-card/eui-card.component.d.ts +0 -18
- package/eui-card/eui-card.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-card.mjs +10 -336
- package/fesm2022/eui-components-eui-card.mjs.map +1 -1
- package/package.json +11 -11
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, EventEmitter, booleanAttribute, Output, Input, HostBinding, ChangeDetectionStrategy,
|
|
2
|
+
import { Injectable, EventEmitter, booleanAttribute, Output, Input, HostBinding, ChangeDetectionStrategy, Component, forwardRef, ContentChild, inject, NgModule } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, Subject } from 'rxjs';
|
|
4
4
|
import * as i2 from '@angular/common';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
@@ -75,25 +75,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
75
75
|
/**
|
|
76
76
|
* @description
|
|
77
77
|
* The eui-card-header component provides the header options of the eui-card.
|
|
78
|
-
*
|
|
79
|
-
* @example
|
|
80
|
-
* ```html
|
|
81
|
-
* <eui-card euiCollapsible>
|
|
82
|
-
* <eui-card-header>
|
|
83
|
-
* <eui-card-header-left-content>
|
|
84
|
-
* <eui-icon-svg icon="home:sharp" fillColor="accent"></eui-icon-svg>
|
|
85
|
-
* </eui-card-header-left-content>
|
|
86
|
-
* <eui-card-header-title>Title</eui-card-header-title>
|
|
87
|
-
* <eui-card-header-right-content>
|
|
88
|
-
* <button euiButton euiPrimary euiSizeS>Action</button>
|
|
89
|
-
* </eui-card-header-right-content>
|
|
90
|
-
* </eui-card-header>
|
|
91
|
-
* <eui-card-content>
|
|
92
|
-
* Card content...
|
|
93
|
-
* </eui-card-content>
|
|
94
|
-
* </eui-card>
|
|
95
|
-
* ```
|
|
96
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
|
|
97
78
|
*/
|
|
98
79
|
class EuiCardHeaderComponent {
|
|
99
80
|
constructor(uiStateService) {
|
|
@@ -166,11 +147,11 @@ class EuiCardHeaderComponent {
|
|
|
166
147
|
}
|
|
167
148
|
}
|
|
168
149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardHeaderComponent, deps: [{ token: UiStateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
169
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.1", type: EuiCardHeaderComponent, isStandalone: false, selector: "eui-card-header", inputs: { expandLabel: "expandLabel", collapseLabel: "collapseLabel", hasHeaderClickToggle: ["hasHeaderClickToggle", "hasHeaderClickToggle", booleanAttribute], hasBottomExpander: ["hasBottomExpander", "hasBottomExpander", booleanAttribute], hasFullTitle: ["hasFullTitle", "hasFullTitle", booleanAttribute], isHeaderMultilines: ["isHeaderMultilines", "isHeaderMultilines", booleanAttribute] }, outputs: { collapse: "collapse" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<button type=\"button\" class=\"eui-card-header__container\" (click)=\"onToggleHeader()\"\n [attr.tabindex]=\"(uiStateService.state$ | async).isCollapsible && hasHeaderClickToggle ? '0' : '-1'\">\n\n <ng-content select=\"eui-card-header-left-content\"></ng-content>\n\n <ng-container *ngIf=\"!hasFullTitle\">\n <div class=\"eui-card-header__title-container\" [class.eui-card-header__title-container--multilines]=\"isHeaderMultilines\">\n <ng-content *ngTemplateOutlet=\"title\"></ng-content>\n <ng-content *ngTemplateOutlet=\"subtitle\"></ng-content>\n </div>\n <ng-content *ngTemplateOutlet=\"rightContent\"></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"hasFullTitle\">\n <div class=\"eui-card-header__middle-container\">\n <div class=\"eui-card-header__title-container\" [class.eui-card-header__title-container--multilines]=\"isHeaderMultilines\">\n <ng-content *ngTemplateOutlet=\"title\"></ng-content>\n </div>\n <div class=\"eui-card-header__middle-content\">\n <ng-content *ngTemplateOutlet=\"subtitle\"></ng-content>\n <ng-content *ngTemplateOutlet=\"rightContent\"></ng-content>\n </div>\n </div>\n </ng-container>\n\n <div\n *ngIf=\"(uiStateService.state$ | async).isCollapsible\"\n class=\"eui-card-header__expander\"\n [class.eui-card-header__expander--bottom]=\"hasBottomExpander\"\n [class.eui-card-header__expander--top]=\"isHeaderMultilines\">\n <eui-icon-button-expander class=\"eui-card-header__expander-icon\"\n [isExpanded]=\"!(uiStateService.state$ | async).isCollapsed\" (buttonClick)=\"onToggle($event)\">\n </eui-icon-button-expander>\n </div>\n</button>\n\n<div *ngIf=\"(uiStateService.state$ | async).isUrgent\" class=\"eui-card-header__urgent-indicator\">\n <eui-icon-svg icon=\"alert:sharp\" fillColor=\"white\"></eui-icon-svg>\n</div>\n<ng-content select=\"eui-card-header-body\"></ng-content>\n\n<ng-template #title>\n <ng-content select=\"eui-card-header-title\"></ng-content>\n</ng-template>\n\n<ng-template #subtitle>\n <ng-content select=\"eui-card-header-subtitle\"></ng-content>\n</ng-template>\n\n<ng-template #rightContent>\n <ng-content select=\"eui-card-header-right-content\"></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiIconButtonExpanderComponent, selector: "eui-icon-button-expander", inputs: ["fillColor", "size", "ariaLabel", "isExpanded", "isDirectionForward", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.1", type: EuiCardHeaderComponent, isStandalone: false, selector: "eui-card-header", inputs: { expandLabel: "expandLabel", collapseLabel: "collapseLabel", hasHeaderClickToggle: ["hasHeaderClickToggle", "hasHeaderClickToggle", booleanAttribute], hasBottomExpander: ["hasBottomExpander", "hasBottomExpander", booleanAttribute], hasFullTitle: ["hasFullTitle", "hasFullTitle", booleanAttribute], isHeaderMultilines: ["isHeaderMultilines", "isHeaderMultilines", booleanAttribute] }, outputs: { collapse: "collapse" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<button type=\"button\" class=\"eui-card-header__container\" (click)=\"onToggleHeader()\"\n [attr.tabindex]=\"(uiStateService.state$ | async).isCollapsible && hasHeaderClickToggle ? '0' : '-1'\">\n\n <ng-content select=\"eui-card-header-left-content\"></ng-content>\n\n <ng-container *ngIf=\"!hasFullTitle\">\n <div class=\"eui-card-header__title-container\" [class.eui-card-header__title-container--multilines]=\"isHeaderMultilines\">\n <ng-content *ngTemplateOutlet=\"title\"></ng-content>\n <ng-content *ngTemplateOutlet=\"subtitle\"></ng-content>\n </div>\n <ng-content *ngTemplateOutlet=\"rightContent\"></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"hasFullTitle\">\n <div class=\"eui-card-header__middle-container\">\n <div class=\"eui-card-header__title-container\" [class.eui-card-header__title-container--multilines]=\"isHeaderMultilines\">\n <ng-content *ngTemplateOutlet=\"title\"></ng-content>\n </div>\n <div class=\"eui-card-header__middle-content\">\n <ng-content *ngTemplateOutlet=\"subtitle\"></ng-content>\n <ng-content *ngTemplateOutlet=\"rightContent\"></ng-content>\n </div>\n </div>\n </ng-container>\n\n <div\n *ngIf=\"(uiStateService.state$ | async).isCollapsible\"\n class=\"eui-card-header__expander\"\n [class.eui-card-header__expander--bottom]=\"hasBottomExpander\"\n [class.eui-card-header__expander--top]=\"isHeaderMultilines\">\n <eui-icon-button-expander class=\"eui-card-header__expander-icon\"\n [isExpanded]=\"!(uiStateService.state$ | async).isCollapsed\" (buttonClick)=\"onToggle($event)\">\n </eui-icon-button-expander>\n </div>\n</button>\n\n<div *ngIf=\"(uiStateService.state$ | async).isUrgent\" class=\"eui-card-header__urgent-indicator\">\n <eui-icon-svg icon=\"alert:sharp\" fillColor=\"white\"></eui-icon-svg>\n</div>\n<ng-content select=\"eui-card-header-body\"></ng-content>\n\n<ng-template #title>\n <ng-content select=\"eui-card-header-title\"></ng-content>\n</ng-template>\n\n<ng-template #subtitle>\n <ng-content select=\"eui-card-header-subtitle\"></ng-content>\n</ng-template>\n\n<ng-template #rightContent>\n <ng-content select=\"eui-card-header-right-content\"></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i4.EuiIconButtonExpanderComponent, selector: "eui-icon-button-expander", inputs: ["fillColor", "size", "ariaLabel", "isExpanded", "isDirectionForward", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
170
151
|
}
|
|
171
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardHeaderComponent, decorators: [{
|
|
172
153
|
type: Component,
|
|
173
|
-
args: [{ selector: 'eui-card-header',
|
|
154
|
+
args: [{ selector: 'eui-card-header', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"eui-card-header__container\" (click)=\"onToggleHeader()\"\n [attr.tabindex]=\"(uiStateService.state$ | async).isCollapsible && hasHeaderClickToggle ? '0' : '-1'\">\n\n <ng-content select=\"eui-card-header-left-content\"></ng-content>\n\n <ng-container *ngIf=\"!hasFullTitle\">\n <div class=\"eui-card-header__title-container\" [class.eui-card-header__title-container--multilines]=\"isHeaderMultilines\">\n <ng-content *ngTemplateOutlet=\"title\"></ng-content>\n <ng-content *ngTemplateOutlet=\"subtitle\"></ng-content>\n </div>\n <ng-content *ngTemplateOutlet=\"rightContent\"></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"hasFullTitle\">\n <div class=\"eui-card-header__middle-container\">\n <div class=\"eui-card-header__title-container\" [class.eui-card-header__title-container--multilines]=\"isHeaderMultilines\">\n <ng-content *ngTemplateOutlet=\"title\"></ng-content>\n </div>\n <div class=\"eui-card-header__middle-content\">\n <ng-content *ngTemplateOutlet=\"subtitle\"></ng-content>\n <ng-content *ngTemplateOutlet=\"rightContent\"></ng-content>\n </div>\n </div>\n </ng-container>\n\n <div\n *ngIf=\"(uiStateService.state$ | async).isCollapsible\"\n class=\"eui-card-header__expander\"\n [class.eui-card-header__expander--bottom]=\"hasBottomExpander\"\n [class.eui-card-header__expander--top]=\"isHeaderMultilines\">\n <eui-icon-button-expander class=\"eui-card-header__expander-icon\"\n [isExpanded]=\"!(uiStateService.state$ | async).isCollapsed\" (buttonClick)=\"onToggle($event)\">\n </eui-icon-button-expander>\n </div>\n</button>\n\n<div *ngIf=\"(uiStateService.state$ | async).isUrgent\" class=\"eui-card-header__urgent-indicator\">\n <eui-icon-svg icon=\"alert:sharp\" fillColor=\"white\"></eui-icon-svg>\n</div>\n<ng-content select=\"eui-card-header-body\"></ng-content>\n\n<ng-template #title>\n <ng-content select=\"eui-card-header-title\"></ng-content>\n</ng-template>\n\n<ng-template #subtitle>\n <ng-content select=\"eui-card-header-subtitle\"></ng-content>\n</ng-template>\n\n<ng-template #rightContent>\n <ng-content select=\"eui-card-header-right-content\"></ng-content>\n</ng-template>\n" }]
|
|
174
155
|
}], ctorParameters: () => [{ type: UiStateService }], propDecorators: { string: [{
|
|
175
156
|
type: HostBinding,
|
|
176
157
|
args: ['class']
|
|
@@ -197,25 +178,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
197
178
|
/**
|
|
198
179
|
* @description
|
|
199
180
|
* The eui-card-header-title component projects the title for eui-card-header.
|
|
200
|
-
*
|
|
201
|
-
* @example
|
|
202
|
-
* ```html
|
|
203
|
-
* <eui-card euiCollapsible>
|
|
204
|
-
* <eui-card-header>
|
|
205
|
-
* <eui-card-header-left-content>
|
|
206
|
-
* <eui-icon-svg icon="home:sharp" fillColor="accent"></eui-icon-svg>
|
|
207
|
-
* </eui-card-header-left-content>
|
|
208
|
-
* <eui-card-header-title>Title</eui-card-header-title>
|
|
209
|
-
* <eui-card-header-right-content>
|
|
210
|
-
* <button euiButton euiPrimary euiSizeS>Action</button>
|
|
211
|
-
* </eui-card-header-right-content>
|
|
212
|
-
* </eui-card-header>
|
|
213
|
-
* <eui-card-content>
|
|
214
|
-
* Card content...
|
|
215
|
-
* </eui-card-content>
|
|
216
|
-
* </eui-card>
|
|
217
|
-
* ```
|
|
218
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
|
|
219
181
|
*/
|
|
220
182
|
class EuiCardHeaderTitleComponent {
|
|
221
183
|
constructor() {
|
|
@@ -245,25 +207,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
245
207
|
/**
|
|
246
208
|
* @description
|
|
247
209
|
* The eui-card-header-right-content component projects the right content for eui-card-header.
|
|
248
|
-
*
|
|
249
|
-
* @example
|
|
250
|
-
* ```html
|
|
251
|
-
* <eui-card euiCollapsible>
|
|
252
|
-
* <eui-card-header>
|
|
253
|
-
* <eui-card-header-left-content>
|
|
254
|
-
* <eui-icon-svg icon="home:sharp" fillColor="accent"></eui-icon-svg>
|
|
255
|
-
* </eui-card-header-left-content>
|
|
256
|
-
* <eui-card-header-title>Title</eui-card-header-title>
|
|
257
|
-
* <eui-card-header-right-content>
|
|
258
|
-
* <button euiButton euiPrimary euiSizeS>Action</button>
|
|
259
|
-
* </eui-card-header-right-content>
|
|
260
|
-
* </eui-card-header>
|
|
261
|
-
* <eui-card-content>
|
|
262
|
-
* Card content...
|
|
263
|
-
* </eui-card-content>
|
|
264
|
-
* </eui-card>
|
|
265
|
-
* ```
|
|
266
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
|
|
267
210
|
*/
|
|
268
211
|
class EuiCardHeaderRightContentComponent {
|
|
269
212
|
constructor() {
|
|
@@ -293,22 +236,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
293
236
|
/**
|
|
294
237
|
* @description
|
|
295
238
|
* The eui-card-header-left-content component projects the left content for eui-card-header.
|
|
296
|
-
*
|
|
297
|
-
* @example
|
|
298
|
-
* ```html
|
|
299
|
-
* <eui-card euiCollapsible>
|
|
300
|
-
* <eui-card-header>
|
|
301
|
-
* <eui-card-header-left-content>
|
|
302
|
-
* <eui-icon-svg icon="home:sharp" fillColor="accent"></eui-icon-svg>
|
|
303
|
-
* </eui-card-header-left-content>
|
|
304
|
-
* <eui-card-header-title>Title</eui-card-header-title>
|
|
305
|
-
* </eui-card-header>
|
|
306
|
-
* <eui-card-content>
|
|
307
|
-
* Card content...
|
|
308
|
-
* </eui-card-content>
|
|
309
|
-
* </eui-card>
|
|
310
|
-
* ```
|
|
311
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
|
|
312
239
|
*/
|
|
313
240
|
class EuiCardHeaderLeftContentComponent {
|
|
314
241
|
constructor() {
|
|
@@ -338,24 +265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
338
265
|
/**
|
|
339
266
|
* @description
|
|
340
267
|
* The eui-card-header-subtitle component projects the subtitle for eui-card-header.
|
|
341
|
-
*
|
|
342
|
-
* @example
|
|
343
|
-
* ```html
|
|
344
|
-
* <eui-card>
|
|
345
|
-
* <eui-card-header>
|
|
346
|
-
* <eui-card-header-title>
|
|
347
|
-
* {{ cardTitle }}
|
|
348
|
-
* </eui-card-header-title>
|
|
349
|
-
* <eui-card-header-subtitle>
|
|
350
|
-
* {{ cardSubtitle }}
|
|
351
|
-
* </eui-card-header-subtitle>
|
|
352
|
-
* </eui-card-header>
|
|
353
|
-
* <eui-card-content>
|
|
354
|
-
* I am the content of the card container...
|
|
355
|
-
* </eui-card-content>
|
|
356
|
-
* </eui-card>
|
|
357
|
-
* ```
|
|
358
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card} for more details.
|
|
359
268
|
*/
|
|
360
269
|
class EuiCardHeaderSubtitleComponent {
|
|
361
270
|
constructor() {
|
|
@@ -385,20 +294,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
385
294
|
/**
|
|
386
295
|
* @description
|
|
387
296
|
* The eui-card-header-body component projects the body for eui-card-header.
|
|
388
|
-
*
|
|
389
|
-
* @example
|
|
390
|
-
* ```html
|
|
391
|
-
* <eui-card>
|
|
392
|
-
* <eui-card-header>
|
|
393
|
-
* <eui-card-header-title>Title</eui-card-header-title>
|
|
394
|
-
* <eui-card-header-body>Body</eui-card-header-body>
|
|
395
|
-
* </eui-card-header>
|
|
396
|
-
* <eui-card-content>
|
|
397
|
-
* Card content...
|
|
398
|
-
* </eui-card-content>
|
|
399
|
-
* </eui-card>
|
|
400
|
-
* ```
|
|
401
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
|
|
402
297
|
*/
|
|
403
298
|
class EuiCardHeaderBodyComponent {
|
|
404
299
|
constructor() {
|
|
@@ -428,24 +323,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
428
323
|
/**
|
|
429
324
|
* @description
|
|
430
325
|
* The eui-card-content component projects the content for eui-card.
|
|
431
|
-
*
|
|
432
|
-
* @example
|
|
433
|
-
* ```html
|
|
434
|
-
* <eui-card>
|
|
435
|
-
* <eui-card-header>
|
|
436
|
-
* <eui-card-header-title>
|
|
437
|
-
* {{ cardTitle }}
|
|
438
|
-
* </eui-card-header-title>
|
|
439
|
-
* <eui-card-header-subtitle>
|
|
440
|
-
* {{ cardSubtitle }}
|
|
441
|
-
* </eui-card-header-subtitle>
|
|
442
|
-
* </eui-card-header>
|
|
443
|
-
* <eui-card-content>
|
|
444
|
-
* I am the content of the card container...
|
|
445
|
-
* </eui-card-content>
|
|
446
|
-
* </eui-card>
|
|
447
|
-
* ```
|
|
448
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card}.
|
|
449
326
|
*/
|
|
450
327
|
class EuiCardContentComponent {
|
|
451
328
|
constructor() {
|
|
@@ -484,22 +361,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
484
361
|
/**
|
|
485
362
|
* @description
|
|
486
363
|
* The eui-card-header-body component projects the body for eui-card-header.
|
|
487
|
-
*
|
|
488
|
-
* @example
|
|
489
|
-
* ```html
|
|
490
|
-
* <eui-card euiNoShadow>
|
|
491
|
-
* <eui-card-media
|
|
492
|
-
* imageUrl="./assets/images/cards/home-card-eu-publications.jpg"
|
|
493
|
-
* imageLegend="EU Publications"
|
|
494
|
-
* imageClickUrl="/style-guide-next/components/eui-card"
|
|
495
|
-
* euiTooltip="Internal link Url defined pointing to this page">
|
|
496
|
-
* </eui-card-media>
|
|
497
|
-
* <eui-card-content style="height: 8rem;">
|
|
498
|
-
* Reports, studies, information booklets, magazines and other publications from the EU institutions and other bodies
|
|
499
|
-
* </eui-card-content>
|
|
500
|
-
* </eui-card>
|
|
501
|
-
* ```
|
|
502
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#media-cards} for more details.
|
|
503
364
|
*/
|
|
504
365
|
class EuiCardMediaComponent {
|
|
505
366
|
constructor() {
|
|
@@ -521,11 +382,11 @@ class EuiCardMediaComponent {
|
|
|
521
382
|
this.string = 'eui-card-media';
|
|
522
383
|
}
|
|
523
384
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
524
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EuiCardMediaComponent, isStandalone: false, selector: "eui-card-media", inputs: { imageUrl: "imageUrl", imageLegend: "imageLegend", imageClickUrl: "imageClickUrl", imageClickUrlExternal: "imageClickUrlExternal", imageDescription: "imageDescription", imageHeight: "imageHeight" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div class=\"eui-card-media__container\">\n <ng-container *ngIf=\"imageClickUrl\">\n <a routerLink=\"{{ imageClickUrl }}\" class=\"eui-card-media__container-content\">\n <ng-content *ngTemplateOutlet=\"mediacontent\"></ng-content>\n </a>\n </ng-container>\n <ng-container *ngIf=\"imageClickUrlExternal\">\n <a href=\"{{ imageClickUrlExternal }}\" target=\"_blank\" class=\"eui-card-media__container-content\">\n <ng-content *ngTemplateOutlet=\"mediacontent\"></ng-content>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!imageClickUrl && !imageClickUrlExternal\">\n <ng-content *ngTemplateOutlet=\"mediacontent\"></ng-content>\n </ng-container>\n</div>\n<ng-template #mediacontent>\n <img class=\"eui-card-media__image\" [src]=\"imageUrl\" [height]=\"imageHeight\" alt=\"{{ !imageLegend ? imageDescription : '' }}\" />\n <div *ngIf=\"imageLegend\" class=\"eui-card-media__legend\">{{ imageLegend }}</div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
385
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EuiCardMediaComponent, isStandalone: false, selector: "eui-card-media", inputs: { imageUrl: "imageUrl", imageLegend: "imageLegend", imageClickUrl: "imageClickUrl", imageClickUrlExternal: "imageClickUrlExternal", imageDescription: "imageDescription", imageHeight: "imageHeight" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div class=\"eui-card-media__container\">\n <ng-container *ngIf=\"imageClickUrl\">\n <a routerLink=\"{{ imageClickUrl }}\" class=\"eui-card-media__container-content\">\n <ng-content *ngTemplateOutlet=\"mediacontent\"></ng-content>\n </a>\n </ng-container>\n <ng-container *ngIf=\"imageClickUrlExternal\">\n <a href=\"{{ imageClickUrlExternal }}\" target=\"_blank\" class=\"eui-card-media__container-content\">\n <ng-content *ngTemplateOutlet=\"mediacontent\"></ng-content>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!imageClickUrl && !imageClickUrlExternal\">\n <ng-content *ngTemplateOutlet=\"mediacontent\"></ng-content>\n </ng-container>\n</div>\n<ng-template #mediacontent>\n <img class=\"eui-card-media__image\" [src]=\"imageUrl\" [height]=\"imageHeight\" alt=\"{{ !imageLegend ? imageDescription : '' }}\" />\n <div *ngIf=\"imageLegend\" class=\"eui-card-media__legend\">{{ imageLegend }}</div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
525
386
|
}
|
|
526
387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardMediaComponent, decorators: [{
|
|
527
388
|
type: Component,
|
|
528
|
-
args: [{ selector: 'eui-card-media',
|
|
389
|
+
args: [{ selector: 'eui-card-media', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"eui-card-media__container\">\n <ng-container *ngIf=\"imageClickUrl\">\n <a routerLink=\"{{ imageClickUrl }}\" class=\"eui-card-media__container-content\">\n <ng-content *ngTemplateOutlet=\"mediacontent\"></ng-content>\n </a>\n </ng-container>\n <ng-container *ngIf=\"imageClickUrlExternal\">\n <a href=\"{{ imageClickUrlExternal }}\" target=\"_blank\" class=\"eui-card-media__container-content\">\n <ng-content *ngTemplateOutlet=\"mediacontent\"></ng-content>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!imageClickUrl && !imageClickUrlExternal\">\n <ng-content *ngTemplateOutlet=\"mediacontent\"></ng-content>\n </ng-container>\n</div>\n<ng-template #mediacontent>\n <img class=\"eui-card-media__image\" [src]=\"imageUrl\" [height]=\"imageHeight\" alt=\"{{ !imageLegend ? imageDescription : '' }}\" />\n <div *ngIf=\"imageLegend\" class=\"eui-card-media__legend\">{{ imageLegend }}</div>\n</ng-template>\n" }]
|
|
529
390
|
}], propDecorators: { imageUrl: [{
|
|
530
391
|
type: Input
|
|
531
392
|
}], imageLegend: [{
|
|
@@ -546,28 +407,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
546
407
|
/**
|
|
547
408
|
* @description
|
|
548
409
|
* The eui-card-footer-action-buttons component projects the action buttons content for eui-card.
|
|
549
|
-
*
|
|
550
|
-
* @example
|
|
551
|
-
* ```html
|
|
552
|
-
* <eui-card euiHoverable>
|
|
553
|
-
* <eui-card-media
|
|
554
|
-
* imageUrl="./assets/images/cards/home-card-law.jpg">
|
|
555
|
-
* </eui-card-media>
|
|
556
|
-
* <eui-card-content style="max-height: 11rem; min-height: 11rem;">
|
|
557
|
-
* <h5 class="eui-u-f-bold eui-u-mb-s">Law | EUR Lex</h5>
|
|
558
|
-
* The Official Journal of the European Union, EU case law and other resources for EU law
|
|
559
|
-
* </eui-card-content>
|
|
560
|
-
* <eui-card-footer>
|
|
561
|
-
* <eui-card-footer-action-buttons class="eui-u-flex-justify-content-end">
|
|
562
|
-
* <button euiButton euiPrimary euiSizeS>
|
|
563
|
-
* <span euiLabel>Action</span>
|
|
564
|
-
* <eui-icon-svg icon="chevron-forward:sharp"></eui-icon-svg>
|
|
565
|
-
* </button>
|
|
566
|
-
* </eui-card-footer-action-buttons>
|
|
567
|
-
* </eui-card-footer>
|
|
568
|
-
* </eui-card>
|
|
569
|
-
* ```
|
|
570
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
|
|
571
410
|
*/
|
|
572
411
|
class EuiCardFooterActionButtonsComponent {
|
|
573
412
|
constructor() {
|
|
@@ -597,36 +436,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
597
436
|
/**
|
|
598
437
|
* @description
|
|
599
438
|
* The eui-card-footer-action-icons component projects the action icons content for eui-card.
|
|
600
|
-
*
|
|
601
|
-
* @example
|
|
602
|
-
* ```html
|
|
603
|
-
* <eui-card>
|
|
604
|
-
* <eui-card-header>
|
|
605
|
-
* <eui-card-header-title>
|
|
606
|
-
* <strong>Default layout of a card footer</strong>
|
|
607
|
-
* </eui-card-header-title>
|
|
608
|
-
* </eui-card-header>
|
|
609
|
-
*
|
|
610
|
-
* <eui-card-content>
|
|
611
|
-
* <p class="eui-u-text-paragraph">Hover on footer's elements to display more information.</p>
|
|
612
|
-
* </eui-card-content>
|
|
613
|
-
*
|
|
614
|
-
* <eui-card-footer>
|
|
615
|
-
* <eui-card-footer-action-buttons euiTooltip="Here are displayed the main action buttons. It is recommended to have maximum 2 buttons. Primary action button is always displayed first. Other actions will be put in the menu.">
|
|
616
|
-
* <span class="eui-u-cursor-help">Action buttons</span>
|
|
617
|
-
* </eui-card-footer-action-buttons>
|
|
618
|
-
*
|
|
619
|
-
* <eui-card-footer-action-icons euiTooltip="Here are displayed the action icons. It is recommended to have maximum 2 icons. Other actions will be put in the menu.">
|
|
620
|
-
* <span class="eui-u-cursor-help">Action icons</span>
|
|
621
|
-
* </eui-card-footer-action-icons>
|
|
622
|
-
*
|
|
623
|
-
* <eui-card-footer-menu-content [tooltipText]="'Actions menu to propose more options'">
|
|
624
|
-
* <div class="m-2">Menu content here</div>
|
|
625
|
-
* </eui-card-footer-menu-content>
|
|
626
|
-
* </eui-card-footer>
|
|
627
|
-
* </eui-card>
|
|
628
|
-
* ```
|
|
629
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
|
|
630
439
|
*/
|
|
631
440
|
class EuiCardFooterActionIconsComponent {
|
|
632
441
|
constructor() {
|
|
@@ -656,36 +465,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
656
465
|
/**
|
|
657
466
|
* @description
|
|
658
467
|
* The eui-card-footer-menu-content component projects the content of the actions menu of the eui-card.
|
|
659
|
-
*
|
|
660
|
-
* @example
|
|
661
|
-
* ```html
|
|
662
|
-
* <eui-card>
|
|
663
|
-
* <eui-card-header>
|
|
664
|
-
* <eui-card-header-title>
|
|
665
|
-
* <strong>Default layout of a card footer</strong>
|
|
666
|
-
* </eui-card-header-title>
|
|
667
|
-
* </eui-card-header>
|
|
668
|
-
*
|
|
669
|
-
* <eui-card-content>
|
|
670
|
-
* <p class="eui-u-text-paragraph">Hover on footer's elements to display more information.</p>
|
|
671
|
-
* </eui-card-content>
|
|
672
|
-
*
|
|
673
|
-
* <eui-card-footer>
|
|
674
|
-
* <eui-card-footer-action-buttons euiTooltip="Here are displayed the main action buttons. It is recommended to have maximum 2 buttons. Primary action button is always displayed first. Other actions will be put in the menu.">
|
|
675
|
-
* <span class="eui-u-cursor-help">Action buttons</span>
|
|
676
|
-
* </eui-card-footer-action-buttons>
|
|
677
|
-
*
|
|
678
|
-
* <eui-card-footer-action-icons euiTooltip="Here are displayed the action icons. It is recommended to have maximum 2 icons. Other actions will be put in the menu.">
|
|
679
|
-
* <span class="eui-u-cursor-help">Action icons</span>
|
|
680
|
-
* </eui-card-footer-action-icons>
|
|
681
|
-
*
|
|
682
|
-
* <eui-card-footer-menu-content [tooltipText]="'Actions menu to propose more options'">
|
|
683
|
-
* <div class="m-2">Menu content here</div>
|
|
684
|
-
* </eui-card-footer-menu-content>
|
|
685
|
-
* </eui-card-footer>
|
|
686
|
-
* </eui-card>
|
|
687
|
-
* ```
|
|
688
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
|
|
689
468
|
*/
|
|
690
469
|
class EuiCardFooterMenuContentComponent {
|
|
691
470
|
constructor() {
|
|
@@ -703,11 +482,11 @@ class EuiCardFooterMenuContentComponent {
|
|
|
703
482
|
this.string = 'eui-card-footer-menu-content';
|
|
704
483
|
}
|
|
705
484
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterMenuContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
706
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EuiCardFooterMenuContentComponent, isStandalone: false, selector: "eui-card-footer-menu-content", inputs: { tooltipText: "tooltipText" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<eui-dropdown>\n <button\n euiButton\n euiRounded\n euiIconButton\n euiBasicButton\n euiSecondary\n type=\"button\"\n euiTooltip=\"{{ tooltipText }}\"\n [attr.aria-label]=\"tooltipText\">\n <eui-icon-svg icon=\"ellipsis-vertical:sharp\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ng-content></ng-content>\n </eui-dropdown-content>\n</eui-dropdown>\n", dependencies: [{ kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3$1.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"], outputs: ["expand"] }, { kind: "directive", type: i3$1.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "directive", type: i4$1.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
485
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EuiCardFooterMenuContentComponent, isStandalone: false, selector: "eui-card-footer-menu-content", inputs: { tooltipText: "tooltipText" }, host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<eui-dropdown>\n <button\n euiButton\n euiRounded\n euiIconButton\n euiBasicButton\n euiSecondary\n type=\"button\"\n euiTooltip=\"{{ tooltipText }}\"\n [attr.aria-label]=\"tooltipText\">\n <eui-icon-svg icon=\"ellipsis-vertical:sharp\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ng-content></ng-content>\n </eui-dropdown-content>\n</eui-dropdown>\n", dependencies: [{ kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i2$2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3$1.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"], outputs: ["expand"] }, { kind: "directive", type: i3$1.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "directive", type: i4$1.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
707
486
|
}
|
|
708
487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterMenuContentComponent, decorators: [{
|
|
709
488
|
type: Component,
|
|
710
|
-
args: [{ selector: 'eui-card-footer-menu-content',
|
|
489
|
+
args: [{ selector: 'eui-card-footer-menu-content', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<eui-dropdown>\n <button\n euiButton\n euiRounded\n euiIconButton\n euiBasicButton\n euiSecondary\n type=\"button\"\n euiTooltip=\"{{ tooltipText }}\"\n [attr.aria-label]=\"tooltipText\">\n <eui-icon-svg icon=\"ellipsis-vertical:sharp\"></eui-icon-svg>\n </button>\n <eui-dropdown-content>\n <ng-content></ng-content>\n </eui-dropdown-content>\n</eui-dropdown>\n" }]
|
|
711
490
|
}], propDecorators: { tooltipText: [{
|
|
712
491
|
type: Input
|
|
713
492
|
}], string: [{
|
|
@@ -718,62 +497,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
718
497
|
/**
|
|
719
498
|
* @description
|
|
720
499
|
* The eui-card-footer-menu component provides menu options for the footer of the eui-card.
|
|
721
|
-
*
|
|
722
|
-
* @example
|
|
723
|
-
* ```html
|
|
724
|
-
* <eui-card>
|
|
725
|
-
* <eui-card-header>
|
|
726
|
-
* <eui-card-header-title>
|
|
727
|
-
* <strong>Sample Card Title</strong>
|
|
728
|
-
* </eui-card-header-title>
|
|
729
|
-
* </eui-card-header>
|
|
730
|
-
*
|
|
731
|
-
* <eui-card-content>
|
|
732
|
-
* <p class="eui-u-text-paragraph">I am the content of the card container with a full default footer's layout.</p>
|
|
733
|
-
* </eui-card-content>
|
|
734
|
-
*
|
|
735
|
-
* <eui-card-footer>
|
|
736
|
-
* <eui-card-footer-action-buttons>
|
|
737
|
-
* <div class="eui-u-flex eui-u-flex-wrap">
|
|
738
|
-
* <button euiButton euiPrimary>Action 1</button>
|
|
739
|
-
* <button euiButton euiSecondary>Action 2</button>
|
|
740
|
-
* </div>
|
|
741
|
-
* </eui-card-footer-action-buttons>
|
|
742
|
-
*
|
|
743
|
-
* <eui-card-footer-action-icons>
|
|
744
|
-
* <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary euiTooltip="Mark as favourite" aria-label="Mark as favourite">
|
|
745
|
-
* <eui-icon-svg icon="eui-star" size="l" fillColor="neutral-lighter"></eui-icon-svg>
|
|
746
|
-
* </button>
|
|
747
|
-
* <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary euiTooltip="Share" aria-label="Share">
|
|
748
|
-
* <eui-icon-svg icon="eui-ecl-share" size="m" fillColor="neutral-lighter"></eui-icon-svg>
|
|
749
|
-
* </button>
|
|
750
|
-
* </eui-card-footer-action-icons>
|
|
751
|
-
*
|
|
752
|
-
* <eui-card-footer-menu>
|
|
753
|
-
* <eui-dropdown>
|
|
754
|
-
* <button
|
|
755
|
-
* euiButton
|
|
756
|
-
* euiRounded
|
|
757
|
-
* euiIconButton
|
|
758
|
-
* euiBasicButton
|
|
759
|
-
* euiSecondary
|
|
760
|
-
* type="button"
|
|
761
|
-
* euiTooltip="more options"
|
|
762
|
-
* [attr.aria-label]="'more options'">
|
|
763
|
-
* <eui-icon-svg icon="ellipsis-vertical:sharp"></eui-icon-svg>
|
|
764
|
-
* </button>
|
|
765
|
-
* <eui-dropdown-content>
|
|
766
|
-
* <button euiDropdownItem>Menu item 1</button>
|
|
767
|
-
* <button euiDropdownItem>Menu item 2</button>
|
|
768
|
-
* <button euiDropdownItem>Menu item 3</button>
|
|
769
|
-
* </eui-dropdown-content>
|
|
770
|
-
* </eui-dropdown>
|
|
771
|
-
* </eui-card-footer-menu>
|
|
772
|
-
*
|
|
773
|
-
* </eui-card-footer>
|
|
774
|
-
* </eui-card>
|
|
775
|
-
* ```
|
|
776
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
|
|
777
500
|
*/
|
|
778
501
|
class EuiCardFooterMenuComponent {
|
|
779
502
|
constructor() {
|
|
@@ -785,14 +508,13 @@ class EuiCardFooterMenuComponent {
|
|
|
785
508
|
this.string = 'eui-card-footer-menu';
|
|
786
509
|
}
|
|
787
510
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
788
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EuiCardFooterMenuComponent, isStandalone: false, selector: "eui-card-footer-menu", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
511
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EuiCardFooterMenuComponent, isStandalone: false, selector: "eui-card-footer-menu", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
789
512
|
}
|
|
790
513
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterMenuComponent, decorators: [{
|
|
791
514
|
type: Component,
|
|
792
515
|
args: [{
|
|
793
516
|
selector: 'eui-card-footer-menu',
|
|
794
517
|
template: '<ng-content/>',
|
|
795
|
-
encapsulation: ViewEncapsulation.None,
|
|
796
518
|
standalone: false,
|
|
797
519
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
798
520
|
}]
|
|
@@ -804,36 +526,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
804
526
|
/**
|
|
805
527
|
* @description
|
|
806
528
|
* The eui-card-footer component projects the footer of the eui-card.
|
|
807
|
-
*
|
|
808
|
-
* @example
|
|
809
|
-
* ```html
|
|
810
|
-
* <eui-card>
|
|
811
|
-
* <eui-card-header>
|
|
812
|
-
* <eui-card-header-title>
|
|
813
|
-
* <strong>Default layout of a card footer</strong>
|
|
814
|
-
* </eui-card-header-title>
|
|
815
|
-
* </eui-card-header>
|
|
816
|
-
*
|
|
817
|
-
* <eui-card-content>
|
|
818
|
-
* <p class="eui-u-text-paragraph">Hover on footer's elements to display more information.</p>
|
|
819
|
-
* </eui-card-content>
|
|
820
|
-
*
|
|
821
|
-
* <eui-card-footer>
|
|
822
|
-
* <eui-card-footer-action-buttons euiTooltip="Here are displayed the main action buttons. It is recommended to have maximum 2 buttons. Primary action button is always displayed first. Other actions will be put in the menu.">
|
|
823
|
-
* <span class="eui-u-cursor-help">Action buttons</span>
|
|
824
|
-
* </eui-card-footer-action-buttons>
|
|
825
|
-
*
|
|
826
|
-
* <eui-card-footer-action-icons euiTooltip="Here are displayed the action icons. It is recommended to have maximum 2 icons. Other actions will be put in the menu.">
|
|
827
|
-
* <span class="eui-u-cursor-help">Action icons</span>
|
|
828
|
-
* </eui-card-footer-action-icons>
|
|
829
|
-
*
|
|
830
|
-
* <eui-card-footer-menu-content [tooltipText]="'Actions menu to propose more options'">
|
|
831
|
-
* <div class="m-2">Menu content here</div>
|
|
832
|
-
* </eui-card-footer-menu-content>
|
|
833
|
-
* </eui-card-footer>
|
|
834
|
-
* </eui-card>
|
|
835
|
-
* ```
|
|
836
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
|
|
837
529
|
*/
|
|
838
530
|
class EuiCardFooterComponent {
|
|
839
531
|
constructor() {
|
|
@@ -845,11 +537,11 @@ class EuiCardFooterComponent {
|
|
|
845
537
|
this.string = 'eui-card-footer';
|
|
846
538
|
}
|
|
847
539
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
848
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EuiCardFooterComponent, isStandalone: false, selector: "eui-card-footer", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "actionButtons", first: true, predicate: i0.forwardRef(() => EuiCardFooterActionButtonsComponent), descendants: true }, { propertyName: "actionIcons", first: true, predicate: i0.forwardRef(() => EuiCardFooterActionIconsComponent), descendants: true }, { propertyName: "actionMenu", first: true, predicate: i0.forwardRef(() => EuiCardFooterMenuContentComponent), descendants: true }, { propertyName: "actionMenuWrapper", first: true, predicate: i0.forwardRef(() => EuiCardFooterMenuComponent), descendants: true }], ngImport: i0, template: "<div class=\"eui-card-footer-container\">\n <div class=\"eui-card-footer-actions\" *ngIf=\"actionButtons || actionIcons || actionMenu || actionMenuWrapper\">\n <ng-content *ngIf=\"actionButtons\" select=\"eui-card-footer-action-buttons\"></ng-content>\n <div *ngIf=\"actionIcons || actionMenu\" class=\"eui-card-footer-actions__icons-container\">\n <ng-content *ngIf=\"actionIcons\" select=\"eui-card-footer-action-icons\"></ng-content>\n <ng-content *ngIf=\"actionMenu\" select=\"eui-card-footer-menu-content\"></ng-content>\n <ng-content *ngIf=\"actionMenuWrapper\" select=\"eui-card-footer-menu\"></ng-content>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
540
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: EuiCardFooterComponent, isStandalone: false, selector: "eui-card-footer", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "actionButtons", first: true, predicate: i0.forwardRef(() => EuiCardFooterActionButtonsComponent), descendants: true }, { propertyName: "actionIcons", first: true, predicate: i0.forwardRef(() => EuiCardFooterActionIconsComponent), descendants: true }, { propertyName: "actionMenu", first: true, predicate: i0.forwardRef(() => EuiCardFooterMenuContentComponent), descendants: true }, { propertyName: "actionMenuWrapper", first: true, predicate: i0.forwardRef(() => EuiCardFooterMenuComponent), descendants: true }], ngImport: i0, template: "<div class=\"eui-card-footer-container\">\n <div class=\"eui-card-footer-actions\" *ngIf=\"actionButtons || actionIcons || actionMenu || actionMenuWrapper\">\n <ng-content *ngIf=\"actionButtons\" select=\"eui-card-footer-action-buttons\"></ng-content>\n <div *ngIf=\"actionIcons || actionMenu\" class=\"eui-card-footer-actions__icons-container\">\n <ng-content *ngIf=\"actionIcons\" select=\"eui-card-footer-action-icons\"></ng-content>\n <ng-content *ngIf=\"actionMenu\" select=\"eui-card-footer-menu-content\"></ng-content>\n <ng-content *ngIf=\"actionMenuWrapper\" select=\"eui-card-footer-menu\"></ng-content>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
849
541
|
}
|
|
850
542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterComponent, decorators: [{
|
|
851
543
|
type: Component,
|
|
852
|
-
args: [{ selector: 'eui-card-footer',
|
|
544
|
+
args: [{ selector: 'eui-card-footer', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"eui-card-footer-container\">\n <div class=\"eui-card-footer-actions\" *ngIf=\"actionButtons || actionIcons || actionMenu || actionMenuWrapper\">\n <ng-content *ngIf=\"actionButtons\" select=\"eui-card-footer-action-buttons\"></ng-content>\n <div *ngIf=\"actionIcons || actionMenu\" class=\"eui-card-footer-actions__icons-container\">\n <ng-content *ngIf=\"actionIcons\" select=\"eui-card-footer-action-icons\"></ng-content>\n <ng-content *ngIf=\"actionMenu\" select=\"eui-card-footer-menu-content\"></ng-content>\n <ng-content *ngIf=\"actionMenuWrapper\" select=\"eui-card-footer-menu\"></ng-content>\n </div>\n </div>\n</div>\n" }]
|
|
853
545
|
}], propDecorators: { string: [{
|
|
854
546
|
type: HostBinding,
|
|
855
547
|
args: ['class']
|
|
@@ -870,24 +562,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
870
562
|
/**
|
|
871
563
|
* @description
|
|
872
564
|
* The eui-card component is based on Material Design and provides a content container for text, photos and actions in the context of a single subject.
|
|
873
|
-
*
|
|
874
|
-
* @example
|
|
875
|
-
* ```html
|
|
876
|
-
* <eui-card>
|
|
877
|
-
* <eui-card-header>
|
|
878
|
-
* <eui-card-header-title>
|
|
879
|
-
* {{ cardTitle }}
|
|
880
|
-
* </eui-card-header-title>
|
|
881
|
-
* <eui-card-header-subtitle>
|
|
882
|
-
* {{ cardSubtitle }}
|
|
883
|
-
* </eui-card-header-subtitle>
|
|
884
|
-
* </eui-card-header>
|
|
885
|
-
* <eui-card-content>
|
|
886
|
-
* I am the content of the card container...
|
|
887
|
-
* </eui-card-content>
|
|
888
|
-
* </eui-card>
|
|
889
|
-
* ```
|
|
890
|
-
* See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card}.
|
|
891
565
|
*/
|
|
892
566
|
class EuiCardComponent {
|
|
893
567
|
constructor() {
|