@juspay/svelte-ui-components 2.114.0 → 2.114.1
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/dist/Modal/Modal.svelte +27 -17
- package/package.json +1 -1
package/dist/Modal/Modal.svelte
CHANGED
|
@@ -158,25 +158,35 @@
|
|
|
158
158
|
{#if (typeof header?.leftImage === 'string' && header.leftImage.length > 0) || (typeof header?.text === 'string' && header.text.length > 0) || (typeof header?.rightImage === 'string' && header.rightImage.length > 0)}
|
|
159
159
|
<div class="header">
|
|
160
160
|
{#if typeof header.leftImage === 'string' && header.leftImage.length > 0}
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
onkeydown={handleLeftImageKeyDown}
|
|
164
|
-
role="button"
|
|
165
|
-
tabindex="0"
|
|
166
|
-
aria-label={leftImageAriaLabel ?? null}
|
|
167
|
-
data-pw={leftImageTestId}
|
|
168
|
-
testID={leftImageTestId}
|
|
169
|
-
>
|
|
161
|
+
{@const leftImageSrc = header.leftImage}
|
|
162
|
+
{#snippet leftImage()}
|
|
170
163
|
<!-- Inline SVGs so currentColor icons inherit the header text
|
|
171
164
|
colour; non-SVG URLs fall back to a plain <img>. -->
|
|
172
|
-
<Img
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
165
|
+
<Img inlineSvg src={leftImageSrc} alt="" fallback="" classes="header-left-img" />
|
|
166
|
+
{/snippet}
|
|
167
|
+
<!-- The left image is only a control when a click handler is actually supplied.
|
|
168
|
+
Consumers pass a decorative brand/source logo here far more often than a back
|
|
169
|
+
button, and announcing those as a focusable "button" that does nothing when
|
|
170
|
+
activated is worse for assistive tech than leaving them unannounced. The two
|
|
171
|
+
branches are written out rather than computed so the role/tabindex pairing
|
|
172
|
+
stays statically checkable. -->
|
|
173
|
+
{#if typeof onheaderLeftImageClick === 'function'}
|
|
174
|
+
<div
|
|
175
|
+
onclick={handleLeftImageClick}
|
|
176
|
+
onkeydown={handleLeftImageKeyDown}
|
|
177
|
+
role="button"
|
|
178
|
+
tabindex="0"
|
|
179
|
+
aria-label={leftImageAriaLabel ?? null}
|
|
180
|
+
data-pw={leftImageTestId}
|
|
181
|
+
testID={leftImageTestId}
|
|
182
|
+
>
|
|
183
|
+
{@render leftImage()}
|
|
184
|
+
</div>
|
|
185
|
+
{:else}
|
|
186
|
+
<div data-pw={leftImageTestId} testID={leftImageTestId}>
|
|
187
|
+
{@render leftImage()}
|
|
188
|
+
</div>
|
|
189
|
+
{/if}
|
|
180
190
|
{/if}
|
|
181
191
|
{#if typeof header.text === 'string' && header.text.length > 0}
|
|
182
192
|
<div class="header-text" data-pw={header.testId} testID={header.testId}>
|