fluent-svelte-extra 2.1.9 → 2.2.0
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.
|
@@ -69,6 +69,10 @@
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
&anchor {
|
|
72
|
+
position: absolute;
|
|
73
|
+
z-index: 10000;
|
|
74
|
+
transform: var(--teaching-tip-transform);
|
|
75
|
+
|
|
72
76
|
:global(.teaching-tip-close-button) {
|
|
73
77
|
position: absolute;
|
|
74
78
|
inset-block-start: 6px;
|
|
@@ -82,58 +86,65 @@
|
|
|
82
86
|
}
|
|
83
87
|
}
|
|
84
88
|
|
|
85
|
-
position: absolute;
|
|
86
|
-
z-index: 10000;
|
|
87
|
-
transform: var(--teaching-tip-transform);
|
|
88
|
-
|
|
89
89
|
&.placement- {
|
|
90
90
|
--teaching-tip-transform: translateX(0%);
|
|
91
91
|
|
|
92
|
+
--caret-left: 50%;
|
|
93
|
+
--caret-right: auto;
|
|
94
|
+
--caret-top: 50%;
|
|
95
|
+
--caret-bottom: auto;
|
|
96
|
+
--caret-translate-x: -50%;
|
|
97
|
+
--caret-translate-y: -50%;
|
|
98
|
+
|
|
92
99
|
&top {
|
|
93
100
|
& .teaching-tip-caret {
|
|
94
101
|
bottom: -8px;
|
|
95
|
-
left:
|
|
96
|
-
|
|
102
|
+
left: var(--caret-left);
|
|
103
|
+
right: var(--caret-right);
|
|
104
|
+
transform: translate(var(--caret-translate-x), 0%) rotate(0deg);
|
|
97
105
|
}
|
|
98
106
|
|
|
99
107
|
transform-origin: bottom;
|
|
100
|
-
bottom: calc(100% + var(--teaching-tip-offset));
|
|
108
|
+
bottom: calc(100% + var(--fds-teaching-tip-offset));
|
|
101
109
|
--teaching-tip-transition-offset: translateY(12px);
|
|
102
110
|
}
|
|
103
111
|
|
|
104
112
|
&bottom {
|
|
105
113
|
& .teaching-tip-caret {
|
|
106
114
|
top: -8px;
|
|
107
|
-
left:
|
|
108
|
-
|
|
115
|
+
left: var(--caret-left);
|
|
116
|
+
right: var(--caret-right);
|
|
117
|
+
transform: translate(var(--caret-translate-x), 0%) rotate(180deg);
|
|
109
118
|
}
|
|
110
119
|
|
|
111
120
|
transform-origin: top;
|
|
112
|
-
top: calc(100% + var(--teaching-tip-offset));
|
|
121
|
+
top: calc(100% + var(--fds-teaching-tip-offset));
|
|
113
122
|
--teaching-tip-transition-offset: translateY(-12px);
|
|
114
123
|
}
|
|
115
124
|
|
|
116
125
|
&left {
|
|
117
126
|
& .teaching-tip-caret {
|
|
118
127
|
right: -11px;
|
|
119
|
-
top:
|
|
120
|
-
|
|
128
|
+
top: var(--caret-top);
|
|
129
|
+
bottom: var(--caret-bottom);
|
|
130
|
+
transform: translate(0%, var(--caret-translate-y)) rotate(270deg);
|
|
121
131
|
}
|
|
122
132
|
|
|
123
133
|
transform-origin: right;
|
|
124
|
-
right: calc(100% + var(--teaching-tip-offset));
|
|
134
|
+
right: calc(100% + var(--fds-teaching-tip-offset));
|
|
125
135
|
--teaching-tip-transition-offset: translateX(12px);
|
|
126
136
|
}
|
|
127
137
|
|
|
128
138
|
&right {
|
|
129
139
|
& .teaching-tip-caret {
|
|
130
140
|
left: -11px;
|
|
131
|
-
top:
|
|
132
|
-
|
|
141
|
+
top: var(--caret-top);
|
|
142
|
+
bottom: var(--caret-bottom);
|
|
143
|
+
transform: translate(0%, var(--caret-translate-y)) rotate(90deg);
|
|
133
144
|
}
|
|
134
145
|
|
|
135
146
|
transform-origin: left;
|
|
136
|
-
left: calc(100% + var(--teaching-tip-offset));
|
|
147
|
+
left: calc(100% + var(--fds-teaching-tip-offset));
|
|
137
148
|
--teaching-tip-transition-offset: translateX(-12px);
|
|
138
149
|
}
|
|
139
150
|
|
|
@@ -143,16 +154,25 @@
|
|
|
143
154
|
&start {
|
|
144
155
|
inset-inline-start: 0;
|
|
145
156
|
--teaching-tip-transform: translateX(0%);
|
|
157
|
+
--caret-left: calc(var(--fds-trigger-width, 32px) / 2);
|
|
158
|
+
--caret-right: auto;
|
|
159
|
+
--caret-translate-x: -50%;
|
|
146
160
|
}
|
|
147
161
|
|
|
148
162
|
&end {
|
|
149
163
|
inset-inline-end: 0;
|
|
150
164
|
--teaching-tip-transform: translateX(0%);
|
|
165
|
+
--caret-left: auto;
|
|
166
|
+
--caret-right: calc(var(--fds-trigger-width, 32px) / 2);
|
|
167
|
+
--caret-translate-x: 50%;
|
|
151
168
|
}
|
|
152
169
|
|
|
153
170
|
¢er {
|
|
154
171
|
inset-inline-start: 50%;
|
|
155
172
|
--teaching-tip-transform: translateX(-50%);
|
|
173
|
+
--caret-left: 50%;
|
|
174
|
+
--caret-right: auto;
|
|
175
|
+
--caret-translate-x: -50%;
|
|
156
176
|
}
|
|
157
177
|
}
|
|
158
178
|
}
|
|
@@ -163,16 +183,25 @@
|
|
|
163
183
|
&start {
|
|
164
184
|
inset-block-start: 0;
|
|
165
185
|
--teaching-tip-transform: translateY(0%);
|
|
186
|
+
--caret-top: calc(var(--fds-trigger-height, 32px) / 2);
|
|
187
|
+
--caret-bottom: auto;
|
|
188
|
+
--caret-translate-y: -50%;
|
|
166
189
|
}
|
|
167
190
|
|
|
168
191
|
&end {
|
|
169
192
|
inset-block-end: 0;
|
|
170
193
|
--teaching-tip-transform: translateY(0%);
|
|
194
|
+
--caret-top: auto;
|
|
195
|
+
--caret-bottom: calc(var(--fds-trigger-height, 32px) / 2);
|
|
196
|
+
--caret-translate-y: 50%;
|
|
171
197
|
}
|
|
172
198
|
|
|
173
199
|
¢er {
|
|
174
200
|
inset-block-start: 50%;
|
|
175
201
|
--teaching-tip-transform: translateY(-50%);
|
|
202
|
+
--caret-top: 50%;
|
|
203
|
+
--caret-bottom: auto;
|
|
204
|
+
--caret-translate-y: -50%;
|
|
176
205
|
}
|
|
177
206
|
}
|
|
178
207
|
}
|
|
@@ -47,6 +47,8 @@ export let backdropElement = null;
|
|
|
47
47
|
export let footerElement = null;
|
|
48
48
|
const dispatch = createEventDispatcher();
|
|
49
49
|
const menuId = uid("fds-teaching-tip-anchor-");
|
|
50
|
+
let wrapperWidth = 0;
|
|
51
|
+
let wrapperHeight = 0;
|
|
50
52
|
$: _focusTrap = trapFocus ? focusTrap : () => { };
|
|
51
53
|
$: if (open) {
|
|
52
54
|
dispatch("open");
|
|
@@ -138,6 +140,8 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
138
140
|
aria-controls={menuId}
|
|
139
141
|
on:keydown={handleKeyDown}
|
|
140
142
|
bind:this={wrapperElement}
|
|
143
|
+
bind:clientWidth={wrapperWidth}
|
|
144
|
+
bind:clientHeight={wrapperHeight}
|
|
141
145
|
>
|
|
142
146
|
<slot />
|
|
143
147
|
|
|
@@ -145,7 +149,7 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
145
149
|
<div
|
|
146
150
|
id={menuId}
|
|
147
151
|
class="teaching-tip-anchor placement-{placement} alignment-{alignment}"
|
|
148
|
-
style="--fds-teaching-tip-offset: {offset}px;"
|
|
152
|
+
style="--fds-teaching-tip-offset: {offset}px; --fds-trigger-width: {wrapperWidth}px; --fds-trigger-height: {wrapperHeight}px;"
|
|
149
153
|
use:_focusTrap
|
|
150
154
|
in:customScale|local={{
|
|
151
155
|
duration: getCSSDuration("--fds-control-slow-duration"),
|
|
@@ -166,50 +170,50 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
166
170
|
on:click={e => e.stopPropagation()}
|
|
167
171
|
{...$$restProps}
|
|
168
172
|
>
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
</div>
|
|
175
|
-
{/if}
|
|
176
|
-
<div class="teaching-tip-content">
|
|
177
|
-
{#if closeButton}
|
|
178
|
-
<IconButton
|
|
179
|
-
class="teaching-tip-close-button"
|
|
180
|
-
on:click={closeTeachingTip}
|
|
181
|
-
>
|
|
182
|
-
<svg
|
|
183
|
-
aria-hidden="true"
|
|
184
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
185
|
-
width="12"
|
|
186
|
-
height="12"
|
|
187
|
-
viewBox="0 0 1024 1024"
|
|
188
|
-
>
|
|
189
|
-
<path
|
|
190
|
-
fill="currentColor"
|
|
191
|
-
d="M512,584.5L87.5,1009C77.5,1019 65.5,1024 51.5,1024C36.8333,1024 24.5833,1019.08 14.75,1009.25C4.91667,999.417 0,987.167 0,972.5C0,958.5 5,946.5 15,936.5L439.5,512L15,87.5C5,77.5 0,65.3334 0,51C0,44 1.33333,37.3334 4,31C6.66667,24.6667 10.3333,19.25 15,14.75C19.6667,10.25 25.1667,6.66669 31.5,4C37.8333,1.33337 44.5,0 51.5,0C65.5,0 77.5,5 87.5,15L512,439.5L936.5,15C946.5,5 958.667,0 973,0C980,0 986.583,1.33337 992.75,4C998.917,6.66669 1004.33,10.3334 1009,15C1013.67,19.6667 1017.33,25.0834 1020,31.25C1022.67,37.4167 1024,44 1024,51C1024,65.3334 1019,77.5 1009,87.5L584.5,512L1009,936.5C1019,946.5 1024,958.5 1024,972.5C1024,979.5 1022.67,986.167 1020,992.5C1017.33,998.833 1013.75,1004.33 1009.25,1009C1004.75,1013.67 999.333,1017.33 993,1020C986.667,1022.67 980,1024 973,1024C958.667,1024 946.5,1019 936.5,1009Z"
|
|
192
|
-
/>
|
|
193
|
-
</svg>
|
|
194
|
-
</IconButton>
|
|
195
|
-
{/if}
|
|
196
|
-
{#if title}
|
|
197
|
-
<TextBlock class="teaching-tip-title" variant="bodyStrong">
|
|
198
|
-
{title}
|
|
199
|
-
</TextBlock>
|
|
200
|
-
{/if}
|
|
201
|
-
<slot name="flyout" />
|
|
202
|
-
{#if $$slots.footer}
|
|
203
|
-
<footer class="teaching-tip-footer" bind:this={footerElement}>
|
|
204
|
-
<slot name="footer" />
|
|
205
|
-
</footer>
|
|
206
|
-
{/if}
|
|
173
|
+
<slot name="override">
|
|
174
|
+
<TeachingTipSurface bind:element={menuElement} {acrylic}>
|
|
175
|
+
{#if src && imagePlacement === "top"}
|
|
176
|
+
<div bind:clientHeight={imageHeight}>
|
|
177
|
+
<img class="teaching-tip-image placement-top" {src} alt={title} />
|
|
207
178
|
</div>
|
|
208
|
-
|
|
209
|
-
|
|
179
|
+
{/if}
|
|
180
|
+
<div class="teaching-tip-content">
|
|
181
|
+
{#if closeButton}
|
|
182
|
+
<IconButton
|
|
183
|
+
class="teaching-tip-close-button"
|
|
184
|
+
on:click={closeTeachingTip}
|
|
185
|
+
>
|
|
186
|
+
<svg
|
|
187
|
+
aria-hidden="true"
|
|
188
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
189
|
+
width="12"
|
|
190
|
+
height="12"
|
|
191
|
+
viewBox="0 0 1024 1024"
|
|
192
|
+
>
|
|
193
|
+
<path
|
|
194
|
+
fill="currentColor"
|
|
195
|
+
d="M512,584.5L87.5,1009C77.5,1019 65.5,1024 51.5,1024C36.8333,1024 24.5833,1019.08 14.75,1009.25C4.91667,999.417 0,987.167 0,972.5C0,958.5 5,946.5 15,936.5L439.5,512L15,87.5C5,77.5 0,65.3334 0,51C0,44 1.33333,37.3334 4,31C6.66667,24.6667 10.3333,19.25 15,14.75C19.6667,10.25 25.1667,6.66669 31.5,4C37.8333,1.33337 44.5,0 51.5,0C65.5,0 77.5,5 87.5,15L512,439.5L936.5,15C946.5,5 958.667,0 973,0C980,0 986.583,1.33337 992.75,4C998.917,6.66669 1004.33,10.3334 1009,15C1013.67,19.6667 1017.33,25.0834 1020,31.25C1022.67,37.4167 1024,44 1024,51C1024,65.3334 1019,77.5 1009,87.5L584.5,512L1009,936.5C1019,946.5 1024,958.5 1024,972.5C1024,979.5 1022.67,986.167 1020,992.5C1017.33,998.833 1013.75,1004.33 1009.25,1009C1004.75,1013.67 999.333,1017.33 993,1020C986.667,1022.67 980,1024 973,1024C958.667,1024 946.5,1019 936.5,1009Z"
|
|
196
|
+
/>
|
|
197
|
+
</svg>
|
|
198
|
+
</IconButton>
|
|
199
|
+
{/if}
|
|
200
|
+
{#if title}
|
|
201
|
+
<TextBlock class="teaching-tip-title" variant="bodyStrong">
|
|
202
|
+
{title}
|
|
203
|
+
</TextBlock>
|
|
204
|
+
{/if}
|
|
205
|
+
<slot name="flyout" />
|
|
206
|
+
{#if $$slots.footer}
|
|
207
|
+
<footer class="teaching-tip-footer" bind:this={footerElement}>
|
|
208
|
+
<slot name="footer" />
|
|
209
|
+
</footer>
|
|
210
210
|
{/if}
|
|
211
|
-
</
|
|
212
|
-
|
|
211
|
+
</div>
|
|
212
|
+
{#if src && imagePlacement === "bottom"}
|
|
213
|
+
<img class="teaching-tip-image placement-bottom" {src} alt={title} />
|
|
214
|
+
{/if}
|
|
215
|
+
</TeachingTipSurface>
|
|
216
|
+
</slot>
|
|
213
217
|
|
|
214
218
|
<svg
|
|
215
219
|
width="16"
|
|
@@ -242,4 +246,4 @@ TeachingTips represent a control that displays lightweight UI that is either inf
|
|
|
242
246
|
{/if}
|
|
243
247
|
</div>
|
|
244
248
|
|
|
245
|
-
<style >.teaching-tip-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.teaching-tip-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.teaching-tip-content{align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-start;padding:9px 12px 11px;position:relative}.teaching-tip-footer{-webkit-margin-before:8px;grid-gap:8px;display:grid;grid-auto-flow:column;grid-auto-rows:1fr;margin-block-start:8px;white-space:nowrap;width:100%}.teaching-tip-footer>:global(.button:only-child){inline-size:50%;justify-self:end}.teaching-tip-image{display:block;max-block-size:100%;max-inline-size:100%;position:relative;z-index:10}.teaching-tip-image.placement-top{-webkit-margin-after:4px;border-radius:var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius) 0 0;margin-block-end:4px}.teaching-tip-image.placement-bottom{-webkit-margin-before:4px;border-radius:0 0 var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius);margin-block-start:4px}.teaching-tip-caret{color:var(--fds-solid-background-quarternary);position:absolute;z-index:10000}.teaching-tip-caret .stroke{color:var(--fds-surface-stroke-default)}.teaching-tip-anchor{position:absolute;transform:var(--fds-teaching-tip-transform);z-index:10000}.teaching-tip-anchor :global(.teaching-tip-close-button){color:var(--fds-text-primary);inset-block-start:6px;inset-inline-end:6px;position:absolute;z-index:5}.teaching-tip-anchor :global(.teaching-tip-close-button) :global(svg){block-size:12px;inline-size:12px}.teaching-tip-anchor.placement-{--fds-teaching-tip-transform:translateX(0%)}.teaching-tip-anchor.placement-top{--fds-teaching-tip-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-teaching-tip-offset));transform-origin:bottom}.teaching-tip-anchor.placement-top .teaching-tip-caret{bottom:-8px;left:
|
|
249
|
+
<style >.teaching-tip-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.teaching-tip-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.teaching-tip-content{align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-start;padding:9px 12px 11px;position:relative}.teaching-tip-footer{-webkit-margin-before:8px;grid-gap:8px;display:grid;grid-auto-flow:column;grid-auto-rows:1fr;margin-block-start:8px;white-space:nowrap;width:100%}.teaching-tip-footer>:global(.button:only-child){inline-size:50%;justify-self:end}.teaching-tip-image{display:block;max-block-size:100%;max-inline-size:100%;position:relative;z-index:10}.teaching-tip-image.placement-top{-webkit-margin-after:4px;border-radius:var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius) 0 0;margin-block-end:4px}.teaching-tip-image.placement-bottom{-webkit-margin-before:4px;border-radius:0 0 var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius);margin-block-start:4px}.teaching-tip-caret{color:var(--fds-solid-background-quarternary);position:absolute;z-index:10000}.teaching-tip-caret .stroke{color:var(--fds-surface-stroke-default)}.teaching-tip-anchor{position:absolute;transform:var(--fds-teaching-tip-transform);z-index:10000}.teaching-tip-anchor :global(.teaching-tip-close-button){color:var(--fds-text-primary);inset-block-start:6px;inset-inline-end:6px;position:absolute;z-index:5}.teaching-tip-anchor :global(.teaching-tip-close-button) :global(svg){block-size:12px;inline-size:12px}.teaching-tip-anchor.placement-{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:50%;--fds-caret-right:auto;--fds-caret-top:50%;--fds-caret-bottom:auto;--fds-caret-translate-x:-50%;--fds-caret-translate-y:-50%}.teaching-tip-anchor.placement-top{--fds-teaching-tip-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-teaching-tip-offset));transform-origin:bottom}.teaching-tip-anchor.placement-top .teaching-tip-caret{bottom:-8px;left:var(--fds-caret-left);right:var(--fds-caret-right);transform:translate(var(--fds-caret-translate-x)) rotate(0deg)}.teaching-tip-anchor.placement-bottom{--fds-teaching-tip-transition-offset:translateY(-12px);top:calc(100% + var(--fds-teaching-tip-offset));transform-origin:top}.teaching-tip-anchor.placement-bottom .teaching-tip-caret{left:var(--fds-caret-left);right:var(--fds-caret-right);top:-8px;transform:translate(var(--fds-caret-translate-x)) rotate(180deg)}.teaching-tip-anchor.placement-left{--fds-teaching-tip-transition-offset:translateX(12px);right:calc(100% + var(--fds-teaching-tip-offset));transform-origin:right}.teaching-tip-anchor.placement-left .teaching-tip-caret{bottom:var(--fds-caret-bottom);right:-11px;top:var(--fds-caret-top);transform:translateY(var(--fds-caret-translate-y)) rotate(270deg)}.teaching-tip-anchor.placement-right{--fds-teaching-tip-transition-offset:translateX(-12px);left:calc(100% + var(--fds-teaching-tip-offset));transform-origin:left}.teaching-tip-anchor.placement-right .teaching-tip-caret{bottom:var(--fds-caret-bottom);left:-11px;top:var(--fds-caret-top);transform:translateY(var(--fds-caret-translate-y)) rotate(90deg)}.teaching-tip-anchor.placement-bottom.alignment-start,.teaching-tip-anchor.placement-top.alignment-start{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:calc(var(--fds-trigger-width, 32px)/2);--fds-caret-right:auto;--fds-caret-translate-x:-50%;inset-inline-start:0}.teaching-tip-anchor.placement-bottom.alignment-end,.teaching-tip-anchor.placement-top.alignment-end{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:auto;--fds-caret-right:calc(var(--fds-trigger-width, 32px)/2);--fds-caret-translate-x:50%;inset-inline-end:0}.teaching-tip-anchor.placement-bottom.alignment-center,.teaching-tip-anchor.placement-top.alignment-center{--fds-teaching-tip-transform:translateX(-50%);--fds-caret-left:50%;--fds-caret-right:auto;--fds-caret-translate-x:-50%;inset-inline-start:50%}.teaching-tip-anchor.placement-left.alignment-start,.teaching-tip-anchor.placement-right.alignment-start{--fds-teaching-tip-transform:translateY(0%);--fds-caret-top:calc(var(--fds-trigger-height, 32px)/2);--fds-caret-bottom:auto;--fds-caret-translate-y:-50%;inset-block-start:0}.teaching-tip-anchor.placement-left.alignment-end,.teaching-tip-anchor.placement-right.alignment-end{--fds-teaching-tip-transform:translateY(0%);--fds-caret-top:auto;--fds-caret-bottom:calc(var(--fds-trigger-height, 32px)/2);--fds-caret-translate-y:50%;inset-block-end:0}.teaching-tip-anchor.placement-left.alignment-center,.teaching-tip-anchor.placement-right.alignment-center{--fds-teaching-tip-transform:translateY(-50%);--fds-caret-top:50%;--fds-caret-bottom:auto;--fds-caret-translate-y:-50%;inset-block-start:50%}</style>
|
package/package.json
CHANGED