fluent-svelte-extra 2.0.8 → 2.0.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/MenuFlyout/MenuFlyoutWrapper.svelte +7 -3
- package/TextBox/TextBox.svelte +121 -121
- package/package.json +1 -1
|
@@ -35,23 +35,27 @@ $: dispatch(open ? "open" : "close");
|
|
|
35
35
|
$: if (menu && tabbable(menuElement).length > 0)
|
|
36
36
|
tabbable(menuElement)[0].focus();
|
|
37
37
|
function handleEscapeKey({ key }) {
|
|
38
|
-
if (key === "Escape" && closable)
|
|
38
|
+
if (key === "Escape" && closable) {
|
|
39
39
|
open = false;
|
|
40
|
-
|
|
40
|
+
previousFocus === null || previousFocus === void 0 ? void 0 : previousFocus.focus();
|
|
41
|
+
}
|
|
41
42
|
}
|
|
42
43
|
function toggleFlyout() {
|
|
43
44
|
previousFocus = document.activeElement;
|
|
44
45
|
open = !open;
|
|
45
46
|
}
|
|
46
47
|
function closeFlyout() {
|
|
47
|
-
if (closable)
|
|
48
|
+
if (closable) {
|
|
48
49
|
open = false;
|
|
50
|
+
previousFocus = null;
|
|
51
|
+
}
|
|
49
52
|
}
|
|
50
53
|
setContext("closeFlyout", event => {
|
|
51
54
|
dispatch("select");
|
|
52
55
|
if (closeOnSelect && closable) {
|
|
53
56
|
event.stopPropagation();
|
|
54
57
|
open = false;
|
|
58
|
+
previousFocus = null;
|
|
55
59
|
}
|
|
56
60
|
});
|
|
57
61
|
</script>
|
package/TextBox/TextBox.svelte
CHANGED
|
@@ -77,124 +77,124 @@ $: inputProps = {
|
|
|
77
77
|
placeholder: placeholder || undefined,
|
|
78
78
|
...$$restProps
|
|
79
79
|
};
|
|
80
|
-
</script>
|
|
81
|
-
|
|
82
|
-
<!--
|
|
83
|
-
@component
|
|
84
|
-
The TextBox control lets a user type text into an app. The text displays on the screen in a simple, plaintext format on a single line. It additionally comes with a set of buttons which allow users to perform specialized actions on the text, such as showing a password or clearing the TextBox's contents. [Docs](https://fluent-svelte.vercel.app/docs/components/texbox)
|
|
85
|
-
- Usage:
|
|
86
|
-
```tsx
|
|
87
|
-
<TextBox placeholder="Enter your name." />
|
|
88
|
-
```
|
|
89
|
-
-->
|
|
90
|
-
<div
|
|
91
|
-
class="text-box-container {className}"
|
|
92
|
-
class:disabled
|
|
93
|
-
bind:this={containerElement}
|
|
94
|
-
use:externalMouseEvents={{ type: "mousedown" }}
|
|
95
|
-
on:outermousedown
|
|
96
|
-
>
|
|
97
|
-
<!-- Dirty workaround for the fact that svelte can't handle two-way binding when the input type is dynamic. -->
|
|
98
|
-
<!-- prettier-ignore -->
|
|
99
|
-
{#if type === "text"}
|
|
100
|
-
<input type="text" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
101
|
-
{:else if type === "number"}
|
|
102
|
-
<input type="number" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
103
|
-
{:else if type === "search"}
|
|
104
|
-
<input type="search" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
105
|
-
{:else if type === "password"}
|
|
106
|
-
<input type="password" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
107
|
-
{:else if type === "email"}
|
|
108
|
-
<input type="email" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
109
|
-
{:else if type === "tel"}
|
|
110
|
-
<input type="tel" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
111
|
-
{:else if type === "url"}
|
|
112
|
-
<input type="url" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
113
|
-
{:else if type === "date"}
|
|
114
|
-
<input type="date" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
115
|
-
{:else if type === "datetime-local"}
|
|
116
|
-
<input type="datetime-local" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
117
|
-
{:else if type === "month"}
|
|
118
|
-
<input type="month" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
119
|
-
{:else if type === "time"}
|
|
120
|
-
<input type="time" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
121
|
-
{:else if type === "week"}
|
|
122
|
-
<input type="week" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
123
|
-
{/if}
|
|
124
|
-
<div
|
|
125
|
-
class="text-box-underline"
|
|
126
|
-
style={disableBottomBorder
|
|
127
|
-
? "--fds-bottom-border: none;"
|
|
128
|
-
: "--fds-bottom-border: 1px solid var(--fds-control-strong-stroke-default);"}
|
|
129
|
-
/>
|
|
130
|
-
<div class="text-box-buttons" bind:this={buttonsContainerElement}>
|
|
131
|
-
{#if !disabled}
|
|
132
|
-
{#if clearButton && value && !readonly}
|
|
133
|
-
<TextBoxButton
|
|
134
|
-
class="text-box-clear-button"
|
|
135
|
-
aria-label="Clear value"
|
|
136
|
-
on:click={handleClear}
|
|
137
|
-
bind:element={clearButtonElement}
|
|
138
|
-
>
|
|
139
|
-
<svg
|
|
140
|
-
aria-hidden="true"
|
|
141
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
142
|
-
width="12"
|
|
143
|
-
height="12"
|
|
144
|
-
viewBox="0 0 12 12"
|
|
145
|
-
>
|
|
146
|
-
<path
|
|
147
|
-
fill="currentColor"
|
|
148
|
-
d="M2.08859 2.21569L2.14645 2.14645C2.32001 1.97288 2.58944 1.9536 2.78431 2.08859L2.85355 2.14645L6 5.293L9.14645 2.14645C9.34171 1.95118 9.65829 1.95118 9.85355 2.14645C10.0488 2.34171 10.0488 2.65829 9.85355 2.85355L6.707 6L9.85355 9.14645C10.0271 9.32001 10.0464 9.58944 9.91141 9.78431L9.85355 9.85355C9.67999 10.0271 9.41056 10.0464 9.21569 9.91141L9.14645 9.85355L6 6.707L2.85355 9.85355C2.65829 10.0488 2.34171 10.0488 2.14645 9.85355C1.95118 9.65829 1.95118 9.34171 2.14645 9.14645L5.293 6L2.14645 2.85355C1.97288 2.67999 1.9536 2.41056 2.08859 2.21569L2.14645 2.14645L2.08859 2.21569Z"
|
|
149
|
-
/>
|
|
150
|
-
</svg>
|
|
151
|
-
</TextBoxButton>
|
|
152
|
-
{/if}
|
|
153
|
-
{#if type === "search" && searchButton}
|
|
154
|
-
<TextBoxButton
|
|
155
|
-
aria-label="Search"
|
|
156
|
-
on:click={handleSearch}
|
|
157
|
-
bind:element={searchButtonElement}
|
|
158
|
-
>
|
|
159
|
-
<svg
|
|
160
|
-
aria-hidden="true"
|
|
161
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
162
|
-
width="12"
|
|
163
|
-
height="12"
|
|
164
|
-
viewBox="0 0 12 12"
|
|
165
|
-
>
|
|
166
|
-
<path
|
|
167
|
-
d="M5.00038 1C2.79103 1 1 2.7909 1 5.00008C1 7.20927 2.79103 9.00017 5.00038 9.00017C5.92463 9.00017 6.77568 8.68675 7.45302 8.1604L10.1464 10.8536C10.3416 11.0488 10.6583 11.0488 10.8535 10.8536C11.0488 10.6583 11.0488 10.3417 10.8535 10.1464L8.16028 7.45337C8.68705 6.77595 9.00075 5.92465 9.00075 5.00008C9.00075 2.7909 7.20972 1 5.00038 1ZM2.00009 5.00008C2.00009 3.34319 3.34337 2.00002 5.00038 2.00002C6.65739 2.00002 8.00066 3.34319 8.00066 5.00008C8.00066 6.65697 6.65739 8.00015 5.00038 8.00015C3.34337 8.00015 2.00009 6.65697 2.00009 5.00008Z"
|
|
168
|
-
fill="currentColor"
|
|
169
|
-
/>
|
|
170
|
-
</svg>
|
|
171
|
-
</TextBoxButton>
|
|
172
|
-
{/if}
|
|
173
|
-
{#if type === "password" && value && revealButton}
|
|
174
|
-
<TextBoxButton
|
|
175
|
-
aria-label="Reveal password"
|
|
176
|
-
on:mousedown={handleReveal}
|
|
177
|
-
on:touchstart={handleReveal}
|
|
178
|
-
bind:element={revealButtonElement}
|
|
179
|
-
>
|
|
180
|
-
<svg
|
|
181
|
-
aria-hidden="true"
|
|
182
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
183
|
-
width="10"
|
|
184
|
-
height="10"
|
|
185
|
-
viewBox="0 171 1024 683"
|
|
186
|
-
>
|
|
187
|
-
<path
|
|
188
|
-
d="M0,554.5C0,550.833 0.5,547.167 1.5,543.5C11.5,505.833 25.75,470.417 44.25,437.25C62.75,404.083 84.5833,373.667 109.75,346C134.917,318.333 162.75,293.667 193.25,272C223.75,250.333 256.25,231.917 290.75,216.75C325.25,201.583 361.167,190.083 398.5,182.25C435.833,174.417 473.667,170.5 512,170.5C550,170.5 587.583,174.417 624.75,182.25C661.917,190.083 697.75,201.5 732.25,216.5C766.75,231.5 799.417,249.917 830.25,271.75C861.083,293.583 889.083,318.25 914.25,345.75C939.417,373.25 961.25,403.5 979.75,436.5C998.25,469.5 1012.5,504.833 1022.5,542.5C1023.5,546.167 1024,550 1024,554C1024,566 1019.92,576.083 1011.75,584.25C1003.58,592.417 993.5,596.5 981.5,596.5C971.5,596.5 962.917,593.667 955.75,588C948.583,582.333 943.333,574.833 940,565.5C937,556.167 934.083,547.5 931.25,539.5C928.417,531.5 925.5,523.583 922.5,515.75C919.5,507.917 916.167,500.167 912.5,492.5C908.833,484.833 904.333,476.667 899,468C879.333,435 855.583,405.417 827.75,379.25C799.917,353.083 769.333,330.917 736,312.75C702.667,294.583 667.417,280.583 630.25,270.75C593.083,260.917 555.5,256 517.5,256L506.5,256C468.5,256 430.917,260.917 393.75,270.75C356.583,280.583 321.333,294.667 288,313C254.667,331.333 224,353.583 196,379.75C168,405.917 144.333,435.5 125,468.5C119.667,477.167 115.167,485.417 111.5,493.25C107.833,501.083 104.5,508.833 101.5,516.5C98.5,524.167 95.5833,532 92.75,540C89.9167,548 87,556.667 84,566C80.6667,575.333 75.5,582.917 68.5,588.75C61.5,594.583 52.8333,597.5 42.5,597.5C36.8333,597.5 31.4167,596.333 26.25,594C21.0833,591.667 16.5833,588.583 12.75,584.75C8.91667,580.917 5.83333,576.417 3.5,571.25C1.16667,566.083 0,560.5 0,554.5ZM256,597.5L256,592.5C256,557.833 262.917,525.25 276.75,494.75C290.583,464.25 309.25,437.667 332.75,415C356.25,392.333 383.417,374.417 414.25,361.25C445.083,348.083 477.667,341.5 512,341.5C547.333,341.5 580.583,348.167 611.75,361.5C642.917,374.833 670.083,393.083 693.25,416.25C716.417,439.417 734.667,466.583 748,497.75C761.333,528.917 768,562.167 768,597.5C768,632.833 761.333,666.083 748,697.25C734.667,728.417 716.417,755.583 693.25,778.75C670.083,801.917 642.917,820.167 611.75,833.5C580.583,846.833 547.333,853.5 512,853.5C476.667,853.5 443.417,846.833 412.25,833.5C381.083,820.167 353.917,801.917 330.75,778.75C307.583,755.583 289.333,728.417 276,697.25C262.667,666.083 256,632.833 256,597.5ZM682.5,597.5L682.5,594C682.5,571 677.917,549.333 668.75,529C659.583,508.667 647.167,490.917 631.5,475.75C615.833,460.583 597.667,448.583 577,439.75C556.333,430.917 534.667,426.5 512,426.5C488.333,426.5 466.167,431 445.5,440C424.833,449 406.833,461.25 391.5,476.75C376.167,492.25 364,510.417 355,531.25C346,552.083 341.5,574.167 341.5,597.5C341.5,621.167 346,643.333 355,664C364,684.667 376.167,702.667 391.5,718C406.833,733.333 424.833,745.5 445.5,754.5C466.167,763.5 488.333,768 512,768C535.333,768 557.417,763.5 578.25,754.5C599.083,745.5 617.167,733.333 632.5,718C647.833,702.667 660,684.667 669,664C678,643.333 682.5,621.167 682.5,597.5Z"
|
|
189
|
-
fill="currentColor"
|
|
190
|
-
/>
|
|
191
|
-
</svg>
|
|
192
|
-
</TextBoxButton>
|
|
193
|
-
{/if}
|
|
194
|
-
{/if}
|
|
195
|
-
<slot name="buttons" {value} />
|
|
196
|
-
</div>
|
|
197
|
-
<slot />
|
|
198
|
-
</div>
|
|
199
|
-
|
|
200
|
-
<style >.text-box{background-color:transparent;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);cursor:unset;flex:1 1 auto;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;inline-size:100%;line-height:20px;margin:0;min-block-size:30px;outline:none;padding-inline:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.text-box::-moz-placeholder{color:var(--fds-text-secondary);-moz-user-select:none;user-select:none}.text-box:-ms-input-placeholder{color:var(--fds-text-secondary);-ms-user-select:none;user-select:none}.text-box::placeholder{color:var(--fds-text-secondary);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.text-box::-webkit-search-cancel-button,.text-box::-webkit-search-decoration,.text-box::-webkit-search-results-button,.text-box::-webkit-search-results-decoration{-webkit-appearance:none}.text-box::-ms-reveal{display:none}.text-box:disabled{color:var(--fds-text-disabled)}.text-box:disabled::-moz-placeholder{color:var(--fds-text-disabled)}.text-box:disabled:-ms-input-placeholder{color:var(--fds-text-disabled)}.text-box:disabled::placeholder{color:var(--fds-text-disabled)}.text-box-container{align-items:center;background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid var(--fds-control-stroke-default);border-radius:var(--fds-control-corner-radius);cursor:text;display:flex;inline-size:100%;position:relative}.text-box-container:hover{background-color:var(--fds-control-fill-secondary)}.text-box-container.disabled{background-color:var(--fds-control-fill-disabled);cursor:default}.text-box-container.disabled .text-box-underline{display:none}.text-box-container:focus-within{background-color:var(--fds-control-fill-input-active)}.text-box-container:focus-within .text-box::-moz-placeholder{color:var(--fds-text-tertiary)}.text-box-container:focus-within .text-box:-ms-input-placeholder{color:var(--fds-text-tertiary)}.text-box-container:focus-within .text-box::placeholder{color:var(--fds-text-tertiary)}.text-box-container:focus-within .text-box-underline:after{border-bottom:2px solid var(--fds-accent-default)}.text-box-container:focus-within :global(.text-box-clear-button){display:flex}.text-box-underline{block-size:calc(100% + 2px);border-radius:var(--fds-control-corner-radius);inline-size:calc(100% + 2px);inset-block-start:-1px;inset-inline-start:-1px;overflow:hidden;pointer-events:none;position:absolute}.text-box-underline:after{block-size:100%;border-bottom:var(--fds-bottom-border);box-sizing:border-box;content:"";inline-size:100%;inset-block-end:0;inset-inline-start:0;position:absolute}.text-box-buttons{align-items:center;cursor:default;display:flex;flex:0 0 auto}.text-box-buttons >:global(.text-box-button){-webkit-margin-start:6px;margin-inline-start:6px}.text-box-buttons >:global(.text-box-button:first-of-type){-webkit-margin-start:0;margin-inline-start:0}.text-box-buttons >:global(.text-box-button:last-of-type){-webkit-margin-end:4px;margin-inline-end:4px}.text-box-buttons :global(.text-box-clear-button){display:none}</style>
|
|
80
|
+
</script>
|
|
81
|
+
|
|
82
|
+
<!--
|
|
83
|
+
@component
|
|
84
|
+
The TextBox control lets a user type text into an app. The text displays on the screen in a simple, plaintext format on a single line. It additionally comes with a set of buttons which allow users to perform specialized actions on the text, such as showing a password or clearing the TextBox's contents. [Docs](https://fluent-svelte.vercel.app/docs/components/texbox)
|
|
85
|
+
- Usage:
|
|
86
|
+
```tsx
|
|
87
|
+
<TextBox placeholder="Enter your name." />
|
|
88
|
+
```
|
|
89
|
+
-->
|
|
90
|
+
<div
|
|
91
|
+
class="text-box-container {className}"
|
|
92
|
+
class:disabled
|
|
93
|
+
bind:this={containerElement}
|
|
94
|
+
use:externalMouseEvents={{ type: "mousedown" }}
|
|
95
|
+
on:outermousedown
|
|
96
|
+
>
|
|
97
|
+
<!-- Dirty workaround for the fact that svelte can't handle two-way binding when the input type is dynamic. -->
|
|
98
|
+
<!-- prettier-ignore -->
|
|
99
|
+
{#if type === "text"}
|
|
100
|
+
<input type="text" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
101
|
+
{:else if type === "number"}
|
|
102
|
+
<input type="number" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
103
|
+
{:else if type === "search"}
|
|
104
|
+
<input type="search" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
105
|
+
{:else if type === "password"}
|
|
106
|
+
<input type="password" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
107
|
+
{:else if type === "email"}
|
|
108
|
+
<input type="email" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
109
|
+
{:else if type === "tel"}
|
|
110
|
+
<input type="tel" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
111
|
+
{:else if type === "url"}
|
|
112
|
+
<input type="url" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
113
|
+
{:else if type === "date"}
|
|
114
|
+
<input type="date" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
115
|
+
{:else if type === "datetime-local"}
|
|
116
|
+
<input type="datetime-local" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
117
|
+
{:else if type === "month"}
|
|
118
|
+
<input type="month" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
119
|
+
{:else if type === "time"}
|
|
120
|
+
<input type="time" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
121
|
+
{:else if type === "week"}
|
|
122
|
+
<input type="week" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
123
|
+
{/if}
|
|
124
|
+
<div
|
|
125
|
+
class="text-box-underline"
|
|
126
|
+
style={disableBottomBorder
|
|
127
|
+
? "--fds-bottom-border: none;"
|
|
128
|
+
: "--fds-bottom-border: 1px solid var(--fds-control-strong-stroke-default);"}
|
|
129
|
+
/>
|
|
130
|
+
<div class="text-box-buttons" bind:this={buttonsContainerElement}>
|
|
131
|
+
{#if !disabled}
|
|
132
|
+
{#if clearButton && value && !readonly}
|
|
133
|
+
<TextBoxButton
|
|
134
|
+
class="text-box-clear-button"
|
|
135
|
+
aria-label="Clear value"
|
|
136
|
+
on:click={handleClear}
|
|
137
|
+
bind:element={clearButtonElement}
|
|
138
|
+
>
|
|
139
|
+
<svg
|
|
140
|
+
aria-hidden="true"
|
|
141
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
142
|
+
width="12"
|
|
143
|
+
height="12"
|
|
144
|
+
viewBox="0 0 12 12"
|
|
145
|
+
>
|
|
146
|
+
<path
|
|
147
|
+
fill="currentColor"
|
|
148
|
+
d="M2.08859 2.21569L2.14645 2.14645C2.32001 1.97288 2.58944 1.9536 2.78431 2.08859L2.85355 2.14645L6 5.293L9.14645 2.14645C9.34171 1.95118 9.65829 1.95118 9.85355 2.14645C10.0488 2.34171 10.0488 2.65829 9.85355 2.85355L6.707 6L9.85355 9.14645C10.0271 9.32001 10.0464 9.58944 9.91141 9.78431L9.85355 9.85355C9.67999 10.0271 9.41056 10.0464 9.21569 9.91141L9.14645 9.85355L6 6.707L2.85355 9.85355C2.65829 10.0488 2.34171 10.0488 2.14645 9.85355C1.95118 9.65829 1.95118 9.34171 2.14645 9.14645L5.293 6L2.14645 2.85355C1.97288 2.67999 1.9536 2.41056 2.08859 2.21569L2.14645 2.14645L2.08859 2.21569Z"
|
|
149
|
+
/>
|
|
150
|
+
</svg>
|
|
151
|
+
</TextBoxButton>
|
|
152
|
+
{/if}
|
|
153
|
+
{#if type === "search" && searchButton}
|
|
154
|
+
<TextBoxButton
|
|
155
|
+
aria-label="Search"
|
|
156
|
+
on:click={handleSearch}
|
|
157
|
+
bind:element={searchButtonElement}
|
|
158
|
+
>
|
|
159
|
+
<svg
|
|
160
|
+
aria-hidden="true"
|
|
161
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
162
|
+
width="12"
|
|
163
|
+
height="12"
|
|
164
|
+
viewBox="0 0 12 12"
|
|
165
|
+
>
|
|
166
|
+
<path
|
|
167
|
+
d="M5.00038 1C2.79103 1 1 2.7909 1 5.00008C1 7.20927 2.79103 9.00017 5.00038 9.00017C5.92463 9.00017 6.77568 8.68675 7.45302 8.1604L10.1464 10.8536C10.3416 11.0488 10.6583 11.0488 10.8535 10.8536C11.0488 10.6583 11.0488 10.3417 10.8535 10.1464L8.16028 7.45337C8.68705 6.77595 9.00075 5.92465 9.00075 5.00008C9.00075 2.7909 7.20972 1 5.00038 1ZM2.00009 5.00008C2.00009 3.34319 3.34337 2.00002 5.00038 2.00002C6.65739 2.00002 8.00066 3.34319 8.00066 5.00008C8.00066 6.65697 6.65739 8.00015 5.00038 8.00015C3.34337 8.00015 2.00009 6.65697 2.00009 5.00008Z"
|
|
168
|
+
fill="currentColor"
|
|
169
|
+
/>
|
|
170
|
+
</svg>
|
|
171
|
+
</TextBoxButton>
|
|
172
|
+
{/if}
|
|
173
|
+
{#if type === "password" && value && revealButton}
|
|
174
|
+
<TextBoxButton
|
|
175
|
+
aria-label="Reveal password"
|
|
176
|
+
on:mousedown={handleReveal}
|
|
177
|
+
on:touchstart={handleReveal}
|
|
178
|
+
bind:element={revealButtonElement}
|
|
179
|
+
>
|
|
180
|
+
<svg
|
|
181
|
+
aria-hidden="true"
|
|
182
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
183
|
+
width="10"
|
|
184
|
+
height="10"
|
|
185
|
+
viewBox="0 171 1024 683"
|
|
186
|
+
>
|
|
187
|
+
<path
|
|
188
|
+
d="M0,554.5C0,550.833 0.5,547.167 1.5,543.5C11.5,505.833 25.75,470.417 44.25,437.25C62.75,404.083 84.5833,373.667 109.75,346C134.917,318.333 162.75,293.667 193.25,272C223.75,250.333 256.25,231.917 290.75,216.75C325.25,201.583 361.167,190.083 398.5,182.25C435.833,174.417 473.667,170.5 512,170.5C550,170.5 587.583,174.417 624.75,182.25C661.917,190.083 697.75,201.5 732.25,216.5C766.75,231.5 799.417,249.917 830.25,271.75C861.083,293.583 889.083,318.25 914.25,345.75C939.417,373.25 961.25,403.5 979.75,436.5C998.25,469.5 1012.5,504.833 1022.5,542.5C1023.5,546.167 1024,550 1024,554C1024,566 1019.92,576.083 1011.75,584.25C1003.58,592.417 993.5,596.5 981.5,596.5C971.5,596.5 962.917,593.667 955.75,588C948.583,582.333 943.333,574.833 940,565.5C937,556.167 934.083,547.5 931.25,539.5C928.417,531.5 925.5,523.583 922.5,515.75C919.5,507.917 916.167,500.167 912.5,492.5C908.833,484.833 904.333,476.667 899,468C879.333,435 855.583,405.417 827.75,379.25C799.917,353.083 769.333,330.917 736,312.75C702.667,294.583 667.417,280.583 630.25,270.75C593.083,260.917 555.5,256 517.5,256L506.5,256C468.5,256 430.917,260.917 393.75,270.75C356.583,280.583 321.333,294.667 288,313C254.667,331.333 224,353.583 196,379.75C168,405.917 144.333,435.5 125,468.5C119.667,477.167 115.167,485.417 111.5,493.25C107.833,501.083 104.5,508.833 101.5,516.5C98.5,524.167 95.5833,532 92.75,540C89.9167,548 87,556.667 84,566C80.6667,575.333 75.5,582.917 68.5,588.75C61.5,594.583 52.8333,597.5 42.5,597.5C36.8333,597.5 31.4167,596.333 26.25,594C21.0833,591.667 16.5833,588.583 12.75,584.75C8.91667,580.917 5.83333,576.417 3.5,571.25C1.16667,566.083 0,560.5 0,554.5ZM256,597.5L256,592.5C256,557.833 262.917,525.25 276.75,494.75C290.583,464.25 309.25,437.667 332.75,415C356.25,392.333 383.417,374.417 414.25,361.25C445.083,348.083 477.667,341.5 512,341.5C547.333,341.5 580.583,348.167 611.75,361.5C642.917,374.833 670.083,393.083 693.25,416.25C716.417,439.417 734.667,466.583 748,497.75C761.333,528.917 768,562.167 768,597.5C768,632.833 761.333,666.083 748,697.25C734.667,728.417 716.417,755.583 693.25,778.75C670.083,801.917 642.917,820.167 611.75,833.5C580.583,846.833 547.333,853.5 512,853.5C476.667,853.5 443.417,846.833 412.25,833.5C381.083,820.167 353.917,801.917 330.75,778.75C307.583,755.583 289.333,728.417 276,697.25C262.667,666.083 256,632.833 256,597.5ZM682.5,597.5L682.5,594C682.5,571 677.917,549.333 668.75,529C659.583,508.667 647.167,490.917 631.5,475.75C615.833,460.583 597.667,448.583 577,439.75C556.333,430.917 534.667,426.5 512,426.5C488.333,426.5 466.167,431 445.5,440C424.833,449 406.833,461.25 391.5,476.75C376.167,492.25 364,510.417 355,531.25C346,552.083 341.5,574.167 341.5,597.5C341.5,621.167 346,643.333 355,664C364,684.667 376.167,702.667 391.5,718C406.833,733.333 424.833,745.5 445.5,754.5C466.167,763.5 488.333,768 512,768C535.333,768 557.417,763.5 578.25,754.5C599.083,745.5 617.167,733.333 632.5,718C647.833,702.667 660,684.667 669,664C678,643.333 682.5,621.167 682.5,597.5Z"
|
|
189
|
+
fill="currentColor"
|
|
190
|
+
/>
|
|
191
|
+
</svg>
|
|
192
|
+
</TextBoxButton>
|
|
193
|
+
{/if}
|
|
194
|
+
{/if}
|
|
195
|
+
<slot name="buttons" {value} />
|
|
196
|
+
</div>
|
|
197
|
+
<slot />
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<style >.text-box{background-color:transparent;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);cursor:unset;flex:1 1 auto;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;inline-size:100%;line-height:20px;margin:0;min-block-size:30px;outline:none;padding-inline:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.text-box::-moz-placeholder{color:var(--fds-text-secondary);-moz-user-select:none;user-select:none}.text-box:-ms-input-placeholder{color:var(--fds-text-secondary);-ms-user-select:none;user-select:none}.text-box::placeholder{color:var(--fds-text-secondary);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.text-box::-webkit-search-cancel-button,.text-box::-webkit-search-decoration,.text-box::-webkit-search-results-button,.text-box::-webkit-search-results-decoration{-webkit-appearance:none}.text-box::-ms-reveal{display:none}.text-box:disabled{color:var(--fds-text-disabled)}.text-box:disabled::-moz-placeholder{color:var(--fds-text-disabled)}.text-box:disabled:-ms-input-placeholder{color:var(--fds-text-disabled)}.text-box:disabled::placeholder{color:var(--fds-text-disabled)}.text-box-container{align-items:center;background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid var(--fds-control-stroke-default);border-radius:var(--fds-control-corner-radius);cursor:text;display:flex;inline-size:100%;position:relative}.text-box-container:hover{background-color:var(--fds-control-fill-secondary)}.text-box-container.disabled{background-color:var(--fds-control-fill-disabled);cursor:default}.text-box-container.disabled .text-box-underline{display:none}.text-box-container:focus-within{background-color:var(--fds-control-fill-input-active)}.text-box-container:focus-within .text-box::-moz-placeholder{color:var(--fds-text-tertiary)}.text-box-container:focus-within .text-box:-ms-input-placeholder{color:var(--fds-text-tertiary)}.text-box-container:focus-within .text-box::placeholder{color:var(--fds-text-tertiary)}.text-box-container:focus-within .text-box-underline:after{border-bottom:2px solid var(--fds-accent-default)}.text-box-container:focus-within :global(.text-box-clear-button){display:flex}.text-box-underline{block-size:calc(100% + 2px);border-radius:var(--fds-control-corner-radius);inline-size:calc(100% + 2px);inset-block-start:-1px;inset-inline-start:-1px;overflow:hidden;pointer-events:none;position:absolute}.text-box-underline:after{block-size:100%;border-bottom:var(--fds-bottom-border);box-sizing:border-box;content:"";inline-size:100%;inset-block-end:0;inset-inline-start:0;position:absolute}.text-box-buttons{align-items:center;cursor:default;display:flex;flex:0 0 auto}.text-box-buttons >:global(.text-box-button){-webkit-margin-start:6px;margin-inline-start:6px}.text-box-buttons >:global(.text-box-button:first-of-type){-webkit-margin-start:0;margin-inline-start:0}.text-box-buttons >:global(.text-box-button:last-of-type){-webkit-margin-end:4px;margin-inline-end:4px}.text-box-buttons :global(.text-box-clear-button){display:none}</style>
|
package/package.json
CHANGED