@eui/components 19.2.3-snapshot-1747676600502 → 19.2.4-snapshot-1747726109384

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.
Files changed (16) hide show
  1. package/docs/components/EuiContentCardComponent.html +237 -5
  2. package/docs/components/EuiContentCardHeaderComponent.html +37 -1
  3. package/docs/components/EuiContentCardHeaderEndComponent.html +91 -4
  4. package/docs/dependencies.html +2 -2
  5. package/docs/js/search/search_index.js +2 -2
  6. package/eui-content-card/eui-content-card-header/eui-content-card-header-end.d.ts +3 -0
  7. package/eui-content-card/eui-content-card-header/eui-content-card-header-end.d.ts.map +1 -1
  8. package/eui-content-card/eui-content-card-header/eui-content-card-header.component.d.ts +4 -1
  9. package/eui-content-card/eui-content-card-header/eui-content-card-header.component.d.ts.map +1 -1
  10. package/eui-content-card/eui-content-card.component.d.ts +35 -5
  11. package/eui-content-card/eui-content-card.component.d.ts.map +1 -1
  12. package/fesm2022/eui-components-eui-content-card.mjs +161 -101
  13. package/fesm2022/eui-components-eui-content-card.mjs.map +1 -1
  14. package/fesm2022/eui-components-eui-icon-toggle.mjs +2 -2
  15. package/fesm2022/eui-components-eui-icon-toggle.mjs.map +1 -1
  16. package/package.json +3 -3
package/eui-content-card/eui-content-card-header/eui-content-card-header-end.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { EuiContentCardComponent } from '../eui-content-card.component';
1
2
  import * as i0 from "@angular/core";
2
3
  /**
3
4
  * @description
@@ -10,6 +11,8 @@ export declare class EuiContentCardHeaderEndComponent {
10
11
  * @default 'eui-content-card-header-end'
11
12
  */
12
13
  string: string;
14
+ protected euiContentCardParent: EuiContentCardComponent;
15
+ onToggle(event: boolean): void;
13
16
  static ɵfac: i0.ɵɵFactoryDeclaration<EuiContentCardHeaderEndComponent, never>;
14
17
  static ɵcmp: i0.ɵɵComponentDeclaration<EuiContentCardHeaderEndComponent, "eui-content-card-header-end", never, {}, {}, never, ["*"], true, never>;
15
18
  }
package/eui-content-card/eui-content-card-header/eui-content-card-header-end.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"eui-content-card-header-end.d.ts","sourceRoot":"","sources":["../../../eui-content-card/eui-content-card-header/eui-content-card-header-end.ts"],"names":[],"mappings":";AAEA;;;GAGG;AACH,qBAMa,gCAAgC;IACzC;;;;OAIG;IACmB,MAAM,SAAiC;yCANpD,gCAAgC;2CAAhC,gCAAgC;CAO5C"}
1
+ {"version":3,"file":"eui-content-card-header-end.d.ts","sourceRoot":"","sources":["../../../eui-content-card/eui-content-card-header/eui-content-card-header-end.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;;AAIxE;;;GAGG;AACH,qBAUa,gCAAgC;IACzC;;;;OAIG;IACmB,MAAM,SAAiC;IAE7D,SAAS,CAAC,oBAAoB,EAAE,uBAAuB,CAAqF;IAE5I,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;yCAVrB,gCAAgC;2CAAhC,gCAAgC;CAa5C"}
package/eui-content-card/eui-content-card-header/eui-content-card-header.component.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { QueryList } from '@angular/core';
1
2
  import { EuiContentCardComponent } from '../eui-content-card.component';
3
+ import { EuiContentCardHeaderStartComponent } from './eui-content-card-header-start';
2
4
  import * as i0 from "@angular/core";
3
5
  /**
4
6
  * @description
@@ -12,8 +14,9 @@ export declare class EuiContentCardHeaderComponent {
12
14
  */
13
15
  string: string;
14
16
  protected euiCardContentParent: EuiContentCardComponent;
17
+ headerStartComponent: QueryList<EuiContentCardHeaderStartComponent>;
15
18
  protected onToggle(): void;
16
19
  static ɵfac: i0.ɵɵFactoryDeclaration<EuiContentCardHeaderComponent, never>;
17
- static ɵcmp: i0.ɵɵComponentDeclaration<EuiContentCardHeaderComponent, "eui-content-card-header", never, {}, {}, never, ["eui-content-card-header-start", "eui-content-card-header-end", "eui-content-card-header-title", "eui-content-card-header-subtitle", "eui-content-card-header-metadata", "eui-content-card-header-submetadata"], true, never>;
20
+ static ɵcmp: i0.ɵɵComponentDeclaration<EuiContentCardHeaderComponent, "eui-content-card-header", never, {}, {}, ["headerStartComponent"], ["eui-content-card-header-start", "*", "*", "*", "*", "eui-content-card-header-subtitle", "eui-content-card-header-metadata", "eui-content-card-header-submetadata", "eui-content-card-header-end", "eui-content-card-header-title"], true, never>;
18
21
  }
19
22
  //# sourceMappingURL=eui-content-card-header.component.d.ts.map
package/eui-content-card/eui-content-card-header/eui-content-card-header.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"eui-content-card-header.component.d.ts","sourceRoot":"","sources":["../../../eui-content-card/eui-content-card-header/eui-content-card-header.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;;AAExE;;;GAGG;AACH,qBASa,6BAA6B;IACtC;;;;OAIG;IACmB,MAAM,SAA6B;IAEzD,SAAS,CAAC,oBAAoB,EAAE,uBAAuB,CAAqF;IAE5I,SAAS,CAAC,QAAQ,IAAI,IAAI;yCAVjB,6BAA6B;2CAA7B,6BAA6B;CAezC"}
1
+ {"version":3,"file":"eui-content-card-header.component.d.ts","sourceRoot":"","sources":["../../../eui-content-card/eui-content-card-header/eui-content-card-header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqF,SAAS,EAAE,MAAM,eAAe,CAAC;AAC7H,OAAO,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAExE,OAAO,EAAE,kCAAkC,EAAE,MAAM,iCAAiC,CAAC;;AAErF;;;GAGG;AACH,qBAUa,6BAA6B;IACtC;;;;OAIG;IACmB,MAAM,SAA6B;IAEzD,SAAS,CAAC,oBAAoB,EAAE,uBAAuB,CAAqF;IAErD,oBAAoB,EAAE,SAAS,CAAC,kCAAkC,CAAC,CAAC;IAE3J,SAAS,CAAC,QAAQ,IAAI,IAAI;yCAZjB,6BAA6B;2CAA7B,6BAA6B;CAezC"}
package/eui-content-card/eui-content-card.component.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { EventEmitter } from '@angular/core';
1
2
  import * as i0 from "@angular/core";
2
3
  import * as i1 from "@eui/components/shared";
3
4
  /**
@@ -19,35 +20,64 @@ export declare class EuiContentCardComponent {
19
20
  */
20
21
  e2eAttr: string;
21
22
  /**
22
- * Sets the `euiSelected` attribute in order to show the card header as selected.
23
+ * Sets the `isSelected` attribute in order to show the card header as selected.
23
24
  *
24
25
  * @default false
25
26
  */
26
27
  isSelected: boolean;
27
28
  /**
28
- * Sets the `euiSelected` attribute in order to show the card header checkbox for selection
29
+ * Sets the `isSelectable` attribute in order to show the card header checkbox for selection
29
30
  *
30
31
  * @default false
31
32
  */
32
33
  isSelectable: boolean;
33
34
  /**
34
- * Sets the `euiCollapsible` attribute which shows the collapsible toggle in the header.
35
+ * Sets the `isCollapsible` attribute which shows the collapsible toggle in the header.
35
36
  *
36
37
  * @default false
37
38
  */
38
39
  isCollapsible: boolean;
39
40
  /**
40
- * Sets the `euiCollapsed` attribute which collapses the card content.
41
+ * Sets the `isCollapsed` attribute which collapses the card content.
41
42
  *
42
43
  * @default false
43
44
  */
44
45
  isCollapsed: boolean;
46
+ /**
47
+ * Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.
48
+ *
49
+ * @default false
50
+ */
51
+ isBookmarkable: boolean;
52
+ /**
53
+ * Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.
54
+ *
55
+ * @default false
56
+ */
57
+ isBookmarked: boolean;
58
+ /**
59
+ * Event emitted when the card is selected.
60
+ */
61
+ cardSelect: EventEmitter<boolean>;
62
+ /**
63
+ * Event emitted when the card is bookmarked.
64
+ */
65
+ cardBookmark: EventEmitter<boolean>;
66
+ /**
67
+ * Event emitted when the card is bookmarked.
68
+ */
69
+ cardCollapse: EventEmitter<boolean>;
45
70
  private baseStatesDirective;
71
+ toggleCollapse(): void;
72
+ toggleBookmark(): void;
73
+ protected onSelect(event: Event): void;
46
74
  static ɵfac: i0.ɵɵFactoryDeclaration<EuiContentCardComponent, never>;
47
- static ɵcmp: i0.ɵɵComponentDeclaration<EuiContentCardComponent, "eui-content-card", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; "isSelectable": { "alias": "isSelectable"; "required": false; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; }; }, {}, never, ["eui-content-card-media", "eui-content-card-header", "eui-content-card-body", "eui-content-card-footer"], true, [{ directive: typeof i1.BaseStatesDirective; inputs: {}; outputs: {}; }]>;
75
+ static ɵcmp: i0.ɵɵComponentDeclaration<EuiContentCardComponent, "eui-content-card", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; "isSelectable": { "alias": "isSelectable"; "required": false; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; }; "isBookmarkable": { "alias": "isBookmarkable"; "required": false; }; "isBookmarked": { "alias": "isBookmarked"; "required": false; }; }, { "cardSelect": "cardSelect"; "cardBookmark": "cardBookmark"; "cardCollapse": "cardCollapse"; }, never, ["eui-content-card-media", "eui-content-card-header", "eui-content-card-body", "eui-content-card-footer"], true, [{ directive: typeof i1.BaseStatesDirective; inputs: {}; outputs: {}; }]>;
48
76
  static ngAcceptInputType_isSelected: unknown;
49
77
  static ngAcceptInputType_isSelectable: unknown;
50
78
  static ngAcceptInputType_isCollapsible: unknown;
51
79
  static ngAcceptInputType_isCollapsed: unknown;
80
+ static ngAcceptInputType_isBookmarkable: unknown;
81
+ static ngAcceptInputType_isBookmarked: unknown;
52
82
  }
53
83
  //# sourceMappingURL=eui-content-card.component.d.ts.map
package/eui-content-card/eui-content-card.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"eui-content-card.component.d.ts","sourceRoot":"","sources":["../../eui-content-card/eui-content-card.component.ts"],"names":[],"mappings":";;AAaA;;;GAGG;AACH,qBAea,uBAAuB;IAChC;;;;;OAKG;IACH,IACI,UAAU,IAAI,MAAM,CAUvB;IACD;;;;OAIG;IACoC,OAAO,SAAsB;IACpE;;;;OAIG;IACqC,UAAU,UAAS;IAC3D;;;;OAIG;IACqC,YAAY,UAAS;IAC7D;;;;OAIG;IACqC,aAAa,UAAS;IAC9D;;;;OAIG;IACqC,WAAW,UAAS;IAE5D,OAAO,CAAC,mBAAmB,CAAoD;yCAlDtE,uBAAuB;2CAAvB,uBAAuB;yCAoDi/6c,OAAQ;2CAAR,OAAQ;4CAAR,OAAQ;0CAAR,OAAQ;CAD5h7c"}
1
+ {"version":3,"file":"eui-content-card.component.d.ts","sourceRoot":"","sources":["../../eui-content-card/eui-content-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAQH,YAAY,EACf,MAAM,eAAe,CAAC;;;AAMvB;;;GAGG;AACH,qBAea,uBAAuB;IAChC;;;;;OAKG;IACH,IACI,UAAU,IAAI,MAAM,CAUvB;IACD;;;;OAIG;IACoC,OAAO,SAAsB;IACpE;;;;OAIG;IACqC,UAAU,UAAS;IAC3D;;;;OAIG;IACqC,YAAY,UAAS;IAC7D;;;;OAIG;IACqC,aAAa,UAAS;IAC9D;;;;OAIG;IACqC,WAAW,UAAS;IAC5D;;;;OAIG;IACqC,cAAc,UAAS;IAC/D;;;;OAIG;IACqC,YAAY,UAAS;IAE7D;;OAEG;IACO,UAAU,wBAA+B;IACnD;;OAEG;IACO,YAAY,wBAA+B;IACrD;;OAEG;IACO,YAAY,wBAA+B;IAErD,OAAO,CAAC,mBAAmB,CAAoD;IAE/E,cAAc,IAAI,IAAI;IAItB,cAAc,IAAI,IAAI;IAKtB,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;yCAtF7B,uBAAuB;2CAAvB,uBAAuB;yCA0F0z4c,OAAQ;2CAAR,OAAQ;4CAAR,OAAQ;0CAAR,OAAQ;6CAAR,OAAQ;2CAAR,OAAQ;CADr24c"}
package/fesm2022/eui-components-eui-content-card.mjs CHANGED
@@ -1,13 +1,17 @@
1
1
  import * as i0 from '@angular/core';
2
- import { HostBinding, ChangeDetectionStrategy, Component, inject, booleanAttribute, Input, forwardRef } from '@angular/core';
2
+ import { HostBinding, ChangeDetectionStrategy, Component, EventEmitter, inject, booleanAttribute, Output, Input, forwardRef, ContentChild } from '@angular/core';
3
3
  import * as i2 from '@angular/forms';
4
4
  import { FormsModule } from '@angular/forms';
5
5
  import * as i3 from '@eui/components/eui-input-checkbox';
6
6
  import { EUI_INPUT_CHECKBOX } from '@eui/components/eui-input-checkbox';
7
7
  import * as i1 from '@eui/components/shared';
8
8
  import { BaseStatesDirective } from '@eui/components/shared';
9
- import * as i1$1 from '@eui/components/eui-icon-button-expander';
9
+ import * as i1$1 from '@eui/components/eui-icon-toggle';
10
+ import { EUI_ICON_TOGGLE } from '@eui/components/eui-icon-toggle';
11
+ import { EUI_BUTTON } from '@eui/components/eui-button';
12
+ import * as i1$2 from '@eui/components/eui-icon-button-expander';
10
13
  import { EUI_ICON_BUTTON_EXPANDER } from '@eui/components/eui-icon-button-expander';
14
+ import { NgTemplateOutlet } from '@angular/common';
11
15
 
12
16
  /**
13
17
  * @description
@@ -71,11 +75,11 @@ class EuiContentCardFooterComponent {
71
75
  this.string = 'eui-content-card-footer';
72
76
  }
73
77
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
74
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: EuiContentCardFooterComponent, isStandalone: true, selector: "eui-content-card-footer", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-content-card :host{display:flex;padding:var(--eui-s-xs) var(--eui-s-m) var(--eui-s-m) var(--eui-s-m)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
78
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: EuiContentCardFooterComponent, isStandalone: true, selector: "eui-content-card-footer", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-content-card :host{display:flex;border-top:1px solid var(--eui-c-divider);padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-m) var(--eui-s-m)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
75
79
  }
76
80
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardFooterComponent, decorators: [{
77
81
  type: Component,
78
- args: [{ selector: 'eui-content-card-footer', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 .eui-content-card :host{display:flex;padding:var(--eui-s-xs) var(--eui-s-m) var(--eui-s-m) var(--eui-s-m)}\n"] }]
82
+ args: [{ selector: 'eui-content-card-footer', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 .eui-content-card :host{display:flex;border-top:1px solid var(--eui-c-divider);padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-m) var(--eui-s-m)}\n"] }]
79
83
  }], propDecorators: { string: [{
80
84
  type: HostBinding,
81
85
  args: ['class']
@@ -105,6 +109,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
105
109
  args: ['class']
106
110
  }] } });
107
111
 
112
+ /**
113
+ * @description
114
+ * 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.
115
+ */
116
+ class EuiContentCardComponent {
117
+ constructor() {
118
+ /**
119
+ * Sets the `data-e2e` attribute at the host element.
120
+ *
121
+ * @default 'eui-card'
122
+ */
123
+ this.e2eAttr = 'eui-content-card';
124
+ /**
125
+ * Sets the `isSelected` attribute in order to show the card header as selected.
126
+ *
127
+ * @default false
128
+ */
129
+ this.isSelected = false;
130
+ /**
131
+ * Sets the `isSelectable` attribute in order to show the card header checkbox for selection
132
+ *
133
+ * @default false
134
+ */
135
+ this.isSelectable = false;
136
+ /**
137
+ * Sets the `isCollapsible` attribute which shows the collapsible toggle in the header.
138
+ *
139
+ * @default false
140
+ */
141
+ this.isCollapsible = false;
142
+ /**
143
+ * Sets the `isCollapsed` attribute which collapses the card content.
144
+ *
145
+ * @default false
146
+ */
147
+ this.isCollapsed = false;
148
+ /**
149
+ * Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.
150
+ *
151
+ * @default false
152
+ */
153
+ this.isBookmarkable = false;
154
+ /**
155
+ * Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.
156
+ *
157
+ * @default false
158
+ */
159
+ this.isBookmarked = false;
160
+ /**
161
+ * Event emitted when the card is selected.
162
+ */
163
+ this.cardSelect = new EventEmitter();
164
+ /**
165
+ * Event emitted when the card is bookmarked.
166
+ */
167
+ this.cardBookmark = new EventEmitter();
168
+ /**
169
+ * Event emitted when the card is bookmarked.
170
+ */
171
+ this.cardCollapse = new EventEmitter();
172
+ this.baseStatesDirective = inject(BaseStatesDirective);
173
+ }
174
+ /**
175
+ * @description
176
+ * Computes and returns the CSS classes for the component based on its current state.
177
+ *
178
+ * @returns {string} Space-separated string of CSS class names
179
+ */
180
+ get cssClasses() {
181
+ return [
182
+ this.baseStatesDirective.getCssClasses('eui-content-card'),
183
+ this.isCollapsible ? 'eui-content-card--collapsible' : '',
184
+ this.isCollapsed ? 'eui-content-card--collapsed' : '',
185
+ this.isSelectable ? 'eui-content-card--selectable' : '',
186
+ this.isSelected ? 'eui-content-card--selected' : '',
187
+ ]
188
+ .join(' ')
189
+ .trim();
190
+ }
191
+ toggleCollapse() {
192
+ this.isCollapsed = !this.isCollapsed;
193
+ this.cardCollapse.emit(this.isCollapsed);
194
+ }
195
+ toggleBookmark() {
196
+ this.isBookmarked = !this.isBookmarked;
197
+ this.cardBookmark.emit(this.isBookmarked);
198
+ }
199
+ onSelect(event) {
200
+ this.cardSelect.emit(this.isSelected);
201
+ }
202
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
203
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiContentCardComponent, isStandalone: true, selector: "eui-content-card", inputs: { e2eAttr: "e2eAttr", isSelected: ["isSelected", "isSelected", booleanAttribute], isSelectable: ["isSelectable", "isSelectable", booleanAttribute], isCollapsible: ["isCollapsible", "isCollapsible", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute], isBookmarkable: ["isBookmarkable", "isBookmarkable", booleanAttribute], isBookmarked: ["isBookmarked", "isBookmarked", booleanAttribute] }, outputs: { cardSelect: "cardSelect", cardBookmark: "cardBookmark", cardCollapse: "cardCollapse" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective }], ngImport: i0, template: "<div class=\"eui-content-card-wrapper\">\n @if (isSelectable) {\n <div class=\"eui-content-card-selectable-wrapper\">\n <input euiInputCheckBox [(ngModel)]=\"isSelected\" (change)=\"onSelect($event)\"/>\n </div>\n }\n\n <ng-content select=\"eui-content-card-media\"/>\n\n <div class=\"eui-content-card-header-body-wrapper\">\n <ng-content select=\"eui-content-card-header\"/>\n\n <div class=\"eui-content-card-body-wrapper\">\n <ng-content select=\"eui-content-card-body\"/>\n </div>\n </div>\n</div>\n\n<ng-content select=\"eui-content-card-footer\"/>\n", styles: [".eui-19.eui-t-ds2025 :host.eui-content-card{--_body-font: var(--eui-f-body-m-regular);--_title-font: var(--eui-f-body-l-semi-bold);--_subtitle-font: var(--eui-f-title-2xs-medium)}.eui-19 :host.eui-content-card{--_body-font: var(--eui-f-m);--_title-font: var(--eui-f-l);--_subtitle-font: var(--eui-f-m)}.eui-19 :host.eui-content-card{border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-br-m);box-shadow:var(--eui-sh-card);display:flex;flex-direction:column;height:auto;padding:0;position:relative;width:100%;font:var(--_content-font)}.eui-19 :host.eui-content-card .eui-content-card-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m);gap:var(--eui-s-m)}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-selectable-wrapper ::ng-deep .eui-input-checkbox{margin-right:0}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-header-body-wrapper{display:flex;flex-direction:column;width:100%}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-body-wrapper{display:flex;width:100%}.eui-19 :host.eui-content-card.eui-content-card--selected{border-color:var(--eui-c-s-primary-border)}.eui-19 :host.eui-content-card.eui-content-card--collapsed .eui-content-card-body-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
204
+ }
205
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardComponent, decorators: [{
206
+ type: Component,
207
+ args: [{ selector: 'eui-content-card', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
208
+ {
209
+ directive: BaseStatesDirective,
210
+ },
211
+ ], imports: [
212
+ FormsModule,
213
+ ...EUI_INPUT_CHECKBOX,
214
+ ], template: "<div class=\"eui-content-card-wrapper\">\n @if (isSelectable) {\n <div class=\"eui-content-card-selectable-wrapper\">\n <input euiInputCheckBox [(ngModel)]=\"isSelected\" (change)=\"onSelect($event)\"/>\n </div>\n }\n\n <ng-content select=\"eui-content-card-media\"/>\n\n <div class=\"eui-content-card-header-body-wrapper\">\n <ng-content select=\"eui-content-card-header\"/>\n\n <div class=\"eui-content-card-body-wrapper\">\n <ng-content select=\"eui-content-card-body\"/>\n </div>\n </div>\n</div>\n\n<ng-content select=\"eui-content-card-footer\"/>\n", styles: [".eui-19.eui-t-ds2025 :host.eui-content-card{--_body-font: var(--eui-f-body-m-regular);--_title-font: var(--eui-f-body-l-semi-bold);--_subtitle-font: var(--eui-f-title-2xs-medium)}.eui-19 :host.eui-content-card{--_body-font: var(--eui-f-m);--_title-font: var(--eui-f-l);--_subtitle-font: var(--eui-f-m)}.eui-19 :host.eui-content-card{border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-br-m);box-shadow:var(--eui-sh-card);display:flex;flex-direction:column;height:auto;padding:0;position:relative;width:100%;font:var(--_content-font)}.eui-19 :host.eui-content-card .eui-content-card-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m);gap:var(--eui-s-m)}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-selectable-wrapper ::ng-deep .eui-input-checkbox{margin-right:0}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-header-body-wrapper{display:flex;flex-direction:column;width:100%}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-body-wrapper{display:flex;width:100%}.eui-19 :host.eui-content-card.eui-content-card--selected{border-color:var(--eui-c-s-primary-border)}.eui-19 :host.eui-content-card.eui-content-card--collapsed .eui-content-card-body-wrapper{display:none!important}\n"] }]
215
+ }], propDecorators: { cssClasses: [{
216
+ type: HostBinding,
217
+ args: ['class']
218
+ }], e2eAttr: [{
219
+ type: HostBinding,
220
+ args: ['attr.data-e2e']
221
+ }, {
222
+ type: Input
223
+ }], isSelected: [{
224
+ type: Input,
225
+ args: [{ transform: booleanAttribute }]
226
+ }], isSelectable: [{
227
+ type: Input,
228
+ args: [{ transform: booleanAttribute }]
229
+ }], isCollapsible: [{
230
+ type: Input,
231
+ args: [{ transform: booleanAttribute }]
232
+ }], isCollapsed: [{
233
+ type: Input,
234
+ args: [{ transform: booleanAttribute }]
235
+ }], isBookmarkable: [{
236
+ type: Input,
237
+ args: [{ transform: booleanAttribute }]
238
+ }], isBookmarked: [{
239
+ type: Input,
240
+ args: [{ transform: booleanAttribute }]
241
+ }], cardSelect: [{
242
+ type: Output
243
+ }], cardBookmark: [{
244
+ type: Output
245
+ }], cardCollapse: [{
246
+ type: Output
247
+ }] } });
248
+
108
249
  /**
109
250
  * @description
110
251
  * The eui-content-card component projects the content for eui-card.
@@ -117,13 +258,20 @@ class EuiContentCardHeaderEndComponent {
117
258
  * @default 'eui-content-card-header-end'
118
259
  */
119
260
  this.string = 'eui-content-card-header-end';
261
+ this.euiContentCardParent = inject(forwardRef(() => EuiContentCardComponent), { optional: true, host: true });
262
+ }
263
+ onToggle(event) {
264
+ this.euiContentCardParent.toggleBookmark();
120
265
  }
121
266
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardHeaderEndComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
122
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: EuiContentCardHeaderEndComponent, isStandalone: true, selector: "eui-content-card-header-end", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".eui-19 .eui-content-card :host{display:flex;margin-left:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
267
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiContentCardHeaderEndComponent, isStandalone: true, selector: "eui-content-card-header-end", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<ng-content/>\n\n@if (euiContentCardParent.isBookmarkable) {\n <div class=\"eui-content-card-header-end-bookmarkable-wrapper\">\n <eui-icon-toggle\n iconSvgFillColorOff=\"primary\" \n iconSvgFillColorOn=\"primary\" \n iconSvgNameOn=\"bookmark-simple:phosphor-fill\" \n iconSvgNameOff=\"bookmark-simple:phosphor-light\"\n [isChecked]=\"euiContentCardParent.isBookmarked\" \n (toggle)=\"onToggle($event)\"/>\n </div>\n}", styles: [".eui-19 .eui-content-card :host{display:flex;margin-left:auto;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$1.EuiIconToggleComponent, selector: "eui-icon-toggle", inputs: ["keyboardAccessKey", "isChecked", "isReadOnly", "e2eAttr", "id", "tabindex", "ariaLabel", "iconSvgSize", "iconSvgNameOn", "iconSvgNameOff", "iconSvgFillColorOn", "iconSvgFillColorOff"], outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
123
268
  }
124
269
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardHeaderEndComponent, decorators: [{
125
270
  type: Component,
126
- args: [{ selector: 'eui-content-card-header-end', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 .eui-content-card :host{display:flex;margin-left:auto}\n"] }]
271
+ args: [{ selector: 'eui-content-card-header-end', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
272
+ ...EUI_ICON_TOGGLE,
273
+ ...EUI_BUTTON,
274
+ ], template: "<ng-content/>\n\n@if (euiContentCardParent.isBookmarkable) {\n <div class=\"eui-content-card-header-end-bookmarkable-wrapper\">\n <eui-icon-toggle\n iconSvgFillColorOff=\"primary\" \n iconSvgFillColorOn=\"primary\" \n iconSvgNameOn=\"bookmark-simple:phosphor-fill\" \n iconSvgNameOff=\"bookmark-simple:phosphor-light\"\n [isChecked]=\"euiContentCardParent.isBookmarked\" \n (toggle)=\"onToggle($event)\"/>\n </div>\n}", styles: [".eui-19 .eui-content-card :host{display:flex;margin-left:auto;align-items:center}\n"] }]
127
275
  }], propDecorators: { string: [{
128
276
  type: HostBinding,
129
277
  args: ['class']
@@ -225,96 +373,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
225
373
  args: ['class']
226
374
  }] } });
227
375
 
228
- /**
229
- * @description
230
- * 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.
231
- */
232
- class EuiContentCardComponent {
233
- constructor() {
234
- /**
235
- * Sets the `data-e2e` attribute at the host element.
236
- *
237
- * @default 'eui-card'
238
- */
239
- this.e2eAttr = 'eui-content-card';
240
- /**
241
- * Sets the `euiSelected` attribute in order to show the card header as selected.
242
- *
243
- * @default false
244
- */
245
- this.isSelected = false;
246
- /**
247
- * Sets the `euiSelected` attribute in order to show the card header checkbox for selection
248
- *
249
- * @default false
250
- */
251
- this.isSelectable = false;
252
- /**
253
- * Sets the `euiCollapsible` attribute which shows the collapsible toggle in the header.
254
- *
255
- * @default false
256
- */
257
- this.isCollapsible = false;
258
- /**
259
- * Sets the `euiCollapsed` attribute which collapses the card content.
260
- *
261
- * @default false
262
- */
263
- this.isCollapsed = false;
264
- this.baseStatesDirective = inject(BaseStatesDirective);
265
- }
266
- /**
267
- * @description
268
- * Computes and returns the CSS classes for the component based on its current state.
269
- *
270
- * @returns {string} Space-separated string of CSS class names
271
- */
272
- get cssClasses() {
273
- return [
274
- this.baseStatesDirective.getCssClasses('eui-content-card'),
275
- this.isCollapsible ? 'eui-content-card--collapsible' : '',
276
- this.isCollapsed ? 'eui-content-card--collapsed' : '',
277
- this.isSelectable ? 'eui-content-card--selectable' : '',
278
- this.isSelected ? 'eui-content-card--selected' : '',
279
- ]
280
- .join(' ')
281
- .trim();
282
- }
283
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
284
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiContentCardComponent, isStandalone: true, selector: "eui-content-card", inputs: { e2eAttr: "e2eAttr", isSelected: ["isSelected", "isSelected", booleanAttribute], isSelectable: ["isSelectable", "isSelectable", booleanAttribute], isCollapsible: ["isCollapsible", "isCollapsible", booleanAttribute], isCollapsed: ["isCollapsed", "isCollapsed", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective }], ngImport: i0, template: "<div class=\"eui-content-card-wrapper\">\n @if (isSelectable) {\n <div class=\"eui-content-card-selectable-wrapper\">\n <input euiInputCheckBox [(ngModel)]=\"isSelected\"/>\n </div>\n }\n\n <ng-content select=\"eui-content-card-media\"/>\n\n <div class=\"eui-content-card-header-body-wrapper\">\n <ng-content select=\"eui-content-card-header\"/>\n\n <div class=\"eui-content-card-body-wrapper\">\n <ng-content select=\"eui-content-card-body\"/>\n </div>\n </div>\n</div>\n\n<hr class=\"eui-u-hr\"/>\n\n<ng-content select=\"eui-content-card-footer\"/>\n", styles: [".eui-19.eui-t-ds2025 :host.eui-content-card{--_body-font: var(--eui-f-body-m-regular);--_title-font: var(--eui-f-body-l-semi-bold);--_subtitle-font: var(--eui-f-title-2xs-medium)}.eui-19 :host.eui-content-card{--_body-font: var(--eui-f-m);--_title-font: var(--eui-f-l);--_subtitle-font: var(--eui-f-m)}.eui-19 :host.eui-content-card{border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-br-m);box-shadow:var(--eui-sh-card);display:flex;flex-direction:column;height:auto;padding:0;position:relative;width:100%;font:var(--_content-font)}.eui-19 :host.eui-content-card .eui-content-card-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m);gap:var(--eui-s-m)}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-selectable-wrapper{padding-top:var(--eui-s-xs)}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-selectable-wrapper ::ng-deep .eui-input-checkbox{margin-right:0}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-header-body-wrapper{display:flex;flex-direction:column;width:100%}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-body-wrapper{display:flex;width:100%}.eui-19 :host.eui-content-card.eui-content-card--selected{border-color:var(--eui-c-s-primary-border)}.eui-19 :host.eui-content-card.eui-content-card--collapsed .eui-content-card-body-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "checked"], outputs: ["indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
285
- }
286
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardComponent, decorators: [{
287
- type: Component,
288
- args: [{ selector: 'eui-content-card', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
289
- {
290
- directive: BaseStatesDirective,
291
- },
292
- ], imports: [
293
- FormsModule,
294
- ...EUI_INPUT_CHECKBOX,
295
- ], template: "<div class=\"eui-content-card-wrapper\">\n @if (isSelectable) {\n <div class=\"eui-content-card-selectable-wrapper\">\n <input euiInputCheckBox [(ngModel)]=\"isSelected\"/>\n </div>\n }\n\n <ng-content select=\"eui-content-card-media\"/>\n\n <div class=\"eui-content-card-header-body-wrapper\">\n <ng-content select=\"eui-content-card-header\"/>\n\n <div class=\"eui-content-card-body-wrapper\">\n <ng-content select=\"eui-content-card-body\"/>\n </div>\n </div>\n</div>\n\n<hr class=\"eui-u-hr\"/>\n\n<ng-content select=\"eui-content-card-footer\"/>\n", styles: [".eui-19.eui-t-ds2025 :host.eui-content-card{--_body-font: var(--eui-f-body-m-regular);--_title-font: var(--eui-f-body-l-semi-bold);--_subtitle-font: var(--eui-f-title-2xs-medium)}.eui-19 :host.eui-content-card{--_body-font: var(--eui-f-m);--_title-font: var(--eui-f-l);--_subtitle-font: var(--eui-f-m)}.eui-19 :host.eui-content-card{border:var(--eui-bw-xs) solid var(--eui-c-divider);border-radius:var(--eui-br-m);box-shadow:var(--eui-sh-card);display:flex;flex-direction:column;height:auto;padding:0;position:relative;width:100%;font:var(--_content-font)}.eui-19 :host.eui-content-card .eui-content-card-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m);gap:var(--eui-s-m)}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-selectable-wrapper{padding-top:var(--eui-s-xs)}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-selectable-wrapper ::ng-deep .eui-input-checkbox{margin-right:0}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-header-body-wrapper{display:flex;flex-direction:column;width:100%}.eui-19 :host.eui-content-card .eui-content-card-wrapper .eui-content-card-body-wrapper{display:flex;width:100%}.eui-19 :host.eui-content-card.eui-content-card--selected{border-color:var(--eui-c-s-primary-border)}.eui-19 :host.eui-content-card.eui-content-card--collapsed .eui-content-card-body-wrapper{display:none!important}\n"] }]
296
- }], propDecorators: { cssClasses: [{
297
- type: HostBinding,
298
- args: ['class']
299
- }], e2eAttr: [{
300
- type: HostBinding,
301
- args: ['attr.data-e2e']
302
- }, {
303
- type: Input
304
- }], isSelected: [{
305
- type: Input,
306
- args: [{ transform: booleanAttribute }]
307
- }], isSelectable: [{
308
- type: Input,
309
- args: [{ transform: booleanAttribute }]
310
- }], isCollapsible: [{
311
- type: Input,
312
- args: [{ transform: booleanAttribute }]
313
- }], isCollapsed: [{
314
- type: Input,
315
- args: [{ transform: booleanAttribute }]
316
- }] } });
317
-
318
376
  /**
319
377
  * @description
320
378
  * The eui-content-card component projects the content for eui-card.
@@ -330,21 +388,23 @@ class EuiContentCardHeaderComponent {
330
388
  this.euiCardContentParent = inject(forwardRef(() => EuiContentCardComponent), { optional: true, host: true });
331
389
  }
332
390
  onToggle() {
333
- console.log(this.euiCardContentParent.isCollapsed);
334
- this.euiCardContentParent.isCollapsed = !this.euiCardContentParent.isCollapsed;
335
- console.log(this.euiCardContentParent.isCollapsed);
391
+ this.euiCardContentParent.toggleCollapse();
336
392
  }
337
393
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
338
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiContentCardHeaderComponent, isStandalone: true, selector: "eui-content-card-header", host: { properties: { "class": "this.string" } }, ngImport: i0, template: "<div class=\"eui-content-card-header-top-wrapper\">\n <ng-content select=\"eui-content-card-header-start\"/>\n\n @if (euiCardContentParent?.isCollapsible) {\n <div class=\"eui-content-card-header-expander-wrapper\">\n <eui-icon-button-expander [isExpanded]=\"!euiCardContentParent?.isCollapsed\" (buttonClick)=\"onToggle()\"/>\n </div>\n } @else {\n <ng-content select=\"eui-content-card-header-end\"/>\n }\n</div>\n\n<ng-content select=\"eui-content-card-header-title\"/>\n<ng-content select=\"eui-content-card-header-subtitle\"/>\n\n<ng-content select=\"eui-content-card-header-metadata\"/>\n<ng-content select=\"eui-content-card-header-submetadata\"/>\n", styles: [".eui-19 .eui-content-card :host.eui-content-card-header{display:flex;width:100%;flex-direction:column}.eui-19 .eui-content-card :host.eui-content-card-header .eui-content-card-header-top-wrapper{display:flex;align-items:center;width:100%}.eui-19 .eui-content-card :host.eui-content-card-header .eui-content-card-header-expander-wrapper{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "component", type: i1$1.EuiIconButtonExpanderComponent, selector: "eui-icon-button-expander", inputs: ["fillColor", "size", "ariaLabel", "isExpanded", "isDirectionForward", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
394
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiContentCardHeaderComponent, isStandalone: true, selector: "eui-content-card-header", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "headerStartComponent", first: true, predicate: i0.forwardRef(() => EuiContentCardHeaderStartComponent), descendants: true }], ngImport: i0, template: "@if (headerStartComponent) {\n <div class=\"eui-content-card-header-top-wrapper\">\n <ng-content select=\"eui-content-card-header-start\"/>\n\n @if (euiCardContentParent?.isCollapsible) {\n <div class=\"eui-content-card-header-expander-wrapper\">\n <eui-icon-button-expander [isExpanded]=\"!euiCardContentParent?.isCollapsed\" (buttonClick)=\"onToggle()\"/>\n </div>\n } @else {\n <ng-content *ngTemplateOutlet=\"headerEnd\"/>\n }\n </div>\n <ng-content *ngTemplateOutlet=\"headerTitle\"/>\n} @else {\n <div class=\"eui-content-card-header-top-wrapper\">\n <ng-content *ngTemplateOutlet=\"headerTitle\"/>\n \n @if (euiCardContentParent?.isCollapsible) {\n <div class=\"eui-content-card-header-expander-wrapper\">\n <eui-icon-button-expander [isExpanded]=\"!euiCardContentParent?.isCollapsed\" (buttonClick)=\"onToggle()\"/>\n </div>\n } @else {\n <ng-content *ngTemplateOutlet=\"headerEnd\"/>\n } \n </div>\n}\n<ng-content select=\"eui-content-card-header-subtitle\"/>\n<ng-content select=\"eui-content-card-header-metadata\"/>\n<ng-content select=\"eui-content-card-header-submetadata\"/>\n\n\n<ng-template #headerEnd>\n <ng-content select=\"eui-content-card-header-end\"/>\n</ng-template>\n<ng-template #headerTitle>\n <ng-content select=\"eui-content-card-header-title\"/>\n</ng-template>", styles: [".eui-19 .eui-content-card :host.eui-content-card-header{display:flex;width:100%;flex-direction:column}.eui-19 .eui-content-card :host.eui-content-card-header .eui-content-card-header-top-wrapper{display:flex;align-items:center;width:100%}.eui-19 .eui-content-card :host.eui-content-card-header .eui-content-card-header-expander-wrapper{display:flex;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$2.EuiIconButtonExpanderComponent, selector: "eui-icon-button-expander", inputs: ["fillColor", "size", "ariaLabel", "isExpanded", "isDirectionForward", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
339
395
  }
340
396
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiContentCardHeaderComponent, decorators: [{
341
397
  type: Component,
342
398
  args: [{ selector: 'eui-content-card-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
399
+ NgTemplateOutlet,
343
400
  ...EUI_ICON_BUTTON_EXPANDER,
344
- ], template: "<div class=\"eui-content-card-header-top-wrapper\">\n <ng-content select=\"eui-content-card-header-start\"/>\n\n @if (euiCardContentParent?.isCollapsible) {\n <div class=\"eui-content-card-header-expander-wrapper\">\n <eui-icon-button-expander [isExpanded]=\"!euiCardContentParent?.isCollapsed\" (buttonClick)=\"onToggle()\"/>\n </div>\n } @else {\n <ng-content select=\"eui-content-card-header-end\"/>\n }\n</div>\n\n<ng-content select=\"eui-content-card-header-title\"/>\n<ng-content select=\"eui-content-card-header-subtitle\"/>\n\n<ng-content select=\"eui-content-card-header-metadata\"/>\n<ng-content select=\"eui-content-card-header-submetadata\"/>\n", styles: [".eui-19 .eui-content-card :host.eui-content-card-header{display:flex;width:100%;flex-direction:column}.eui-19 .eui-content-card :host.eui-content-card-header .eui-content-card-header-top-wrapper{display:flex;align-items:center;width:100%}.eui-19 .eui-content-card :host.eui-content-card-header .eui-content-card-header-expander-wrapper{display:flex;margin-left:auto}\n"] }]
401
+ ], template: "@if (headerStartComponent) {\n <div class=\"eui-content-card-header-top-wrapper\">\n <ng-content select=\"eui-content-card-header-start\"/>\n\n @if (euiCardContentParent?.isCollapsible) {\n <div class=\"eui-content-card-header-expander-wrapper\">\n <eui-icon-button-expander [isExpanded]=\"!euiCardContentParent?.isCollapsed\" (buttonClick)=\"onToggle()\"/>\n </div>\n } @else {\n <ng-content *ngTemplateOutlet=\"headerEnd\"/>\n }\n </div>\n <ng-content *ngTemplateOutlet=\"headerTitle\"/>\n} @else {\n <div class=\"eui-content-card-header-top-wrapper\">\n <ng-content *ngTemplateOutlet=\"headerTitle\"/>\n \n @if (euiCardContentParent?.isCollapsible) {\n <div class=\"eui-content-card-header-expander-wrapper\">\n <eui-icon-button-expander [isExpanded]=\"!euiCardContentParent?.isCollapsed\" (buttonClick)=\"onToggle()\"/>\n </div>\n } @else {\n <ng-content *ngTemplateOutlet=\"headerEnd\"/>\n } \n </div>\n}\n<ng-content select=\"eui-content-card-header-subtitle\"/>\n<ng-content select=\"eui-content-card-header-metadata\"/>\n<ng-content select=\"eui-content-card-header-submetadata\"/>\n\n\n<ng-template #headerEnd>\n <ng-content select=\"eui-content-card-header-end\"/>\n</ng-template>\n<ng-template #headerTitle>\n <ng-content select=\"eui-content-card-header-title\"/>\n</ng-template>", styles: [".eui-19 .eui-content-card :host.eui-content-card-header{display:flex;width:100%;flex-direction:column}.eui-19 .eui-content-card :host.eui-content-card-header .eui-content-card-header-top-wrapper{display:flex;align-items:center;width:100%}.eui-19 .eui-content-card :host.eui-content-card-header .eui-content-card-header-expander-wrapper{display:flex;margin-left:auto}\n"] }]
345
402
  }], propDecorators: { string: [{
346
403
  type: HostBinding,
347
404
  args: ['class']
405
+ }], headerStartComponent: [{
406
+ type: ContentChild,
407
+ args: [forwardRef(() => EuiContentCardHeaderStartComponent), { static: false }]
348
408
  }] } });
349
409
 
350
410
  /**