@eui/eds-wc 22.0.0-alpha.32 → 22.0.0-alpha.34
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.
|
@@ -26,11 +26,15 @@ export type EdsWcAlertColor = 'info' | 'success' | 'warning' | 'critical';
|
|
|
26
26
|
*
|
|
27
27
|
* @slot title - Alert title (rendered in semibold), mirrors `<ng-content select="eds-alert-title">`.
|
|
28
28
|
* @slot - Default slot for the alert body content.
|
|
29
|
+
* @slot actions - Optional trailing action(s) (link or button), shown before the close button.
|
|
30
|
+
* Mirrors the Angular `<eds-alert-actions>` slot. A slotted `<a slot="actions">` picks up the
|
|
31
|
+
* alert-action typography (mirrors the Angular `a[edsAlertAction]` sub-component).
|
|
29
32
|
*
|
|
30
33
|
* @fires close-alert - Dispatched when the close button is clicked; the alert hides itself. `detail: { visible: false }`.
|
|
31
34
|
*
|
|
32
35
|
* @csspart icon - The status icon container.
|
|
33
36
|
* @csspart content - The content area (title + body).
|
|
37
|
+
* @csspart actions - The trailing action slot container.
|
|
34
38
|
* @csspart close-button - The close button (only rendered when `is-closeable`).
|
|
35
39
|
*/
|
|
36
40
|
export declare class EdsWcAlert extends EdsBaseElement {
|
|
@@ -62,10 +66,21 @@ export declare class EdsWcAlert extends EdsBaseElement {
|
|
|
62
66
|
* @default 'eds-alert'
|
|
63
67
|
*/
|
|
64
68
|
e2eAttr: string;
|
|
69
|
+
/**
|
|
70
|
+
* Reflects whether the `actions` slot has projected content, so the trailing action
|
|
71
|
+
* block only claims layout space (padding/margin) when an action is present.
|
|
72
|
+
* Internal state — driven by the slot's `slotchange`, not a public API.
|
|
73
|
+
*/
|
|
74
|
+
private hasActions;
|
|
65
75
|
static styles: import("lit").CSSResult;
|
|
66
76
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
67
77
|
protected updated(changed: Map<string, unknown>): void;
|
|
68
78
|
connectedCallback(): void;
|
|
79
|
+
/**
|
|
80
|
+
* Reflects `has-actions` from the `actions` slot's assigned content. Guarded so the state
|
|
81
|
+
* is only written when it actually changes (prevents a slotchange → render → slotchange loop).
|
|
82
|
+
*/
|
|
83
|
+
private _onActionsSlotChange;
|
|
69
84
|
/**
|
|
70
85
|
* Hides the alert and dispatches the `close-alert` event when the close button is clicked.
|
|
71
86
|
* Mirrors the Angular `onCloseClick()` which sets `isVisible=false` and emits `closeAlert(false)`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eds-wc-alert.d.ts","sourceRoot":"","sources":["../../src/eds-alert/eds-wc-alert.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAkB1E
|
|
1
|
+
{"version":3,"file":"eds-wc-alert.d.ts","sourceRoot":"","sources":["../../src/eds-alert/eds-wc-alert.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAkB1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,UAAW,SAAQ,cAAc;IAC1C;;;OAGG;IAEH,KAAK,EAAE,eAAe,CAAU;IAEhC;;;;OAIG;IAEH,WAAW,UAAS;IAEpB;;;;OAIG;IAEH,SAAS,UAAQ;IAEjB;;;OAGG;IAEH,cAAc,SAAiB;IAE/B;;;;OAIG;IAEH,OAAO,SAAe;IAEtB;;;;OAIG;IAEH,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAgB,MAAM,0BAmKpB;cAEiB,MAAM;cAuCN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD,iBAAiB,IAAI,IAAI;IAMlC;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAQ5B;;;OAGG;IACH,OAAO,CAAC,aAAa;CAQxB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,cAAc,EAAE,UAAU,CAAC;KAC9B;CACJ"}
|
|
@@ -35,11 +35,15 @@ const ALERT_ICON_MAP = {
|
|
|
35
35
|
*
|
|
36
36
|
* @slot title - Alert title (rendered in semibold), mirrors `<ng-content select="eds-alert-title">`.
|
|
37
37
|
* @slot - Default slot for the alert body content.
|
|
38
|
+
* @slot actions - Optional trailing action(s) (link or button), shown before the close button.
|
|
39
|
+
* Mirrors the Angular `<eds-alert-actions>` slot. A slotted `<a slot="actions">` picks up the
|
|
40
|
+
* alert-action typography (mirrors the Angular `a[edsAlertAction]` sub-component).
|
|
38
41
|
*
|
|
39
42
|
* @fires close-alert - Dispatched when the close button is clicked; the alert hides itself. `detail: { visible: false }`.
|
|
40
43
|
*
|
|
41
44
|
* @csspart icon - The status icon container.
|
|
42
45
|
* @csspart content - The content area (title + body).
|
|
46
|
+
* @csspart actions - The trailing action slot container.
|
|
43
47
|
* @csspart close-button - The close button (only rendered when `is-closeable`).
|
|
44
48
|
*/
|
|
45
49
|
let EdsWcAlert = class EdsWcAlert extends EdsBaseElement {
|
|
@@ -73,6 +77,12 @@ let EdsWcAlert = class EdsWcAlert extends EdsBaseElement {
|
|
|
73
77
|
* @default 'eds-alert'
|
|
74
78
|
*/
|
|
75
79
|
this.e2eAttr = 'eds-alert';
|
|
80
|
+
/**
|
|
81
|
+
* Reflects whether the `actions` slot has projected content, so the trailing action
|
|
82
|
+
* block only claims layout space (padding/margin) when an action is present.
|
|
83
|
+
* Internal state — driven by the slot's `slotchange`, not a public API.
|
|
84
|
+
*/
|
|
85
|
+
this.hasActions = false;
|
|
76
86
|
}
|
|
77
87
|
static { this.styles = css `
|
|
78
88
|
:host, *, *::before, *::after {
|
|
@@ -125,7 +135,8 @@ let EdsWcAlert = class EdsWcAlert extends EdsBaseElement {
|
|
|
125
135
|
|
|
126
136
|
.eds-alert__content {
|
|
127
137
|
display: flex;
|
|
128
|
-
|
|
138
|
+
flex: 1;
|
|
139
|
+
min-width: 0;
|
|
129
140
|
flex-direction: column;
|
|
130
141
|
padding: 0 var(--eds-sp-xs);
|
|
131
142
|
font: var(--eds-f-paragraph-m);
|
|
@@ -135,6 +146,48 @@ let EdsWcAlert = class EdsWcAlert extends EdsBaseElement {
|
|
|
135
146
|
font: var(--eds-f-paragraph-m-semibold);
|
|
136
147
|
}
|
|
137
148
|
|
|
149
|
+
/* Optional trailing action slot — sits between the content and the close button,
|
|
150
|
+
vertically centered against the message content. Mirrors the Angular
|
|
151
|
+
.eds-alert__actions block. The slot is always rendered (never toggled) but only
|
|
152
|
+
claims layout space when the host reflects [has-actions]. */
|
|
153
|
+
.eds-alert__actions {
|
|
154
|
+
display: none;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
:host([has-actions]) .eds-alert__actions {
|
|
158
|
+
display: flex;
|
|
159
|
+
align-items: center;
|
|
160
|
+
align-self: center;
|
|
161
|
+
gap: var(--eds-sp-s);
|
|
162
|
+
white-space: nowrap;
|
|
163
|
+
margin-left: auto;
|
|
164
|
+
padding-left: var(--eds-sp-xs);
|
|
165
|
+
padding-right: var(--eds-sp-xl);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
:host([has-actions]) .eds-alert__actions + .eds-alert__close {
|
|
169
|
+
margin-left: var(--eds-sp-xs);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Styled action link inside the actions slot — mirrors the Angular
|
|
173
|
+
a[edsAlertAction] sub-component (label, medium; default foreground; hover underline;
|
|
174
|
+
focus-visible ring). */
|
|
175
|
+
::slotted([slot="actions"]) {
|
|
176
|
+
font: var(--eds-f-label-m-medium);
|
|
177
|
+
color: var(--eds-c-foreground);
|
|
178
|
+
text-decoration: none;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
::slotted([slot="actions"]:hover) {
|
|
182
|
+
text-decoration: underline;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
::slotted([slot="actions"]:focus-visible) {
|
|
186
|
+
outline: var(--eds-bw-s) solid var(--eds-c-focus);
|
|
187
|
+
outline-offset: 2px;
|
|
188
|
+
border-radius: var(--eds-br-xs);
|
|
189
|
+
}
|
|
190
|
+
|
|
138
191
|
.eds-alert__close {
|
|
139
192
|
margin-left: auto;
|
|
140
193
|
display: flex;
|
|
@@ -213,6 +266,9 @@ let EdsWcAlert = class EdsWcAlert extends EdsBaseElement {
|
|
|
213
266
|
<slot></slot>
|
|
214
267
|
</div>
|
|
215
268
|
|
|
269
|
+
<slot name="actions" class="eds-alert__actions" part="actions"
|
|
270
|
+
@slotchange="${this._onActionsSlotChange}"></slot>
|
|
271
|
+
|
|
216
272
|
${this.isCloseable
|
|
217
273
|
? html `
|
|
218
274
|
<button
|
|
@@ -240,6 +296,17 @@ let EdsWcAlert = class EdsWcAlert extends EdsBaseElement {
|
|
|
240
296
|
this.setAttribute('role', 'alert');
|
|
241
297
|
this.toggleAttribute('hidden', !this.isVisible);
|
|
242
298
|
}
|
|
299
|
+
/**
|
|
300
|
+
* Reflects `has-actions` from the `actions` slot's assigned content. Guarded so the state
|
|
301
|
+
* is only written when it actually changes (prevents a slotchange → render → slotchange loop).
|
|
302
|
+
*/
|
|
303
|
+
_onActionsSlotChange(e) {
|
|
304
|
+
const slot = e.target;
|
|
305
|
+
const next = slot.assignedNodes({ flatten: true }).length > 0;
|
|
306
|
+
if (this.hasActions !== next) {
|
|
307
|
+
this.hasActions = next;
|
|
308
|
+
}
|
|
309
|
+
}
|
|
243
310
|
/**
|
|
244
311
|
* Hides the alert and dispatches the `close-alert` event when the close button is clicked.
|
|
245
312
|
* Mirrors the Angular `onCloseClick()` which sets `isVisible=false` and emits `closeAlert(false)`.
|
|
@@ -268,6 +335,9 @@ __decorate([
|
|
|
268
335
|
__decorate([
|
|
269
336
|
property({ type: String, reflect: true, attribute: 'data-e2e' })
|
|
270
337
|
], EdsWcAlert.prototype, "e2eAttr", void 0);
|
|
338
|
+
__decorate([
|
|
339
|
+
property({ type: Boolean, reflect: true, attribute: 'has-actions' })
|
|
340
|
+
], EdsWcAlert.prototype, "hasActions", void 0);
|
|
271
341
|
EdsWcAlert = __decorate([
|
|
272
342
|
customElement('eds-wc-alert')
|
|
273
343
|
], EdsWcAlert);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eds-wc-alert.js","sourceRoot":"","sources":["../../src/eds-alert/eds-wc-alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAiBvD,MAAM,cAAc,GAAuC;IACvD,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE;IAClD,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,kBAAkB,EAAE;IAChE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE;IAC3D,QAAQ,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,SAAS,EAAE,iBAAiB,EAAE;CACrE,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"eds-wc-alert.js","sourceRoot":"","sources":["../../src/eds-alert/eds-wc-alert.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eui/eds-wc",
|
|
3
|
-
"version": "22.0.0-alpha.
|
|
3
|
+
"version": "22.0.0-alpha.34",
|
|
4
4
|
"description": "EDS Web Components — Lit-based web component wrappers of @eui/eds design system components",
|
|
5
5
|
"homepage": "https://eui.ecdevops.eu",
|
|
6
6
|
"author": "ec.europa.eui@gmail.com",
|