@eui/components 19.2.4-snapshot-1748020825022 → 19.2.4-snapshot-1748067948742
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/EuiBannerComponent.html +72 -0
- package/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/eui-banner/eui-banner.component.d.ts +19 -1
- package/eui-banner/eui-banner.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-banner.mjs +36 -9
- package/fesm2022/eui-components-eui-banner.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -19,9 +19,27 @@ export declare class EuiBannerComponent {
|
|
|
19
19
|
role: string;
|
|
20
20
|
/** @description Data attribute for e2e testing */
|
|
21
21
|
e2eAttr: string;
|
|
22
|
+
/**
|
|
23
|
+
* @description Whether as position top
|
|
24
|
+
* @default false
|
|
25
|
+
*/
|
|
26
|
+
euiPositionTop: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* @description Whether as position center
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
euiPositionCenter: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* @description Whether as position bottom
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
euiInverse: boolean;
|
|
22
37
|
/** @description Instance of BaseStatesDirective for managing component states */
|
|
23
38
|
protected baseStatesDirective: BaseStatesDirective;
|
|
24
39
|
static ɵfac: i0.ɵɵFactoryDeclaration<EuiBannerComponent, never>;
|
|
25
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EuiBannerComponent, "eui-banner", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; }, {}, never, ["eui-banner-title", "eui-banner-description", "eui-banner-cta"], true, [{ directive: typeof i1.BaseStatesDirective; inputs: { "euiSizeS": "euiSizeS"; "euiSizeM": "euiSizeM"; "euiSizeVariant": "euiSizeVariant"; "euiOutline": "euiOutline"; }; outputs: {}; }]>;
|
|
40
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<EuiBannerComponent, "eui-banner", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "euiPositionTop": { "alias": "euiPositionTop"; "required": false; }; "euiPositionCenter": { "alias": "euiPositionCenter"; "required": false; }; "euiInverse": { "alias": "euiInverse"; "required": false; }; }, {}, never, ["eui-banner-title", "eui-banner-description", "eui-banner-cta"], true, [{ directive: typeof i1.BaseStatesDirective; inputs: { "euiSizeS": "euiSizeS"; "euiSizeM": "euiSizeM"; "euiSizeVariant": "euiSizeVariant"; "euiOutline": "euiOutline"; }; outputs: {}; }]>;
|
|
41
|
+
static ngAcceptInputType_euiPositionTop: unknown;
|
|
42
|
+
static ngAcceptInputType_euiPositionCenter: unknown;
|
|
43
|
+
static ngAcceptInputType_euiInverse: unknown;
|
|
26
44
|
}
|
|
27
45
|
//# sourceMappingURL=eui-banner.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-banner.component.d.ts","sourceRoot":"","sources":["../../eui-banner/eui-banner.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"eui-banner.component.d.ts","sourceRoot":"","sources":["../../eui-banner/eui-banner.component.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;;;AAE7D;;;;;GAKG;AACH,qBAiBa,kBAAkB;IAC3B;;;;;OAKG;IACH,IACW,UAAU,IAAI,MAAM,CAO9B;IAED,+CAA+C;IACrB,IAAI,SAAa;IAE3C,kDAAkD;IACX,OAAO,SAAgB;IAE9D;;;OAGG;IACqC,cAAc,UAAS;IAE/D;;;OAGG;IACqC,iBAAiB,UAAS;IAElE;;;OAGG;IACqC,UAAU,UAAS;IAE3D,iFAAiF;IACjF,SAAS,CAAC,mBAAmB,sBAA+B;yCA1CnD,kBAAkB;2CAAlB,kBAAkB;6CA4Cwj4c,OAAQ;gDAAR,OAAQ;yCAAR,OAAQ;CAD9l4c"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
|
|
2
|
+
import { HostBinding, ChangeDetectionStrategy, Component, inject, booleanAttribute, Input } from '@angular/core';
|
|
3
3
|
import * as i1 from '@eui/components/shared';
|
|
4
4
|
import { BaseStatesDirective } from '@eui/components/shared';
|
|
5
5
|
|
|
@@ -17,11 +17,11 @@ class EuiBannerCtaComponent {
|
|
|
17
17
|
this.string = 'eui-banner-cta';
|
|
18
18
|
}
|
|
19
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiBannerCtaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: EuiBannerCtaComponent, isStandalone: true, selector: "eui-banner-cta", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: EuiBannerCtaComponent, isStandalone: true, selector: "eui-banner-cta", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-banner :host{margin-top:var(--eui-s-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
21
|
}
|
|
22
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiBannerCtaComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
|
-
args: [{ selector: 'eui-banner-cta', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush }]
|
|
24
|
+
args: [{ selector: 'eui-banner-cta', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 .eui-banner :host{margin-top:var(--eui-s-s)}\n"] }]
|
|
25
25
|
}], propDecorators: { string: [{
|
|
26
26
|
type: HostBinding,
|
|
27
27
|
args: ['class']
|
|
@@ -41,11 +41,11 @@ class EuiBannerDescriptionComponent {
|
|
|
41
41
|
this.string = 'eui-banner-description';
|
|
42
42
|
}
|
|
43
43
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiBannerDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
44
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: EuiBannerDescriptionComponent, isStandalone: true, selector: "eui-banner-description", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-banner :host{font:var(--
|
|
44
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: EuiBannerDescriptionComponent, isStandalone: true, selector: "eui-banner-description", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-banner :host{font:var(--_description-font)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
45
45
|
}
|
|
46
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiBannerDescriptionComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
48
|
-
args: [{ selector: 'eui-banner-description', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 .eui-banner :host{font:var(--
|
|
48
|
+
args: [{ selector: 'eui-banner-description', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 .eui-banner :host{font:var(--_description-font)}\n"] }]
|
|
49
49
|
}], propDecorators: { string: [{
|
|
50
50
|
type: HostBinding,
|
|
51
51
|
args: ['class']
|
|
@@ -65,11 +65,11 @@ class EuiBannerTitleComponent {
|
|
|
65
65
|
this.string = 'eui-banner-title';
|
|
66
66
|
}
|
|
67
67
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiBannerTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: EuiBannerTitleComponent, isStandalone: true, selector: "eui-banner-title", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-banner :host{font:var(--
|
|
68
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.12", type: EuiBannerTitleComponent, isStandalone: true, selector: "eui-banner-title", host: { properties: { "class": "this.string" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-banner :host{font:var(--_title-font)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
69
69
|
}
|
|
70
70
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiBannerTitleComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
72
|
-
args: [{ selector: 'eui-banner-title', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 .eui-banner :host{font:var(--
|
|
72
|
+
args: [{ selector: 'eui-banner-title', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-19 .eui-banner :host{font:var(--_title-font)}\n"] }]
|
|
73
73
|
}], propDecorators: { string: [{
|
|
74
74
|
type: HostBinding,
|
|
75
75
|
args: ['class']
|
|
@@ -87,6 +87,21 @@ class EuiBannerComponent {
|
|
|
87
87
|
this.role = 'section';
|
|
88
88
|
/** @description Data attribute for e2e testing */
|
|
89
89
|
this.e2eAttr = 'eui-banner';
|
|
90
|
+
/**
|
|
91
|
+
* @description Whether as position top
|
|
92
|
+
* @default false
|
|
93
|
+
*/
|
|
94
|
+
this.euiPositionTop = false;
|
|
95
|
+
/**
|
|
96
|
+
* @description Whether as position center
|
|
97
|
+
* @default false
|
|
98
|
+
*/
|
|
99
|
+
this.euiPositionCenter = false;
|
|
100
|
+
/**
|
|
101
|
+
* @description Whether as position bottom
|
|
102
|
+
* @default false
|
|
103
|
+
*/
|
|
104
|
+
this.euiInverse = false;
|
|
90
105
|
/** @description Instance of BaseStatesDirective for managing component states */
|
|
91
106
|
this.baseStatesDirective = inject(BaseStatesDirective);
|
|
92
107
|
}
|
|
@@ -99,10 +114,13 @@ class EuiBannerComponent {
|
|
|
99
114
|
get cssClasses() {
|
|
100
115
|
return [
|
|
101
116
|
this.baseStatesDirective.getCssClasses('eui-banner'),
|
|
117
|
+
this.euiPositionTop ? 'eui-banner--top' : '',
|
|
118
|
+
this.euiPositionCenter ? 'eui-banner--center' : '',
|
|
119
|
+
this.euiInverse ? 'eui-banner--inverse' : '',
|
|
102
120
|
].join(' ').trim();
|
|
103
121
|
}
|
|
104
122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
105
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.12", type: EuiBannerComponent, isStandalone: true, selector: "eui-banner", inputs: { e2eAttr: "e2eAttr", euiPositionTop: ["euiPositionTop", "euiPositionTop", booleanAttribute], euiPositionCenter: ["euiPositionCenter", "euiPositionCenter", booleanAttribute], euiInverse: ["euiInverse", "euiInverse", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeVariant", "euiSizeVariant", "euiOutline", "euiOutline"] }], ngImport: i0, template: "<figure class=\"eui-banner__picture-container\">\n <picture class=\"eui-banner__picture\">\n <img class=\"eui-banner__image\" src=\"https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg\" alt=\"alternative text\">\n </picture>\n</figure>\n\n<div class=\"eui-banner__info\">\n <div class=\"eui-banner__container\">\n <ng-content select=\"eui-banner-title\"/>\n <ng-content select=\"eui-banner-description\"/>\n <ng-content select=\"eui-banner-cta\"/>\n </div>\n</div>", styles: [".eui-19.eui-t-ds2025 :host.eui-banner{--_title-font: var(--eui-f-title-xl-medium);--_description-font: var(--eui-f-body-xl-regular)}.eui-19 :host.eui-banner{--_title-font: var(--eui-f-2xl-bold);--_description-font: var(--eui-f-xl)}.eui-19 :host.eui-banner{display:flex;flex-direction:column;position:relative;width:100%;align-items:center}.eui-19 :host.eui-banner .eui-banner__picture-container{height:100%;position:static;width:100%;margin:0}.eui-19 :host.eui-banner .eui-banner__picture{display:block;height:100%;position:relative;margin:0}.eui-19 :host.eui-banner .eui-banner__image{aspect-ratio:4/1;background-size:100%;background-repeat:no-repeat;object-position:top;display:block;height:100%;object-fit:cover;position:relative;width:100%}.eui-19 :host.eui-banner .eui-banner__info{position:absolute;display:flex;align-items:end;bottom:var(--eui-s-xl);flex-grow:1;width:100%;height:100%;padding:var(--eui-s-4xl) var(--eui-s-2xl)}.eui-19 :host.eui-banner .eui-banner__container{border-radius:var(--eui-br-m);min-width:50%;background-color:var(--eui-c-white);display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-l)}.eui-19 :host.eui-banner--top .eui-banner__info{align-items:start;top:var(--eui-s-xl)}.eui-19 :host.eui-banner--center .eui-banner__info{align-items:center}.eui-19 :host.eui-banner--inverse .eui-banner__container{background-color:#000c;color:var(--eui-c-white)}@media screen and (max-width: 995px){.eui-19 :host.eui-banner .eui-banner__info{position:relative}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
106
124
|
}
|
|
107
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiBannerComponent, decorators: [{
|
|
108
126
|
type: Component,
|
|
@@ -116,7 +134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
|
|
|
116
134
|
'euiOutline',
|
|
117
135
|
],
|
|
118
136
|
},
|
|
119
|
-
], template: "<figure class=\"eui-banner__picture-container\">\n <picture class=\"eui-banner__picture\">\n <img class=\"eui-banner__image\" src=\"https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg\" alt=\"alternative text\">\n </picture>\n</figure>\n\n<div class=\"eui-banner__info\">\n <div class=\"eui-banner__container\">\n <ng-content select=\"eui-banner-title\"/>\n <ng-content select=\"eui-banner-description\"/>\n <ng-content select=\"eui-banner-cta\"/>\n </div>\n</div>", styles: [".eui-19 :host.eui-banner{display:flex;position:relative;width:100%;align-items:center}.eui-19 :host.eui-banner .eui-banner__picture-container{height:100%;position:static;width:100%;margin:0}.eui-19 :host.eui-banner .eui-banner__picture{display:block;height:100%;position:relative;margin:0}.eui-19 :host.eui-banner .eui-banner__image{aspect-ratio:4/1;background-size:100%;background-repeat:no-repeat;object-position:top;display:block;height:100%;object-fit:cover;position:relative;width:100%}.eui-19 :host.eui-banner .eui-banner__info{position:absolute;display:flex;align-items:
|
|
137
|
+
], template: "<figure class=\"eui-banner__picture-container\">\n <picture class=\"eui-banner__picture\">\n <img class=\"eui-banner__image\" src=\"https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg\" alt=\"alternative text\">\n </picture>\n</figure>\n\n<div class=\"eui-banner__info\">\n <div class=\"eui-banner__container\">\n <ng-content select=\"eui-banner-title\"/>\n <ng-content select=\"eui-banner-description\"/>\n <ng-content select=\"eui-banner-cta\"/>\n </div>\n</div>", styles: [".eui-19.eui-t-ds2025 :host.eui-banner{--_title-font: var(--eui-f-title-xl-medium);--_description-font: var(--eui-f-body-xl-regular)}.eui-19 :host.eui-banner{--_title-font: var(--eui-f-2xl-bold);--_description-font: var(--eui-f-xl)}.eui-19 :host.eui-banner{display:flex;flex-direction:column;position:relative;width:100%;align-items:center}.eui-19 :host.eui-banner .eui-banner__picture-container{height:100%;position:static;width:100%;margin:0}.eui-19 :host.eui-banner .eui-banner__picture{display:block;height:100%;position:relative;margin:0}.eui-19 :host.eui-banner .eui-banner__image{aspect-ratio:4/1;background-size:100%;background-repeat:no-repeat;object-position:top;display:block;height:100%;object-fit:cover;position:relative;width:100%}.eui-19 :host.eui-banner .eui-banner__info{position:absolute;display:flex;align-items:end;bottom:var(--eui-s-xl);flex-grow:1;width:100%;height:100%;padding:var(--eui-s-4xl) var(--eui-s-2xl)}.eui-19 :host.eui-banner .eui-banner__container{border-radius:var(--eui-br-m);min-width:50%;background-color:var(--eui-c-white);display:flex;flex-direction:column;padding:var(--eui-s-xl) var(--eui-s-l)}.eui-19 :host.eui-banner--top .eui-banner__info{align-items:start;top:var(--eui-s-xl)}.eui-19 :host.eui-banner--center .eui-banner__info{align-items:center}.eui-19 :host.eui-banner--inverse .eui-banner__container{background-color:#000c;color:var(--eui-c-white)}@media screen and (max-width: 995px){.eui-19 :host.eui-banner .eui-banner__info{position:relative}}\n"] }]
|
|
120
138
|
}], propDecorators: { cssClasses: [{
|
|
121
139
|
type: HostBinding,
|
|
122
140
|
args: ['class']
|
|
@@ -128,6 +146,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
|
|
|
128
146
|
args: ['attr.data-e2e']
|
|
129
147
|
}, {
|
|
130
148
|
type: Input
|
|
149
|
+
}], euiPositionTop: [{
|
|
150
|
+
type: Input,
|
|
151
|
+
args: [{ transform: booleanAttribute }]
|
|
152
|
+
}], euiPositionCenter: [{
|
|
153
|
+
type: Input,
|
|
154
|
+
args: [{ transform: booleanAttribute }]
|
|
155
|
+
}], euiInverse: [{
|
|
156
|
+
type: Input,
|
|
157
|
+
args: [{ transform: booleanAttribute }]
|
|
131
158
|
}] } });
|
|
132
159
|
|
|
133
160
|
const EUI_BANNER = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-components-eui-banner.mjs","sources":["../../eui-banner/eui-banner-cta.component.ts","../../eui-banner/eui-banner-description.component.ts","../../eui-banner/eui-banner-title.component.ts","../../eui-banner/eui-banner.component.ts","../../eui-banner/eui-banner.component.html","../../eui-banner/index.ts","../../eui-banner/eui-components-eui-banner.ts"],"sourcesContent":["import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n/**\n * @description\n * The eui-content-card component projects the content for eui-card.\n */\n@Component({\n selector: 'eui-banner-cta',\n template: '<ng-content/>',\n styleUrl: './eui-banner-cta.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiBannerCtaComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-banner-cta'\n */\n @HostBinding('class') string = 'eui-banner-cta';\n}\n","import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n/**\n * @description\n * The eui-content-card component projects the content for eui-card.\n */\n@Component({\n selector: 'eui-banner-description',\n template: '<ng-content/>',\n styleUrl: './eui-banner-description.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiBannerDescriptionComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-banner-description'\n */\n @HostBinding('class') string = 'eui-banner-description';\n}\n","import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n/**\n * @description\n * The eui-content-card component projects the content for eui-card.\n */\n@Component({\n selector: 'eui-banner-title',\n template: '<ng-content/>',\n styleUrl: './eui-banner-title.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiBannerTitleComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-banner-title'\n */\n @HostBinding('class') string = 'eui-banner-title';\n}\n","import {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n Input,\n inject,\n} from '@angular/core';\nimport { BaseStatesDirective } from '@eui/components/shared';\n\n/**\n * @description\n * A badge component that can display text, numbers, or icons with various states and styles.\n * Supports content truncation, empty states, and icon-only modes.\n *\n */\n@Component({\n selector: 'eui-banner',\n templateUrl: './eui-banner.component.html',\n styleUrl: './eui-banner.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: BaseStatesDirective,\n inputs: [\n 'euiSizeS',\n 'euiSizeM',\n 'euiSizeVariant',\n 'euiOutline',\n ],\n },\n ],\n})\nexport class EuiBannerComponent {\n /**\n * @description\n * Computes and returns the CSS classes for the badge based on its current state\n *\n * @returns {string} Space-separated string of CSS class names\n */\n @HostBinding('class')\n public get cssClasses(): string {\n return [\n this.baseStatesDirective.getCssClasses('eui-banner'),\n ].join(' ').trim();\n }\n\n /** @description ARIA role for accessibility */\n @HostBinding('attr.role') role = 'section';\n\n /** @description Data attribute for e2e testing */\n @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eui-banner';\n\n /** @description Instance of BaseStatesDirective for managing component states */\n protected baseStatesDirective = inject(BaseStatesDirective);\n}\n","<figure class=\"eui-banner__picture-container\">\n <picture class=\"eui-banner__picture\">\n <img class=\"eui-banner__image\" src=\"https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg\" alt=\"alternative text\">\n </picture>\n</figure>\n\n<div class=\"eui-banner__info\">\n <div class=\"eui-banner__container\">\n <ng-content select=\"eui-banner-title\"/>\n <ng-content select=\"eui-banner-description\"/>\n <ng-content select=\"eui-banner-cta\"/>\n </div>\n</div>","import { EuiBannerCtaComponent } from './eui-banner-cta.component';\nimport { EuiBannerDescriptionComponent } from './eui-banner-description.component';\nimport { EuiBannerTitleComponent } from './eui-banner-title.component';\nimport { EuiBannerComponent } from './eui-banner.component';\n\nexport * from './eui-banner.component';\nexport * from './eui-banner-cta.component';\nexport * from './eui-banner-description.component';\nexport * from './eui-banner-title.component';\n\nexport const EUI_BANNER = [\n EuiBannerComponent,\n EuiBannerTitleComponent,\n EuiBannerDescriptionComponent,\n EuiBannerCtaComponent,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AACA;;;AAGG;MAOU,qBAAqB,CAAA;AANlC,IAAA,WAAA,GAAA;AAOI;;;;AAIG;QACmB,IAAM,CAAA,MAAA,GAAG,gBAAgB;AAClD;+GAPY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,4HAJpB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"eui-components-eui-banner.mjs","sources":["../../eui-banner/eui-banner-cta.component.ts","../../eui-banner/eui-banner-description.component.ts","../../eui-banner/eui-banner-title.component.ts","../../eui-banner/eui-banner.component.ts","../../eui-banner/eui-banner.component.html","../../eui-banner/index.ts","../../eui-banner/eui-components-eui-banner.ts"],"sourcesContent":["import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n/**\n * @description\n * The eui-content-card component projects the content for eui-card.\n */\n@Component({\n selector: 'eui-banner-cta',\n template: '<ng-content/>',\n styleUrl: './eui-banner-cta.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiBannerCtaComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-banner-cta'\n */\n @HostBinding('class') string = 'eui-banner-cta';\n}\n","import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n/**\n * @description\n * The eui-content-card component projects the content for eui-card.\n */\n@Component({\n selector: 'eui-banner-description',\n template: '<ng-content/>',\n styleUrl: './eui-banner-description.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiBannerDescriptionComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-banner-description'\n */\n @HostBinding('class') string = 'eui-banner-description';\n}\n","import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n/**\n * @description\n * The eui-content-card component projects the content for eui-card.\n */\n@Component({\n selector: 'eui-banner-title',\n template: '<ng-content/>',\n styleUrl: './eui-banner-title.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiBannerTitleComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-banner-title'\n */\n @HostBinding('class') string = 'eui-banner-title';\n}\n","import {\n Component,\n HostBinding,\n ChangeDetectionStrategy,\n Input,\n inject,\n booleanAttribute,\n} from '@angular/core';\nimport { BaseStatesDirective } from '@eui/components/shared';\n\n/**\n * @description\n * A badge component that can display text, numbers, or icons with various states and styles.\n * Supports content truncation, empty states, and icon-only modes.\n *\n */\n@Component({\n selector: 'eui-banner',\n templateUrl: './eui-banner.component.html',\n styleUrl: './eui-banner.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: BaseStatesDirective,\n inputs: [\n 'euiSizeS',\n 'euiSizeM',\n 'euiSizeVariant',\n 'euiOutline',\n ],\n },\n ],\n})\nexport class EuiBannerComponent {\n /**\n * @description\n * Computes and returns the CSS classes for the badge based on its current state\n *\n * @returns {string} Space-separated string of CSS class names\n */\n @HostBinding('class')\n public get cssClasses(): string {\n return [\n this.baseStatesDirective.getCssClasses('eui-banner'),\n this.euiPositionTop ? 'eui-banner--top': '',\n this.euiPositionCenter ? 'eui-banner--center': '',\n this.euiInverse ? 'eui-banner--inverse': '',\n ].join(' ').trim();\n }\n\n /** @description ARIA role for accessibility */\n @HostBinding('attr.role') role = 'section';\n\n /** @description Data attribute for e2e testing */\n @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eui-banner';\n\n /**\n * @description Whether as position top\n * @default false\n */\n @Input({ transform: booleanAttribute }) euiPositionTop = false; \n\n /**\n * @description Whether as position center\n * @default false\n */\n @Input({ transform: booleanAttribute }) euiPositionCenter = false; \n\n /**\n * @description Whether as position bottom\n * @default false\n */\n @Input({ transform: booleanAttribute }) euiInverse = false; \n\n /** @description Instance of BaseStatesDirective for managing component states */\n protected baseStatesDirective = inject(BaseStatesDirective);\n}\n","<figure class=\"eui-banner__picture-container\">\n <picture class=\"eui-banner__picture\">\n <img class=\"eui-banner__image\" src=\"https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg\" alt=\"alternative text\">\n </picture>\n</figure>\n\n<div class=\"eui-banner__info\">\n <div class=\"eui-banner__container\">\n <ng-content select=\"eui-banner-title\"/>\n <ng-content select=\"eui-banner-description\"/>\n <ng-content select=\"eui-banner-cta\"/>\n </div>\n</div>","import { EuiBannerCtaComponent } from './eui-banner-cta.component';\nimport { EuiBannerDescriptionComponent } from './eui-banner-description.component';\nimport { EuiBannerTitleComponent } from './eui-banner-title.component';\nimport { EuiBannerComponent } from './eui-banner.component';\n\nexport * from './eui-banner.component';\nexport * from './eui-banner-cta.component';\nexport * from './eui-banner-description.component';\nexport * from './eui-banner-title.component';\n\nexport const EUI_BANNER = [\n EuiBannerComponent,\n EuiBannerTitleComponent,\n EuiBannerDescriptionComponent,\n EuiBannerCtaComponent,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eui/components",
|
|
3
|
-
"version": "19.2.4-snapshot-
|
|
3
|
+
"version": "19.2.4-snapshot-1748067948742",
|
|
4
4
|
"tag": "snapshot",
|
|
5
5
|
"description": "eUI components package",
|
|
6
6
|
"homepage": "https://eui.ecdevops.eu",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"url": "https://citnet.tech.ec.europa.eu/CITnet/stash/projects/CSDR/repos/eui/browse/packages/components"
|
|
11
11
|
},
|
|
12
12
|
"peerDependencies": {
|
|
13
|
-
"@eui/core": "19.2.4-snapshot-
|
|
14
|
-
"@eui/base": "19.2.4-snapshot-
|
|
13
|
+
"@eui/core": "19.2.4-snapshot-1748067948742",
|
|
14
|
+
"@eui/base": "19.2.4-snapshot-1748067948742",
|
|
15
15
|
"@angular/common": "^18.0.0 || ^19.0.0",
|
|
16
16
|
"@angular/core": "^18.0.0 || ^19.0.0",
|
|
17
17
|
"@angular/forms": "^18.0.0 || ^19.0.0",
|