windmill-components 1.60.3 → 1.83.1

package/components/apps/components/inputs/AppRangeInput.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'rangecomponent'> | undefined;
+        render: boolean;
+        initializing?: boolean | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppRangeInputProps = typeof __propDef.props;
+export type AppRangeInputEvents = typeof __propDef.events;
+export type AppRangeInputSlots = typeof __propDef.slots;
+export default class AppRangeInput extends SvelteComponentTyped<AppRangeInputProps, AppRangeInputEvents, AppRangeInputSlots> {
+}
+export {};

package/components/apps/components/inputs/AppSelect.svelte

@@ -0,0 +1,144 @@
+<script>import { getContext } from 'svelte';
+import Select from 'svelte-select';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
+import { initOutput } from '../../editor/appUtils';
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
+let items;
+let placeholder = 'Select an item';
+let outputs = initOutput($worldStore, id, {
+    result: undefined
+});
+let value = outputs?.result.peak();
+$: items && handleItems();
+let listItems = [];
+function handleItems() {
+    listItems = Array.isArray(items)
+        ? items.map((item) => {
+            return {
+                label: item.label,
+                value: JSON.stringify(item.value)
+            };
+        })
+        : [];
+    let rawValue;
+    if (defaultValue) {
+        rawValue = defaultValue;
+    }
+    else if (listItems.length > 0) {
+        rawValue = items[0].value;
+    }
+    if (rawValue) {
+        value = JSON.stringify(rawValue);
+        outputs?.result.set(rawValue);
+    }
+}
+function onChange(e) {
+    e?.stopPropagation();
+    if (create) {
+        listItems = listItems.map((i) => {
+            delete i.created;
+            return i;
+        });
+    }
+    let result = undefined;
+    try {
+        result = JSON.parse(e.detail?.['value']);
+    }
+    catch (_) { }
+    value = e.detail?.['value'];
+    outputs?.result.set(result);
+}
+$: css = concatCustomCss($app.css?.selectcomponent, customCss);
+let defaultValue = undefined;
+function handleFilter(e) {
+    if (create) {
+        if (e.detail.length === 0 && filterText.length > 0) {
+            const prev = listItems.filter((i) => !i.created);
+            listItems = [
+                ...prev,
+                { value: JSON.stringify(filterText), label: filterText, created: true }
+            ];
+        }
+    }
+}
+$: defaultValue && handleDefault();
+function handleDefault() {
+    if (defaultValue) {
+        value = JSON.stringify(defaultValue);
+        outputs?.result.set(defaultValue);
+    }
+}
+let create = false;
+let filterText = '';
+</script>
+
+<InputValue {id} input={configuration.items} bind:value={items} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue {id} input={configuration.create} bind:value={create} />
+
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<div
+		class="app-select w-full"
+		style="height: 34px;"
+		on:pointerdown={(e) => {
+			if (!e.shiftKey) {
+				e.stopPropagation()
+			}
+		}}
+	>
+		<Select
+			--border-radius="0"
+			--border-color="#999"
+			bind:filterText
+			on:filter={handleFilter}
+			on:clear={onChange}
+			on:change={onChange}
+			items={listItems}
+			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+			containerStyles={'border-color: #999;' +
+				SELECT_INPUT_DEFAULT_STYLE.containerStyles +
+				css?.input?.style}
+			{value}
+			{placeholder}
+			on:click={() => {
+				if (!$connectingInput.opened) {
+					$selectedComponent = [id]
+				}
+			}}
+			on:focus={() => {
+				if (!$connectingInput.opened) {
+					$selectedComponent = [id]
+				}
+			}}
+			floatingConfig={{
+				strategy: 'fixed'
+			}}
+		>
+			<div slot="item" let:item>
+				{#if create}
+					{item.created ? 'Add new: ' : ''}
+				{/if}
+
+				{item.label}
+			</div>
+		</Select>
+	</div>
+</AlignWrapper>
+
+<style global>
+	:global(.app-select) :global(.value-container) {
+		padding: 0 !important;
+	}
+	:global(.svelte-select-list) {
+		z-index: 1000 !important;
+	}</style>

package/components/apps/components/{selectInputs → inputs}/AppSelect.svelte.d.ts

@@ -1,12 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
-        staticOutputs?: string[] | undefined;
         id: string;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'selectcomponent'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,6 +18,5 @@ export type AppSelectProps = typeof __propDef.props;
 export type AppSelectEvents = typeof __propDef.events;
 export type AppSelectSlots = typeof __propDef.slots;
 export default class AppSelect extends SvelteComponentTyped<AppSelectProps, AppSelectEvents, AppSelectSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppSliderInputs.svelte

@@ -0,0 +1,81 @@
+<script>import RangeSlider from 'svelte-range-slider-pips';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import { twMerge } from 'tailwind-merge';
+import { concatCustomCss } from '../../utils';
+import { initOutput } from '../../editor/appUtils';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+export let initializing = true;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
+let min = 0;
+let max = 42;
+let step = 1;
+let slider;
+let outputs = initOutput($worldStore, id, {
+    result: 0 || null
+});
+let values = [outputs?.result.peak() ?? 0];
+$: values && handleValues();
+function handleValues() {
+    // Disallow 'e' character in numbers
+    // if(value && value.toString().includes('e')) {
+    // 	value = +value.toString().replaceAll('e', '')
+    // }
+    const num = isNaN(+values[0]) ? null : +values[0];
+    outputs?.result.set(num);
+}
+$: css = concatCustomCss($app.css?.slidercomponent, customCss);
+let lastStyle = undefined;
+$: if (css && slider && lastStyle !== css?.handle?.style) {
+    const handle = slider.querySelector('.rangeNub');
+    if (handle) {
+        lastStyle = css?.handle?.style;
+        handle.style.cssText = css?.handle?.style ?? '';
+    }
+}
+</script>
+
+<InputValue {id} input={configuration.step} bind:value={step} />
+<InputValue {id} input={configuration.min} bind:value={min} />
+<InputValue {id} input={configuration.max} bind:value={max} />
+<InputValue
+	on:done={() => (initializing = false)}
+	{id}
+	input={configuration.defaultValue}
+	bind:value={values[0]}
+/>
+
+<AlignWrapper {render} {verticalAlignment}>
+	<div class="flex items-center w-full gap-1 px-1">
+		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
+			{+min}
+		</span>
+		<div
+			class="grow"
+			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
+				''}"
+			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
+		>
+			<RangeSlider bind:slider bind:values {step} min={+min} max={+max} />
+		</div>
+		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
+			{+max}
+		</span>
+		<span class="mx-2">
+			<span
+				class={twMerge(
+					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
+					css?.value?.class ?? ''
+				)}
+				style={css?.value?.style ?? ''}
+			>
+				{values[0]}
+			</span>
+		</span>
+	</div>
+</AlignWrapper>

package/components/apps/components/{numberInputs → inputs}/AppSliderInputs.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'slidercomponent'> | undefined;
+        render: boolean;
+        initializing?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,6 +18,5 @@ export type AppSliderInputsProps = typeof __propDef.props;
 export type AppSliderInputsEvents = typeof __propDef.events;
 export type AppSliderInputsSlots = typeof __propDef.slots;
 export default class AppSliderInputs extends SvelteComponentTyped<AppSliderInputsProps, AppSliderInputsEvents, AppSliderInputsSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/AppTextInput.svelte

@@ -0,0 +1,83 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss, selectId } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let inputType = 'text';
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let appCssKey = 'textinputcomponent';
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
+let placeholder = undefined;
+let defaultValue = undefined;
+let value = undefined;
+let outputs = initOutput($worldStore, id, {
+    result: ''
+});
+$: handleDefault(defaultValue);
+$: outputs?.result.set(value ?? '');
+function handleDefault(defaultValue) {
+    value = defaultValue;
+}
+$: css = concatCustomCss($app.css?.[appCssKey], customCss);
+</script>
+
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+
+{#if inputType === 'textarea'}
+	<textarea
+		class={twMerge(
+			'windmillapp w-full h-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
+			css?.input?.class ?? ''
+		)}
+		style="resize:none; {css?.input?.style ?? ''}"
+		on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
+		bind:value
+		{placeholder}
+	/>
+{:else}
+	<AlignWrapper {render} {verticalAlignment}>
+		{#if inputType === 'password'}
+			<input
+				class={twMerge(
+					'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
+					css?.input?.class ?? ''
+				)}
+				style={css?.input?.style ?? ''}
+				on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
+				type="password"
+				bind:value
+				{placeholder}
+			/>
+		{:else if inputType === 'text'}
+			<input
+				class={twMerge(
+					'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
+					css?.input?.class ?? ''
+				)}
+				style={css?.input?.style ?? ''}
+				on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
+				type="text"
+				bind:value
+				{placeholder}
+			/>
+		{:else if inputType === 'email'}
+			<input
+				class={twMerge(
+					'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
+					css?.input?.class ?? ''
+				)}
+				style={css?.input?.style ?? ''}
+				on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
+				type="email"
+				bind:value
+				{placeholder}
+			/>
+		{/if}
+	</AlignWrapper>
+{/if}

package/components/apps/components/{textInputs → inputs}/AppTextInput.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        configuration: Record<string, AppInput>;
+        configuration: RichConfigurations;
         inputType?: string | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'textinputcomponent'> | undefined;
+        appCssKey?: "textinputcomponent" | "textareainputcomponent" | "passwordinputcomponent" | "emailinputcomponent" | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,6 +19,5 @@ export type AppTextInputProps = typeof __propDef.props;
 export type AppTextInputEvents = typeof __propDef.events;
 export type AppTextInputSlots = typeof __propDef.slots;
 export default class AppTextInput extends SvelteComponentTyped<AppTextInputProps, AppTextInputEvents, AppTextInputSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -0,0 +1,60 @@
+<script>import { initOutput } from '../../../editor/appUtils';
+import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { concatCustomCss } from '../../../utils';
+import AlignWrapper from '../../helpers/AlignWrapper.svelte';
+import InputValue from '../../helpers/InputValue.svelte';
+import CurrencyInput from './CurrencyInput.svelte';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: null
+});
+let defaultValue = undefined;
+let isNegativeAllowed = undefined;
+let currency = undefined;
+let locale = undefined;
+let value = undefined;
+function handleInput() {
+    outputs?.result.set(value ?? null);
+}
+function handleDefault() {
+    value = defaultValue;
+    handleInput();
+}
+$: value != undefined && handleInput();
+$: defaultValue != undefined && handleDefault();
+$: css = concatCustomCss($app.css?.currencycomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue {id} input={configuration.isNegativeAllowed} bind:value={isNegativeAllowed} />
+<InputValue {id} input={configuration.currency} bind:value={currency} />
+<InputValue {id} input={configuration.locale} bind:value={locale} />
+
+<AlignWrapper {render} {verticalAlignment}>
+	{#key isNegativeAllowed}
+		{#key locale}
+			{#key currency}
+				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}>
+					<CurrencyInput
+						inputClasses={{
+							formatted: twMerge('px-2 w-full py-1.5 windmillapp', css?.input?.class),
+							wrapper: 'w-full windmillapp',
+							formattedZero: twMerge('text-black windmillapp ', css?.input?.class)
+						}}
+						style={css?.input?.style}
+						bind:value
+						{currency}
+						{locale}
+						{isNegativeAllowed}
+					/>
+				</div>
+			{/key}
+		{/key}
+	{/key}
+</AlignWrapper>

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'currencycomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppCurrencyInputProps = typeof __propDef.props;
+export type AppCurrencyInputEvents = typeof __propDef.events;
+export type AppCurrencyInputSlots = typeof __propDef.slots;
+export default class AppCurrencyInput extends SvelteComponentTyped<AppCurrencyInputProps, AppCurrencyInputEvents, AppCurrencyInputSlots> {
+}
+export {};

package/components/apps/components/inputs/currency/CurrencyInput.svelte

@@ -0,0 +1,183 @@
+<script>/* Forked from MIT LICENSE
+https://raw.githubusercontent.com/Canutin/svelte-currency-input/main/src/lib/CurrencyInput.svelte
+*/
+const DEFAULT_LOCALE = 'en-US';
+const DEFAULT_CURRENCY = 'USD';
+const DEFAULT_NAME = 'total';
+const DEFAULT_VALUE = 0;
+const DEFAULT_FRACTION_DIGITS = 2;
+const DEFAULT_CLASS_WRAPPER = 'currencyInput';
+const DEFAULT_CLASS_UNFORMATTED = 'currencyInput__unformatted';
+const DEFAULT_CLASS_FORMATTED = 'currencyInput__formatted';
+const DEFAULT_CLASS_FORMATTED_POSITIVE = 'currencyInput__formatted--positive';
+const DEFAULT_CLASS_FORMATTED_NEGATIVE = 'currencyInput__formatted--negative';
+const DEFAULT_CLASS_FORMATTED_ZERO = 'currencyInput__formatted--zero';
+export let value = DEFAULT_VALUE;
+export let locale = DEFAULT_LOCALE;
+export let currency = DEFAULT_CURRENCY;
+export let name = DEFAULT_NAME;
+export let required = false;
+export let disabled = false;
+export let placeholder = DEFAULT_VALUE;
+export let isNegativeAllowed = true;
+export let fractionDigits = DEFAULT_FRACTION_DIGITS;
+export let inputClasses = null;
+export let style = '';
+// Formats value as: e.g. $1,523.00 | -$1,523.00
+const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
+    return new Intl.NumberFormat(locale, {
+        currency: currency,
+        style: 'currency',
+        maximumFractionDigits: maximumFractionDigits || 0,
+        minimumFractionDigits: minimumFractionDigits || 0
+    }).format(value);
+};
+// Checks if the key pressed is allowed
+const handleKeyDown = (event) => {
+    const isDeletion = event.key === 'Backspace' || event.key === 'Delete';
+    const isModifier = event.metaKey || event.altKey || event.ctrlKey;
+    const isArrowKey = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+    const isTab = event.key === 'Tab';
+    const isInvalidCharacter = !/^\d|,|\.|-$/g.test(event.key); // Keys that are not a digit, comma, period or minus sign
+    if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab)
+        event.preventDefault();
+};
+let inputTarget;
+const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
+const isDecimalComma = currencyDecimal === ',';
+const currencySymbol = formatCurrency(0, 0)
+    .replace('0', '') // e.g. '$0' > '$'
+    .replace(/\u00A0/, ''); // e.g '0 €' > '€'
+// Updates `value` by stripping away the currency formatting
+const setUnformattedValue = (event) => {
+    if (event) {
+        // Don't format if the user is typing a `currencyDecimal` point
+        if (event.key === currencyDecimal)
+            return;
+        // Pressing `.` when the decimal point is `,` gets replaced with `,`
+        if (isDecimalComma && event.key === '.')
+            formattedValue = formattedValue.replace(/\.([^.]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
+        // Pressing `,` when the decimal point is `.` gets replaced with `.`
+        if (!isDecimalComma && event.key === ',')
+            formattedValue = formattedValue.replace(/\,([^,]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
+        // Don't format if `formattedValue` is ['$', '-$', "-"]
+        const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
+        const strippedUnformattedValue = formattedValue.replace(' ', '');
+        if (ignoreSymbols.includes(strippedUnformattedValue))
+            return;
+        // Set the starting caret positions
+        inputTarget = event.target;
+        // Reverse the value when minus is pressed
+        if (isNegativeAllowed && event.key === '-')
+            value = value * -1;
+    }
+    // Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
+    let unformattedValue = isNegativeAllowed
+        ? formattedValue.replace(/[^0-9,.-]/g, '')
+        : formattedValue.replace(/[^0-9,.]/g, '');
+    // Finally set the value
+    if (Number.isNaN(parseFloat(unformattedValue))) {
+        value = 0;
+    }
+    else {
+        // The order of the following operations is *critical*
+        unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, ''); // Remove all group symbols
+        if (isDecimalComma)
+            unformattedValue = unformattedValue.replace(',', '.'); // If the decimal point is a comma, replace it with a period
+        // If the zero-key has been pressed
+        // and if the current `value` is the same as the `value` before the key-press
+        // formatting may need to be done (Issue #30)
+        const previousValue = value;
+        value = parseFloat(unformattedValue);
+        if (event && previousValue === value) {
+            // Do the formatting if the number of digits after the decimal point exceeds `fractionDigits`
+            if (unformattedValue.includes('.') &&
+                unformattedValue.split('.')[1].length > fractionDigits) {
+                setFormattedValue();
+            }
+        }
+    }
+};
+const setFormattedValue = () => {
+    // Previous caret position
+    const startCaretPosition = inputTarget?.selectionStart || 0;
+    const previousFormattedValueLength = formattedValue.length;
+    // Apply formatting to input
+    formattedValue = formatCurrency(value, fractionDigits, 0);
+    // Update `value` after formatting
+    setUnformattedValue();
+    // New caret position
+    const endCaretPosition = startCaretPosition + formattedValue.length - previousFormattedValueLength;
+    // HACK:
+    // Delay setting the new caret position until the input has been formatted
+    setTimeout(() => {
+        inputTarget?.setSelectionRange(endCaretPosition, endCaretPosition);
+    }, 0.1);
+};
+let formattedValue = '';
+let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
+$: isZero = value === 0;
+$: isNegative = value < 0;
+$: value, setFormattedValue();
+</script>
+
+<div class={inputClasses?.wrapper ?? DEFAULT_CLASS_WRAPPER}>
+	<input
+		class={inputClasses?.unformatted ?? DEFAULT_CLASS_UNFORMATTED}
+		type="hidden"
+		{name}
+		{disabled}
+		bind:value
+	/>
+	<input
+		class="
+			{inputClasses?.formatted ?? DEFAULT_CLASS_FORMATTED}
+			{isNegativeAllowed && !isZero && !isNegative
+			? inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE
+			: ''}
+			{isZero ? inputClasses?.formattedZero ?? DEFAULT_CLASS_FORMATTED_ZERO : ''}
+			{isNegativeAllowed && isNegative
+			? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
+			: ''}
+		"
+		{style}
+		type="text"
+		inputmode="numeric"
+		name={`formatted-${name}`}
+		required={required && !isZero}
+		placeholder={formattedPlaceholder}
+		{disabled}
+		bind:value={formattedValue}
+		on:keydown={handleKeyDown}
+		on:keyup={setUnformattedValue}
+		on:blur={setFormattedValue}
+	/>
+</div>
+
+<style>
+	input.currencyInput__formatted {
+		border: 1px solid #e2e2e2;
+		padding: 10px;
+		box-sizing: border-box;
+	}
+
+	input.currencyInput__formatted--zero {
+		color: #333;
+	}
+
+	input.currencyInput__formatted--positive {
+		--tw-text-opacity: 1;
+		color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
+	input.currencyInput__formatted--negative {
+		--tw-text-opacity: 1;
+		color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
+	input.currencyInput__formatted:disabled {
+		color: #999;
+		background-color: #e2e2e2;
+		pointer-events: none;
+		cursor: default;
+	}</style>