fluent-svelte-extra 2.0.9 → 2.1.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.
package/Expander/Expander.svelte
CHANGED
|
@@ -145,4 +145,4 @@ Expanders are controls that display a header and a collapsable content area. The
|
|
|
145
145
|
{/if}
|
|
146
146
|
</div>
|
|
147
147
|
|
|
148
|
-
<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander.expandable .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander.expandable .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-card-background-default);border:1px solid var(--fds-card-stroke-default);border-radius:var(--fds-control-corner-radius);box-sizing:border-box;display:flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-height:50px;outline:none;padding:8px;padding-inline-start:16px;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-header-title{flex:1 1 auto}.expander-header:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-header:active .expander-chevron{color:var(--fds-text-secondary)}.expander-chevron{-webkit-margin-start:20px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-subtle-fill-transparent);block-size:32px;border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex:0 0 auto;inline-size:32px;justify-content:center;margin-inline-start:20px;outline:none}.expander-chevron:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-chevron svg{fill:currentColor;block-size:12px;inline-size:12px;transition:calc(var(--fds-control-fast-duration)) var(--fds-control-fast-out-slow-in-easing) transform var(--fds-control-fast-duration)}.expander-content{background-clip:padding-box;background-color:var(--fds-card-background-secondary);border:1px solid var(--fds-card-stroke-default);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;padding:16px;transition:var(--fds-control-fast-duration) cubic-bezier(1,1,0,1) transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-content-anchor{max-block-size:6.
|
|
148
|
+
<style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander.expandable .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander.expandable .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-card-background-default);border:1px solid var(--fds-card-stroke-default);border-radius:var(--fds-control-corner-radius);box-sizing:border-box;display:flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-height:50px;outline:none;padding:8px;padding-inline-start:16px;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-header-title{flex:1 1 auto}.expander-header:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-header:active .expander-chevron{color:var(--fds-text-secondary)}.expander-chevron{-webkit-margin-start:20px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-subtle-fill-transparent);block-size:32px;border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex:0 0 auto;inline-size:32px;justify-content:center;margin-inline-start:20px;outline:none}.expander-chevron:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-chevron svg{fill:currentColor;block-size:12px;inline-size:12px;transition:calc(var(--fds-control-fast-duration)) var(--fds-control-fast-out-slow-in-easing) transform var(--fds-control-fast-duration)}.expander-content{background-clip:padding-box;background-color:var(--fds-card-background-secondary);border:1px solid var(--fds-card-stroke-default);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;padding:16px;transition:var(--fds-control-fast-duration) cubic-bezier(1,1,0,1) transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-content-anchor{max-block-size:6.02e+23vmax;position:relative}</style>
|
package/TextArea/TextArea.svelte
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
import { externalMouseEvents, createEventForwarder } from "../internal";
|
|
3
3
|
/** The input's current value. */
|
|
4
4
|
export let value = "";
|
|
5
|
-
/** Specifies whether the user can paste an image into TextArea */
|
|
6
|
-
export let includeImages = false;
|
|
7
5
|
/** Determines the maximum length of the TextArea */
|
|
8
6
|
export let maxLength = undefined;
|
|
9
7
|
export let disableBottomBorder = false;
|
|
@@ -48,7 +46,7 @@ textarea.
|
|
|
48
46
|
<div
|
|
49
47
|
role="textbox"
|
|
50
48
|
{spellcheck}
|
|
51
|
-
contenteditable
|
|
49
|
+
contenteditable="plaintext-only"
|
|
52
50
|
tabindex={disabled ? -1 : 0}
|
|
53
51
|
bind:this={textAreaElement}
|
|
54
52
|
use:forwardEvents
|
|
@@ -57,18 +55,7 @@ textarea.
|
|
|
57
55
|
e.preventDefault();
|
|
58
56
|
}}
|
|
59
57
|
on:paste={e => {
|
|
60
|
-
if (includeImages) return;
|
|
61
|
-
|
|
62
58
|
const pastedData = e.clipboardData.getData("text");
|
|
63
|
-
const regex = /^[a-zA-Z0-9çÇşŞğĞüÜöÖıİəƏ@ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]+$/;
|
|
64
|
-
|
|
65
|
-
const emojiRegex = /\p{Emoji}/u;
|
|
66
|
-
|
|
67
|
-
if (emojiRegex.test(pastedData) !== true) {
|
|
68
|
-
if (regex.test(pastedData) !== true) {
|
|
69
|
-
e.preventDefault();
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
59
|
|
|
73
60
|
if (textAreaElement.innerText.length + pastedData.length > maxLength)
|
|
74
61
|
e.preventDefault();
|
package/package.json
CHANGED