@baloise/ds-core 20.0.0-next.8 → 20.0.0-next.9
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/components/ds-alert-container.js +1 -1
- package/components/ds-notification.js +1 -1
- package/components/ds-snackbar.js +1 -1
- package/components/ds-steps.js +1 -1
- package/components/ds-toast.js +1 -1
- package/components/index.js +1 -1
- package/components/p-o0H7eIVX.js +2 -1
- package/components/p-u5aa74vh.js +2 -1
- package/dist/cjs/ds-alert-container.cjs.entry.js +7 -11
- package/dist/cjs/ds-notification.cjs.entry.js +9 -15
- package/dist/cjs/ds-snackbar.cjs.entry.js +23 -11
- package/dist/cjs/ds-steps.cjs.entry.js +1 -8
- package/dist/cjs/ds-toast.cjs.entry.js +21 -9
- package/dist/cjs/index-DD7qcaNz.js +1 -1
- package/dist/collection/components/alert/alert-container.interfaces.js +1 -1
- package/dist/collection/components/alert/alert-container.js +9 -14
- package/dist/collection/components/alert/snackbar/snackbar.host.css +1 -1
- package/dist/collection/components/alert/snackbar/snackbar.js +22 -10
- package/dist/collection/components/alert/toast/toast.host.css +1 -1
- package/dist/collection/components/alert/toast/toast.js +20 -8
- package/dist/collection/components/notification/notification.host.css +1 -1
- package/dist/collection/components/notification/notification.interfaces.js +1 -2
- package/dist/collection/components/notification/notification.js +11 -17
- package/dist/collection/components/steps/steps/steps.js +1 -8
- package/dist/collection/components/steps/test/steps.component.play.js +29 -1
- package/dist/collection/global/constants/version.constant.js +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/p-14e27a87da.entry.js +4 -0
- package/dist/design-system/p-573457cd4b.entry.js +4 -0
- package/dist/design-system/p-936673f9f9.entry.js +4 -0
- package/dist/design-system/p-MUUOiuTm.js +1 -1
- package/dist/design-system/p-bec54c38fc.entry.js +4 -0
- package/dist/design-system/p-c8f95bd01a.entry.js +4 -0
- package/dist/esm/ds-alert-container.entry.js +7 -11
- package/dist/esm/ds-notification.entry.js +9 -15
- package/dist/esm/ds-snackbar.entry.js +23 -11
- package/dist/esm/ds-steps.entry.js +1 -8
- package/dist/esm/ds-toast.entry.js +21 -9
- package/dist/esm/index-MUUOiuTm.js +1 -1
- package/dist/types/components/alert/alert-container.d.ts +5 -6
- package/dist/types/components/alert/alert-container.interfaces.d.ts +1 -1
- package/dist/types/components/alert/snackbar/snackbar.d.ts +10 -6
- package/dist/types/components/alert/toast/toast.d.ts +8 -4
- package/dist/types/components/notification/notification.d.ts +5 -5
- package/dist/types/components/notification/notification.interfaces.d.ts +2 -2
- package/dist/types/components.d.ts +2 -6
- package/docs/cem.json +6 -10
- package/docs/components.json +469 -484
- package/package.json +28 -5
- package/sbom.cdx.json +3195 -3195
- package/dist/design-system/p-33165c2b03.entry.js +0 -4
- package/dist/design-system/p-a71c22bc50.entry.js +0 -4
- package/dist/design-system/p-dfebad2acc.entry.js +0 -4
- package/dist/design-system/p-e743fa4c17.entry.js +0 -4
- package/dist/design-system/p-f0b0376beb.entry.js +0 -4
|
@@ -19,6 +19,10 @@ export class Snackbar {
|
|
|
19
19
|
this.isMobile = dsBreakpoints.isMobile;
|
|
20
20
|
this.mobileOpenState = false;
|
|
21
21
|
this.didLoad = false;
|
|
22
|
+
/**
|
|
23
|
+
* PUBLIC PROPERTY API
|
|
24
|
+
* ─────────────────────────────────────────────────────
|
|
25
|
+
*/
|
|
22
26
|
/**
|
|
23
27
|
* Defines the color of the element
|
|
24
28
|
* Color type primary is deprecated, please use info instead.
|
|
@@ -80,7 +84,7 @@ export class Snackbar {
|
|
|
80
84
|
this.actionHandler = () => void 0;
|
|
81
85
|
/**
|
|
82
86
|
* PRIVATE METHODS
|
|
83
|
-
*
|
|
87
|
+
* ─────────────────────────────────────────────────────
|
|
84
88
|
*/
|
|
85
89
|
this.generateSvgContent = () => {
|
|
86
90
|
if (hasValue(this.svg) && this.svg.length > 0) {
|
|
@@ -113,7 +117,7 @@ export class Snackbar {
|
|
|
113
117
|
}
|
|
114
118
|
/**
|
|
115
119
|
* LIFECYCLE
|
|
116
|
-
*
|
|
120
|
+
* ─────────────────────────────────────────────────────
|
|
117
121
|
*/
|
|
118
122
|
componentDidLoad() {
|
|
119
123
|
raf(() => {
|
|
@@ -122,15 +126,15 @@ export class Snackbar {
|
|
|
122
126
|
});
|
|
123
127
|
}
|
|
124
128
|
/**
|
|
125
|
-
* LISTENERS
|
|
126
|
-
*
|
|
129
|
+
* PUBLIC LISTENERS
|
|
130
|
+
* ─────────────────────────────────────────────────────
|
|
127
131
|
*/
|
|
128
132
|
listenToBreakpoint(breakpoints) {
|
|
129
133
|
this.isMobile = breakpoints.mobile;
|
|
130
134
|
}
|
|
131
135
|
/**
|
|
132
136
|
* PUBLIC METHODS
|
|
133
|
-
*
|
|
137
|
+
* ─────────────────────────────────────────────────────
|
|
134
138
|
*/
|
|
135
139
|
/**
|
|
136
140
|
* Closes this notification
|
|
@@ -141,27 +145,27 @@ export class Snackbar {
|
|
|
141
145
|
}
|
|
142
146
|
/**
|
|
143
147
|
* RENDER
|
|
144
|
-
*
|
|
148
|
+
* ─────────────────────────────────────────────────────
|
|
145
149
|
*/
|
|
146
150
|
render() {
|
|
147
151
|
const iconName = this.generateIconName();
|
|
148
152
|
const svgContent = this.generateSvgContent();
|
|
149
|
-
return (h(Host, { key: '
|
|
153
|
+
return (h(Host, { key: '7dd8cbff5210c94aed353e878f3c31431c1733de', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
|
|
150
154
|
[`is-ready`]: this.didLoad,
|
|
151
155
|
[`is-visible`]: this.visible,
|
|
152
156
|
[`is-closable`]: this.closable,
|
|
153
157
|
[`is-mobile-open`]: this.isMobile && this.mobileOpenState,
|
|
154
158
|
[`is-mobile-closed`]: this.isMobile && !this.mobileOpenState,
|
|
155
159
|
[`is-${this.color}`]: hasValue(this.color),
|
|
156
|
-
} }, this.isMobile && !this.mobileOpenState && (h("ds-button", { key: '
|
|
160
|
+
} }, this.isMobile && !this.mobileOpenState && (h("ds-button", { key: 'a1fe8bf8330b49df3607560a662fa80ccde6ea77', id: "mobile-button", color: this.color === 'base' ? 'primary' : this.color, square: true, icon: iconName, onClick: () => (this.mobileOpenState = true) })), iconName && !svgContent && (h("ds-icon", { key: '0e12504be8ef39a9af63f8acf38a5ce4aa2eebc5', part: "icon", id: "icon", name: iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
|
|
157
161
|
? 'triangle'
|
|
158
162
|
: this.color === 'danger' || this.color === 'success' || this.color === 'info'
|
|
159
163
|
? 'circle'
|
|
160
|
-
: undefined })), svgContent && h("ds-icon", { key: '
|
|
164
|
+
: undefined })), svgContent && h("ds-icon", { key: 'e9a0b074084f5952ef5eefcd9d434b6af15b6a5f', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), h("span", { key: 'd65d767a79e0e8094d7ccb88f4902321b14b03be', part: "content", id: "content" }, this.heading && h("h2", { key: '463d2b5b335d804d572347e229b0b94f97f9b9b7', part: "heading" }, this.heading), h("span", { key: 'd964774c987ef6906bd76bb6982f16ad1c4f9e3a', part: "message" }, this.message, h("slot", { key: 'bacfa9ac71c53f0223fb0a62b6fc1fca526acd3a' }))), h("ds-button-group", { key: 'e83047c52b2dda1709df234871e3dbb3e3755c95', part: "action", id: "action" }, h("slot", { key: 'ea3fed1cdf6c5f73d459aa097c00a677ecfc33c7', name: "action" }), this.action && (h("ds-button", { key: 'eb1607a6468a84b66c03af8ef4772e877bf149d7', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
|
|
161
165
|
stopEventBubbling(ev);
|
|
162
166
|
this.dsActionClick.emit(ev);
|
|
163
167
|
this.actionHandler(this.alertId);
|
|
164
|
-
} }, this.action)), this.closable && (h("ds-close", { key: '
|
|
168
|
+
} }, this.action)), this.closable && (h("ds-close", { key: '7d9abbb81fc6fae5a78ca68d993e7376178aaa39', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
|
|
165
169
|
stopEventBubbling(ev);
|
|
166
170
|
this.close();
|
|
167
171
|
} })))));
|
|
@@ -625,6 +629,14 @@ __decorate([
|
|
|
625
629
|
Type('string'),
|
|
626
630
|
__metadata("design:type", String)
|
|
627
631
|
], Snackbar.prototype, "actionHref", void 0);
|
|
632
|
+
__decorate([
|
|
633
|
+
Type('string'),
|
|
634
|
+
__metadata("design:type", String)
|
|
635
|
+
], Snackbar.prototype, "alertId", void 0);
|
|
636
|
+
__decorate([
|
|
637
|
+
Type('boolean'),
|
|
638
|
+
__metadata("design:type", Boolean)
|
|
639
|
+
], Snackbar.prototype, "visible", void 0);
|
|
628
640
|
__decorate([
|
|
629
641
|
ListenToBreakpoints(),
|
|
630
642
|
__metadata("design:type", Function),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{--_toast-position: var(--toast-position, var(--mod-toast-position, static));--_toast-top: var(--toast-top, var(--mod-toast-top));--_toast-right: var(--toast-right, var(--mod-toast-right));--_toast-bottom: var(--toast-bottom, var(--mod-toast-bottom));--_toast-left: var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m: var(--toast-m, var(--mod-toast-m, 0));--_toast-my: var(--toast-my, var(--mod-toast-my));--_toast-mx: var(--toast-mx, var(--mod-toast-mx));--_toast-ml: var(--toast-ml, var(--mod-toast-ml));--_toast-mr: var(--toast-mr, var(--mod-toast-mr));--_toast-mt: var(--toast-mt, var(--mod-toast-mt));--_toast-mb: var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow: var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius: var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg: var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-primary-color-
|
|
1
|
+
:host{--_toast-position: var(--toast-position, var(--mod-toast-position, static));--_toast-top: var(--toast-top, var(--mod-toast-top));--_toast-right: var(--toast-right, var(--mod-toast-right));--_toast-bottom: var(--toast-bottom, var(--mod-toast-bottom));--_toast-left: var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m: var(--toast-m, var(--mod-toast-m, 0));--_toast-my: var(--toast-my, var(--mod-toast-my));--_toast-mx: var(--toast-mx, var(--mod-toast-mx));--_toast-ml: var(--toast-ml, var(--mod-toast-ml));--_toast-mr: var(--toast-mr, var(--mod-toast-mr));--_toast-mt: var(--toast-mt, var(--mod-toast-mt));--_toast-mb: var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow: var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius: var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg: var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-primary-color-background-base)));--_toast-color: var(--toast-color, var(--mod-toast-color, var(--ds-toast-primary-color-text-base)));--_toast-icon-color: var(--toast-icon-color, var(--mod-toast-icon-color, var(--ds-toast-primary-color-icon-base)));--_toast-progress-duration: var(--toast-progress-duration, var(--mod-toast-progress-duration, 0));--_toast-progress-bar-bg: var(--toast-progress-bar-bg, var(--mod-toast-progress-bar-bg, var(--ds-toast-primary-color-progress-bar-base)));--_toast-progress-bg: var(--toast-progress-bg, var(--mod-toast-progress-bg, var(--ds-toast-primary-color-progress-background-base)));--_toast-heading-font-family: var(--toast-heading-font-family, var(--mod-toast-heading-font-family, var(--ds-alias-text-family-heading)));--_toast-heading-font-weight: var(--toast-heading-font-weight, var(--mod-toast-heading-font-weight, var(--ds-alias-text-weight-bold)));--_toast-heading-font-size: var(--toast-heading-font-size, var(--mod-toast-heading-font-size, var(--ds-alias-text-size-base-device)));--_toast-heading-line-height: var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--ds-alias-text-line-height-heading)));--_toast-content-font-family: var(--toast-content-font-family, var(--mod-toast-content-font-family, var(--ds-alias-text-family-body)));--_toast-content-font-weight: var(--toast-content-font-weight, var(--mod-toast-content-font-weight, inherit));--_toast-content-font-size: var(--toast-content-font-size, var(--mod-toast-content-font-size, var(--ds-alias-text-size-sm-device)));--_toast-content-line-height: var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--ds-alias-text-line-height-body)));--_toast-gap: var(--toast-gap, var(--mod-toast-gap, 0.125rem));--_toast-p: var(--toast-p, var(--mod-toast-p, 1rem));--_toast-animation-start-opacity: var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));--_toast-animation-start-transform: var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));--_toast-animation-transition: var(--toast-animation-transition, var(--mod-toast-animation-transition, none));--_toast-animation-end-opacity: var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));--_toast-animation-end-transform: var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}@media print{:host{display:none !important}}:host{opacity:var(--_toast-animation-start-opacity);transform:var(--_toast-animation-start-transform);flex:1;position:relative;hyphens:auto;color:var(--_toast-color);background:var(--_toast-bg);border-radius:var(--_toast-radius);box-shadow:var(--_toast-shadow);padding:var(--_toast-p);column-gap:calc(var(--_toast-gap)*4);row-gap:var(--_toast-gap);align-items:center;width:100%}:host ds-icon:not([name]){--icon-color: null;--icon-size: var(--ds-icon-size-lg)}:host #icon{grid-area:icon}:host #content{margin:0 !important;grid-area:content;display:flex;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_toast-heading-font-family);font-weight:var(--_toast-heading-font-weight);line-height:var(--_toast-heading-line-height);font-size:var(--_toast-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_toast-content-font-family);font-size:var(--_toast-content-font-size);font-weight:var(--_toast-content-font-weight);line-height:var(--_toast-content-line-height)}:host ds-button,:host .button{--button-mt: 0;grid-area:action;align-self:center}:host .close,:host ds-close{grid-area:close;align-self:center}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content"}:host(.is-closable:not(.is-action)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close"}:host(.is-action:not(.is-closable)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action"}:host(.is-action.is-closable){grid-template-columns:auto 1fr auto auto;grid-template-areas:"icon content action close"}:host(.is-ready){transition:var(--_toast-animation-transition)}:host(.is-visible){opacity:var(--_toast-animation-end-opacity);transform:var(--_toast-animation-end-transform)}:host(.has-progress-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_toast-progress-bg);border-bottom-left-radius:var(--_toast-radius);border-bottom-right-radius:var(--_toast-radius)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-info){--mod-toast-color: var(--ds-toast-info-color-text-base);--mod-toast-border-color: var(--ds-toast-info-color-border-base);--mod-toast-bg: var(--ds-toast-info-color-background-base);--mod-toast-icon-color: var(--ds-toast-info-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-info-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-info-color-progress-background-base)}:host(.is-success){--mod-toast-color: var(--ds-toast-success-color-text-base);--mod-toast-border-color: var(--ds-toast-success-color-border-base);--mod-toast-bg: var(--ds-toast-success-color-background-base);--mod-toast-icon-color: var(--ds-toast-success-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-success-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-success-color-progress-background-base)}:host(.is-warning){--mod-toast-color: var(--ds-toast-warning-color-text-base);--mod-toast-border-color: var(--ds-toast-warning-color-border-base);--mod-toast-bg: var(--ds-toast-warning-color-background-base);--mod-toast-icon-color: var(--ds-toast-warning-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-warning-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-warning-color-progress-background-base)}:host(.is-danger){--mod-toast-color: var(--ds-toast-danger-color-text-base);--mod-toast-border-color: var(--ds-toast-danger-color-border-base);--mod-toast-bg: var(--ds-toast-danger-color-background-base);--mod-toast-icon-color: var(--ds-toast-danger-color-icon-base);--mod-toast-progress-bar-bg: var(--ds-toast-danger-color-progress-bar-base);--mod-toast-progress-bg: var(--ds-toast-danger-color-progress-background-base)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-paused)::after{animation-play-state:paused}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}
|
|
@@ -19,6 +19,10 @@ export class Toast {
|
|
|
19
19
|
this.animated = false;
|
|
20
20
|
this.didLoad = false;
|
|
21
21
|
this.didPause = false;
|
|
22
|
+
/**
|
|
23
|
+
* PUBLIC PROPERTY API
|
|
24
|
+
* ─────────────────────────────────────────────────────
|
|
25
|
+
*/
|
|
22
26
|
/**
|
|
23
27
|
* Defines the color of the element
|
|
24
28
|
* Color type primary is deprecated, please use info instead.
|
|
@@ -77,7 +81,7 @@ export class Toast {
|
|
|
77
81
|
this.actionHandler = () => void 0;
|
|
78
82
|
/**
|
|
79
83
|
* PRIVATE METHODS
|
|
80
|
-
*
|
|
84
|
+
* ─────────────────────────────────────────────────────
|
|
81
85
|
*/
|
|
82
86
|
this.generateSvgContent = () => {
|
|
83
87
|
if (hasValue(this.svg)) {
|
|
@@ -110,7 +114,7 @@ export class Toast {
|
|
|
110
114
|
}
|
|
111
115
|
/**
|
|
112
116
|
* LIFECYCLE
|
|
113
|
-
*
|
|
117
|
+
* ─────────────────────────────────────────────────────
|
|
114
118
|
*/
|
|
115
119
|
componentDidLoad() {
|
|
116
120
|
raf(() => {
|
|
@@ -120,7 +124,7 @@ export class Toast {
|
|
|
120
124
|
}
|
|
121
125
|
/**
|
|
122
126
|
* PUBLIC METHODS
|
|
123
|
-
*
|
|
127
|
+
* ─────────────────────────────────────────────────────
|
|
124
128
|
*/
|
|
125
129
|
/**
|
|
126
130
|
* Closes this notification
|
|
@@ -137,7 +141,7 @@ export class Toast {
|
|
|
137
141
|
}
|
|
138
142
|
/**
|
|
139
143
|
* RENDER
|
|
140
|
-
*
|
|
144
|
+
* ─────────────────────────────────────────────────────
|
|
141
145
|
*/
|
|
142
146
|
render() {
|
|
143
147
|
const iconName = this.generateIconName();
|
|
@@ -149,7 +153,7 @@ export class Toast {
|
|
|
149
153
|
'--toast-progress-duration': `${this.duration}ms`,
|
|
150
154
|
}
|
|
151
155
|
: {};
|
|
152
|
-
return (h(Host, { key: '
|
|
156
|
+
return (h(Host, { key: 'd4ca47796b7b5927412383a15311e794ae217be4', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: {
|
|
153
157
|
[`is-ready`]: this.didLoad,
|
|
154
158
|
[`is-paused`]: this.didPause,
|
|
155
159
|
[`is-visible`]: this.visible,
|
|
@@ -163,7 +167,7 @@ export class Toast {
|
|
|
163
167
|
}, onMouseLeave: () => {
|
|
164
168
|
this.didPause = false;
|
|
165
169
|
this.dsDidResume.emit();
|
|
166
|
-
} }, !hasValue(svgContent) && (h("ds-icon", { key: '
|
|
170
|
+
} }, !hasValue(svgContent) && (h("ds-icon", { key: '69dad798037879665cfcac7c2c4c5202e59398ff', id: "icon", part: "icon", name: iconName || this.color === 'warning'
|
|
167
171
|
? 'alert'
|
|
168
172
|
: this.color === 'danger'
|
|
169
173
|
? 'alert'
|
|
@@ -175,11 +179,11 @@ export class Toast {
|
|
|
175
179
|
? 'triangle'
|
|
176
180
|
: this.color === 'danger' || this.color === 'success' || this.color === 'info'
|
|
177
181
|
? 'circle'
|
|
178
|
-
: undefined })), hasValue(svgContent) && h("ds-icon", { key: '
|
|
182
|
+
: undefined })), hasValue(svgContent) && h("ds-icon", { key: 'a6ba300bdb84ba361450bb08059293a6a533de37', id: "icon", part: "icon", svg: svgContent }), h("span", { key: '0c1dcbd34ccd9e8d4f5fa8abf575c8de78af23ca', part: "content", id: "content" }, this.heading && h("h2", { key: 'e0f1f64c75f147c46ffbc7fcd38df70b79d1788d', part: "heading" }, this.heading), h("span", { key: 'b61f2943532f86a484ab688253a8e7a04327c00b', part: "message" }, this.message, h("slot", { key: 'e9924f719790067a6e2bdb136b18dec3841f04ae' }))), hasValue(this.action) && (h("ds-button", { key: 'ba37a92ae3638e6304ddca76b9793003455e79eb', id: "action", color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
|
|
179
183
|
stopEventBubbling(ev);
|
|
180
184
|
this.dsActionClick.emit(ev);
|
|
181
185
|
this.actionHandler(this.alertId);
|
|
182
|
-
} }, this.action)), this.closable && (h("ds-close", { key: '
|
|
186
|
+
} }, this.action)), this.closable && (h("ds-close", { key: '1b2978686c359bb6b6cf6f9e40bd8a693b8480cd', part: "close", onClick: ev => {
|
|
183
187
|
stopEventBubbling(ev);
|
|
184
188
|
this.close();
|
|
185
189
|
} }))));
|
|
@@ -739,6 +743,14 @@ __decorate([
|
|
|
739
743
|
Type('string'),
|
|
740
744
|
__metadata("design:type", String)
|
|
741
745
|
], Toast.prototype, "actionHref", void 0);
|
|
746
|
+
__decorate([
|
|
747
|
+
Type('string'),
|
|
748
|
+
__metadata("design:type", String)
|
|
749
|
+
], Toast.prototype, "alertId", void 0);
|
|
750
|
+
__decorate([
|
|
751
|
+
Type('boolean'),
|
|
752
|
+
__metadata("design:type", Boolean)
|
|
753
|
+
], Toast.prototype, "visible", void 0);
|
|
742
754
|
__decorate([
|
|
743
755
|
ListenToConfig(),
|
|
744
756
|
__metadata("design:type", Function),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:host{--_notification-position: var(--notification-position, var(--mod-notification-position, static));--_notification-top: var(--notification-top, var(--mod-notification-top));--_notification-right: var(--notification-right, var(--mod-notification-right));--_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));--_notification-left: var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m: var(--notification-m, var(--mod-notification-m, 0));--_notification-my: var(--notification-my, var(--mod-notification-my));--_notification-mx: var(--notification-mx, var(--mod-notification-mx));--_notification-ml: var(--notification-ml, var(--mod-notification-ml));--_notification-mr: var(--notification-mr, var(--mod-notification-mr));--_notification-mt: var(--notification-mt, var(--mod-notification-mt));--_notification-mb: var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-color-
|
|
1
|
+
:host{--_notification-position: var(--notification-position, var(--mod-notification-position, static));--_notification-top: var(--notification-top, var(--mod-notification-top));--_notification-right: var(--notification-right, var(--mod-notification-right));--_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));--_notification-left: var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m: var(--notification-m, var(--mod-notification-m, 0));--_notification-my: var(--notification-my, var(--mod-notification-my));--_notification-mx: var(--notification-mx, var(--mod-notification-mx));--_notification-ml: var(--notification-ml, var(--mod-notification-ml));--_notification-mr: var(--notification-mr, var(--mod-notification-mr));--_notification-mt: var(--notification-mt, var(--mod-notification-mt));--_notification-mb: var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-base-color-background)));--_notification-color-border: var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-base-color-border)));--_notification-color-text: var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-base-color-text)));--_notification-heading-family: var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-alias-text-family-heading)));--_notification-heading-weight: var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-alias-text-weight-bold)));--_notification-heading-size: var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-alias-text-size-lg-device)));--_notification-heading-line-height: var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-alias-text-line-height-heading)));--_notification-content-family: var(--notification-content-family, var(--mod-notification-content-family, var(--ds-alias-text-family-body)));--_notification-content-weight: var(--notification-content-weight, var(--mod-notification-content-weight, inherit));--_notification-content-size: var(--notification-content-size, var(--mod-notification-content-size, var(--ds-alias-text-size-base-device)));--_notification-content-line-height: var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-alias-text-line-height-body)));--_notification-icon: var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-base-color-icon)));--_notification-icon-display: var(--notification-icon-display, var(--mod-notification-icon-display, block));--_notification-space: var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));--_notification-icon-space: var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));--_notification-close-offset: var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));--_notification-gap: var(--notification-gap, var(--mod-notification-gap, 0.125rem));--_notification-close-position: var(--notification-close-position, var(--mod-notification-close-position, absolute));--_notification-close-right: var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));--_notification-close-top: var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));--_notification-animation-start-opacity: var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));--_notification-animation-start-transform: var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));--_notification-animation-transition: var(--notification-animation-transition, var(--mod-notification-animation-transition, none));--_notification-animation-end-opacity: var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));--_notification-animation-end-transform: var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none))}#notification{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;flex:1;position:relative;hyphens:auto;border:var(--ds-alias-border-width-base) solid var(--_notification-color-border);border-radius:var(--_notification-radius);background:var(--_notification-color-background);color:var(--_notification-color-text);padding-top:var(--_notification-space);padding-right:var(--_notification-space);padding-bottom:var(--_notification-space);padding-left:calc(var(--_notification-space) + var(--_notification-icon-space));display:flex;flex-direction:column;gap:var(--_notification-gap)}#notification ds-close,#notification .close{position:var(--_notification-close-position);top:var(--_notification-close-top);right:var(--_notification-close-right)}#notification>h2{font-family:var(--_notification-heading-family);font-weight:var(--_notification-heading-weight);line-height:var(--_notification-heading-line-height);font-size:var(--_notification-heading-size);margin:0 !important}#notification:has(.close)>h2::before,#notification:has(ds-close)>h2::before{content:"";float:right;width:24px;height:calc(var(--_notification-heading-line-height)*16px)}#notification>span,#notification>p{font-family:var(--_notification-content-family);font-size:var(--_notification-content-size);font-weight:var(--_notification-content-weight);line-height:var(--_notification-content-line-height);margin:0 !important}#notification::before{display:var(--_notification-icon-display);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:-0.25rem;top:calc((var(--_notification-space)));transform:translateX(var(--_notification-space));content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:var(--_notification-icon);-webkit-mask-image:var(--_notification-icon)}:host(.has-no-icon){--mod-notification-icon-display: none;--mod-notification-icon-space: 0rem}:host(.is-info){--mod-notification-color-text: var(--ds-notification-info-color-text);--mod-notification-color-border: var(--ds-notification-info-color-border);--mod-notification-color-background: var(--ds-notification-info-color-background);--mod-notification-icon: var(--ds-notification-info-color-icon)}:host(.is-success){--mod-notification-color-text: var(--ds-notification-success-color-text);--mod-notification-color-border: var(--ds-notification-success-color-border);--mod-notification-color-background: var(--ds-notification-success-color-background);--mod-notification-icon: var(--ds-notification-success-color-icon)}:host(.is-warning){--mod-notification-color-text: var(--ds-notification-warning-color-text);--mod-notification-color-border: var(--ds-notification-warning-color-border);--mod-notification-color-background: var(--ds-notification-warning-color-background);--mod-notification-icon: var(--ds-notification-warning-color-icon)}:host(.is-danger){--mod-notification-color-text: var(--ds-notification-danger-color-text);--mod-notification-color-border: var(--ds-notification-danger-color-border);--mod-notification-color-background: var(--ds-notification-danger-color-background);--mod-notification-icon: var(--ds-notification-danger-color-icon)}:host(.is-outline-base){--mod-notification-color-text: var(--ds-notification-outline-base-color-text);--mod-notification-color-border: var(--ds-notification-outline-base-color-border);--mod-notification-color-background: var(--ds-notification-outline-base-color-background);--mod-notification-icon: var(--ds-notification-outline-base-color-icon)}:host(.is-outline-purple){--mod-notification-color-text: var(--ds-notification-outline-purple-color-text);--mod-notification-color-border: var(--ds-notification-outline-purple-color-border);--mod-notification-color-background: var(--ds-notification-outline-purple-color-background);--mod-notification-icon: var(--ds-notification-outline-purple-color-icon)}:host(.is-outline-green){--mod-notification-color-text: var(--ds-notification-outline-green-color-text);--mod-notification-color-border: var(--ds-notification-outline-green-color-border);--mod-notification-color-background: var(--ds-notification-outline-green-color-background);--mod-notification-icon: var(--ds-notification-outline-green-color-icon)}:host(.is-outline-yellow){--mod-notification-color-text: var(--ds-notification-outline-yellow-color-text);--mod-notification-color-border: var(--ds-notification-outline-yellow-color-border);--mod-notification-color-background: var(--ds-notification-outline-yellow-color-background);--mod-notification-icon: var(--ds-notification-outline-yellow-color-icon)}:host(.is-outline-red){--mod-notification-color-text: var(--ds-notification-outline-red-color-text);--mod-notification-color-border: var(--ds-notification-outline-red-color-border);--mod-notification-color-background: var(--ds-notification-outline-red-color-background);--mod-notification-icon: var(--ds-notification-outline-red-color-icon)}:host(.is-sm){--mod-notification-space: var(--ds-card-space-sm-device)}:host(.is-md){--mod-notification-space: var(--ds-card-space-md-device)}:host(.is-lg){--mod-notification-space: var(--ds-card-space-lg-device)}:host{display:block}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
|
|
3
3
|
*/
|
|
4
|
-
export const NOTIFICATION_SIZES = ['sm', 'md', 'lg', '
|
|
4
|
+
export const NOTIFICATION_SIZES = ['sm', 'md', 'lg', 'small', 'medium', 'large'];
|
|
5
5
|
export const NOTIFICATION_COLORS = [
|
|
6
|
-
'',
|
|
7
6
|
'base',
|
|
8
7
|
'info',
|
|
9
8
|
'success',
|
|
@@ -18,7 +18,7 @@ export class Notification {
|
|
|
18
18
|
this.didLoad = false;
|
|
19
19
|
/**
|
|
20
20
|
* PUBLIC PROPERTY API
|
|
21
|
-
*
|
|
21
|
+
* ─────────────────────────────────────────────────────
|
|
22
22
|
*/
|
|
23
23
|
/**
|
|
24
24
|
* If `true` the notification will be displayed as an alert, otherwise as a status message.
|
|
@@ -32,11 +32,6 @@ export class Notification {
|
|
|
32
32
|
* @internal Handler for on close event
|
|
33
33
|
*/
|
|
34
34
|
this.closeHandler = () => void 0;
|
|
35
|
-
/**
|
|
36
|
-
* Defines the color of the element
|
|
37
|
-
* Color type primary is deprecated, please use info instead.
|
|
38
|
-
*/
|
|
39
|
-
this.color = '';
|
|
40
35
|
/**
|
|
41
36
|
* Defines the heading of the notification.
|
|
42
37
|
*/
|
|
@@ -51,7 +46,7 @@ export class Notification {
|
|
|
51
46
|
}
|
|
52
47
|
/**
|
|
53
48
|
* LIFECYCLE
|
|
54
|
-
*
|
|
49
|
+
* ─────────────────────────────────────────────────────
|
|
55
50
|
*/
|
|
56
51
|
componentDidLoad() {
|
|
57
52
|
this.didLoad = true;
|
|
@@ -59,7 +54,7 @@ export class Notification {
|
|
|
59
54
|
}
|
|
60
55
|
/**
|
|
61
56
|
* PUBLIC METHODS
|
|
62
|
-
*
|
|
57
|
+
* ─────────────────────────────────────────────────────
|
|
63
58
|
*/
|
|
64
59
|
/**
|
|
65
60
|
* Closes this notification
|
|
@@ -70,21 +65,21 @@ export class Notification {
|
|
|
70
65
|
}
|
|
71
66
|
/**
|
|
72
67
|
* RENDER
|
|
73
|
-
*
|
|
68
|
+
* ─────────────────────────────────────────────────────
|
|
74
69
|
*/
|
|
75
70
|
render() {
|
|
76
71
|
const size = normalizeDeprecatedTShirtSize(this.size) || '';
|
|
77
72
|
const a11yAttributes = this.alert
|
|
78
73
|
? { 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' }
|
|
79
74
|
: { 'role': 'status', 'aria-live': 'polite', 'aria-atomic': 'true' };
|
|
80
|
-
return (h(Host, Object.assign({ key: '
|
|
75
|
+
return (h(Host, Object.assign({ key: 'c3dfeb924f2eff0258b2e3e8d191066e606c1717' }, a11yAttributes, { class: {
|
|
81
76
|
'has-no-icon': this.noIcon,
|
|
82
77
|
[`is-${this.color}`]: hasValue(this.color),
|
|
83
78
|
[`is-${size}`]: hasValue(this.size),
|
|
84
|
-
} }), h("section", { key: '
|
|
79
|
+
} }), h("section", { key: 'bb25cab8e27de885d570db0a6255f8dbab2d94fe', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: '2c3468c64ca1b011d63815e65f466b308d3bb624', part: "close", onClick: ev => {
|
|
85
80
|
stopEventBubbling(ev);
|
|
86
81
|
this.close();
|
|
87
|
-
} })), hasValue(this.heading) && h("h2", { key: '
|
|
82
|
+
} })), hasValue(this.heading) && h("h2", { key: '69c9eccaf9154cfd398564d1a915dab0afbc1033', part: "heading" }, this.heading), h("span", { key: 'f8f3a07f74a2ae6a4ac1b4ff026f8a794b236c5d' }, h("slot", { key: '05feb23000c982c3d90778b1eae1180b5ebd1add' })))));
|
|
88
83
|
}
|
|
89
84
|
static get is() { return "ds-notification"; }
|
|
90
85
|
static get encapsulation() { return "shadow"; }
|
|
@@ -166,7 +161,7 @@ export class Notification {
|
|
|
166
161
|
"mutable": false,
|
|
167
162
|
"complexType": {
|
|
168
163
|
"original": "NotificationColor",
|
|
169
|
-
"resolved": "\"
|
|
164
|
+
"resolved": "\"base\" | \"danger\" | \"info\" | \"outline-base\" | \"outline-green\" | \"outline-purple\" | \"outline-red\" | \"outline-yellow\" | \"success\" | \"warning\" | undefined",
|
|
170
165
|
"references": {
|
|
171
166
|
"NotificationColor": {
|
|
172
167
|
"location": "import",
|
|
@@ -177,7 +172,7 @@ export class Notification {
|
|
|
177
172
|
}
|
|
178
173
|
},
|
|
179
174
|
"required": false,
|
|
180
|
-
"optional":
|
|
175
|
+
"optional": true,
|
|
181
176
|
"docs": {
|
|
182
177
|
"tags": [],
|
|
183
178
|
"text": "Defines the color of the element\nColor type primary is deprecated, please use info instead."
|
|
@@ -185,8 +180,7 @@ export class Notification {
|
|
|
185
180
|
"getter": false,
|
|
186
181
|
"setter": false,
|
|
187
182
|
"reflect": false,
|
|
188
|
-
"attribute": "color"
|
|
189
|
-
"defaultValue": "''"
|
|
183
|
+
"attribute": "color"
|
|
190
184
|
},
|
|
191
185
|
"heading": {
|
|
192
186
|
"type": "string",
|
|
@@ -233,7 +227,7 @@ export class Notification {
|
|
|
233
227
|
"mutable": false,
|
|
234
228
|
"complexType": {
|
|
235
229
|
"original": "NotificationSize",
|
|
236
|
-
"resolved": "\"
|
|
230
|
+
"resolved": "\"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | undefined",
|
|
237
231
|
"references": {
|
|
238
232
|
"NotificationSize": {
|
|
239
233
|
"location": "import",
|
|
@@ -136,14 +136,7 @@ export class Steps {
|
|
|
136
136
|
const isNav = this.isNavigation();
|
|
137
137
|
const steps = this.getSteps();
|
|
138
138
|
const panels = this.getPanels();
|
|
139
|
-
|
|
140
|
-
// If the selected value is disabled, don't select any step
|
|
141
|
-
if (!isNav && effectiveValue) {
|
|
142
|
-
const selectedStep = steps.find((s) => s.name === effectiveValue);
|
|
143
|
-
if (selectedStep && (selectedStep.disabled || selectedStep.hasAttribute('disabled'))) {
|
|
144
|
-
effectiveValue = undefined;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
139
|
+
const effectiveValue = this.value;
|
|
147
140
|
const activeStep = steps.find(s => s.name === effectiveValue);
|
|
148
141
|
const activeIndex = activeStep ? activeStep.index : 0;
|
|
149
142
|
steps.forEach(step => {
|
|
@@ -26,6 +26,28 @@ test.describe('panels variant — initial state', () => {
|
|
|
26
26
|
await steps.assertPanelHidden('a');
|
|
27
27
|
await steps.assertPanelVisible('b');
|
|
28
28
|
});
|
|
29
|
+
test('keeps the panel of an explicitly set disabled step visible', async ({ page }) => {
|
|
30
|
+
// Regression test: a consumer may set `value` to a step whose header
|
|
31
|
+
// navigation is disabled (e.g. a wizard that only allows Back/Next
|
|
32
|
+
// buttons, never clicking step headers) while still expecting that
|
|
33
|
+
// step's own panel content to render. `updateChildren()` must not
|
|
34
|
+
// null out an explicitly-set value just because its step is disabled —
|
|
35
|
+
// that guard is unnecessary, since `activateStep()` already refuses to
|
|
36
|
+
// move `value` onto a disabled step via user interaction, and the
|
|
37
|
+
// initial auto-select in `setup()` never overrides an explicit value.
|
|
38
|
+
await page.mount(`
|
|
39
|
+
<ds-steps value="a">
|
|
40
|
+
<ds-step name="a" label="Cart" disabled></ds-step>
|
|
41
|
+
<ds-step name="b" label="Shipping"></ds-step>
|
|
42
|
+
<ds-step-panel for="a">Content A</ds-step-panel>
|
|
43
|
+
<ds-step-panel for="b">Content B</ds-step-panel>
|
|
44
|
+
</ds-steps>
|
|
45
|
+
`);
|
|
46
|
+
const steps = new DsSteps(page.locator('ds-steps'));
|
|
47
|
+
await steps.assertStepSelected('a');
|
|
48
|
+
await steps.assertPanelVisible('a');
|
|
49
|
+
await steps.assertPanelHidden('b');
|
|
50
|
+
});
|
|
29
51
|
test('skips disabled step when auto-selecting', async ({ page }) => {
|
|
30
52
|
await page.mount(`
|
|
31
53
|
<ds-steps>
|
|
@@ -87,9 +109,15 @@ test.describe('panels variant — interaction', () => {
|
|
|
87
109
|
`);
|
|
88
110
|
await page.keyboard.press('Tab');
|
|
89
111
|
await expect(page.locator('#before')).toBeFocused();
|
|
112
|
+
// The disabled step header itself is skipped — but its panel is still
|
|
113
|
+
// the active/visible one (see the "keeps the panel of an explicitly set
|
|
114
|
+
// disabled step visible" test above) and, per the ARIA tabpanel pattern,
|
|
115
|
+
// a visible ds-step-panel carries tabIndex=0 so it remains reachable.
|
|
90
116
|
await page.keyboard.press('Tab');
|
|
91
|
-
await expect(page.locator('#after')).toBeFocused();
|
|
92
117
|
await expect(page.locator('ds-step[name="b"]')).not.toBeFocused();
|
|
118
|
+
await expect(page.locator('ds-step-panel[for="b"]')).toBeFocused();
|
|
119
|
+
await page.keyboard.press('Tab');
|
|
120
|
+
await expect(page.locator('#after')).toBeFocused();
|
|
93
121
|
});
|
|
94
122
|
});
|
|
95
123
|
test.describe('panels variant — dsChange event', () => {
|