@lavalogic/scoria 0.40.28 → 0.40.29

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive, FilterValueType"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive, FilterValueType"
 >import { dev } from "$app/environment";
 import Action from "../../Action.svelte";
 import Button from "../../Button.svelte";
@@ -15,6 +15,7 @@ import DateModal from "../../Touch/DateModal.svelte";
 import { hasQuery } from "../TableHelpers.svelte.js";
 import { devCatch, isDateTuple, isNumericArray } from "../../../Helpers/Helpers.svelte.js";
 import { Colour, ColourSet } from "../../../scss/colours.js";
+import { m as i18n } from "../../../paraglide/messages.js";
 import { InputVariant } from "../../../Types/Internal/InputVariant.js";
 import { Size } from "../../../Types/Internal/Size.js";
 import { getContext, onDestroy, onMount, untrack } from "svelte";
@@ -64,13 +65,15 @@ let selectedOptions = $state([]);
 let lastQueryOptions = $state([]);
 const inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
 const filterMode = $derived(tableContext.paginationRepo?.filterModes.get(def.id));
+const numberDateTypes = $derived(numberDateFilterTypes());
+const stringTypes = $derived(stringFilterTypes());
 const selectedNumberFilterType = $derived.by(() => {
 	const value = filterMode ?? NumberDateFilterMode.In;
-	return numberDateFilterTypes.find((it) => it.value === value) ?? null;
+	return numberDateTypes.find((it) => it.value === value) ?? null;
 });
 const selectedStringFilterType = $derived.by(() => {
 	const value = filterMode ?? StringFilterMode.Contains;
-	return stringFilterTypes.find((it) => it.value === value) ?? null;
+	return stringTypes.find((it) => it.value === value) ?? null;
 });
 const filteringStateValue = $derived(tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value);
 $effect(() => {
@@ -268,337 +271,346 @@ onDestroy(() => {
 		debounceTimer = undefined;
 	}
 });
-</script>
-
-<div class="input-cell {inputId}">
-	{#if isSearchable}
-		<div class="input-wrapper-parent">
-			{#if isDate}
-				{@const dateValues = tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)
-					?.value ?? [null, null]}
-				{#if isDateTuple(dateValues)}
-					{@const [fromDate, toDate] = dateValues}
-					<div class="spaced-around">
-						<Button
-							size={Size.FillHeight}
-							fullWidth
-							onclick={() => {
-								showFromDateModal = true;
-							}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
-						>
-
-						<Button
-							size={Size.FillHeight}
-							fullWidth
-							onclick={() => {
-								showToDateModal = true;
-							}}>To {toDate?.toLocaleDateString() ?? 'Any Date'}</Button
-						>
-					</div>
-
-					{#if showFromDateModal}
-						<DateModal
-							header="Edit Date From"
-							value={fromDate}
-							cancelEditing={() => {
-								showFromDateModal = false;
-							}}
-							confirm={(e) => {
-								tableContext.paginationRepo?.filterBy(def.id, [e, toDate]);
-								showFromDateModal = false;
-							}}
-						/>
-					{/if}
-
-					{#if showToDateModal}
-						<DateModal
-							inclusive
-							header="Edit Date To"
-							value={toDate}
-							cancelEditing={() => {
-								showToDateModal = false;
-							}}
-							confirm={(e) => {
-								tableContext.paginationRepo?.filterBy(def.id, [fromDate, e]);
-								showToDateModal = false;
-							}}
-						/>
-					{/if}
-				{/if}
-			{:else if isSelect}
-				{#if hasQuery(customFilter)}
-					{#if customFilter.valueAsObject !== true}
-						{@const label = customFilter.id}
-
-						<!-- TODO: multiselect -->
-
-						<!-- FIXME: Most likely Unsafe -->
-						<QuerySelect
-							valueAsObject={false}
-							clearable
-							name={customFilter.objectName ?? 'Item'}
-							valueProp="value"
-							labelProp="label"
-							value={value as null}
-							query={customFilter.query}
-							bind:options={lastQueryOptions}
-							onchange={generateOnChangePrimitive(label)}
-						/>
-					{:else}
-						{@const label = customFilter.id}
-
-						<!-- TODO: multiselect -->
-
-						<QuerySelect
-							valueAsObject={true}
-							clearable
-							name={customFilter.objectName ?? 'Item'}
-							valueProp="value"
-							labelProp="label"
-							value={value as null}
-							query={customFilter.query}
-							bind:options={lastQueryOptions}
-							onchange={generateOnChangeObject(label)}
-						/>
-					{/if}
-				{:else}
-					{#await options then options}
-						<MultiSelect
-							labelProp="label"
-							valueProp="value"
-							{options}
-							valueAsObject
-							onchange={(e: Array<SelectOption<unknown>>) => {
-								tableContext.paginationRepo?.filterBy(
-									def.id,
-									e.map((it) => it.value)
-								);
-							}}
-							selectedValues={selectedOptions}
-							collapseSelection
-						/>
-					{/await}
-				{/if}
-			{:else if def instanceof CheckboxDef}
-				{@const value = (() => {
-					switch (tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value) {
-						case true: {
-							return Ternary.True;
-						}
-						case false: {
-							return Ternary.False;
-						}
-						default: {
-							return Ternary.Neutral;
-						}
-					}
-				})()}
-				<div class="centered">
-					<ThreeStateRadio
-						{value}
-						yesLabel="Selected"
-						noLabel="Not Selected"
-						neutralLabel="Any"
-						neutralIcon={{ name: 'circle-minus' }}
-						onchange={(v) => {
-							switch (v) {
-								case Ternary.False: {
-									tableContext.paginationRepo?.filterBy(def.id, false);
-									return;
-								}
-								case Ternary.True: {
-									tableContext.paginationRepo?.filterBy(def.id, true);
-									return;
-								}
-								case Ternary.Neutral:
-								default: {
-									tableContext.paginationRepo?.filterBy(def.id, null);
-									return;
-								}
-							}
-						}}
-					/>
-				</div>
-			{:else if isNumeric}
-				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
-					<div class="input-wrapper left">
-						<NumberInput
-							data-type="quicksearch"
-							id={inputId}
-							bind:value={valueMin}
-							variant={InputVariant.Table}
-							placeholder="Min&hellip;"
-							oninput={() => {
-								debouncedFilterBy([valueMin, valueMax]);
-							}}
-							onkeydown={closeOnCtrlF}
-						/>
-					</div>
-					<div class="input-wrapper right">
-						<NumberInput
-							data-type="quicksearch"
-							id={inputId}
-							bind:value={valueMax}
-							placeholder="Max&hellip;"
-							variant={InputVariant.Table}
-							oninput={() => {
-								debouncedFilterBy([valueMin, valueMax]);
-							}}
-							onkeydown={closeOnCtrlF}
-						/>
-					</div>
-				{:else}
-					<div class="input-wrapper right">
-						{#await isNullFilter}
-							loading
-						{:then isNullFilter}
-							{#if isNullFilter}
-								<TextInput
-									data-type="quicksearch"
-									id={inputId}
-									value="is Null"
-									disabled
-									variant={InputVariant.Table}
-								/>
-							{:else}
-								<!-- NOTE: This is a text input in order to support the __in functionality, which is a comma separated list of numbers -->
-								<TextInput
-									data-type="quicksearch"
-									id={inputId}
-									bind:value={value as string | null}
-									placeholder="Filter&hellip;"
-									variant={InputVariant.Table}
-									oninput={() => {
-										debouncedFilterBy([value || null]);
-									}}
-									onkeydown={closeOnCtrlF}
-								/>
-							{/if}
-						{:catch e}
-							<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-							{@debug e}
-						{/await}
-					</div>
-				{/if}
-			{:else if value == null || typeof value == 'string'}
-				<div class="input-wrapper right">
-					{#if selectedStringFilterType?.value == StringFilterMode.null}
-						<TextInput
-							data-type="quicksearch"
-							id={inputId}
-							value="is Null"
-							disabled
-							variant={InputVariant.Table}
-						/>
-					{:else if selectedStringFilterType?.value == StringFilterMode.Empty}
-						<TextInput
-							data-type="quicksearch"
-							id={inputId}
-							value="is Empty"
-							disabled
-							variant={InputVariant.Table}
-						/>
-					{:else}
-						<TextInput
-							data-type="quicksearch"
-							id={inputId}
-							oninput={() => {
-								debouncedFilterBy(value);
-							}}
-							variant={InputVariant.Table}
-							bind:value={value as string | null}
-							placeholder="Filter&hellip;"
-						/>
-					{/if}
-				</div>
-			{/if}
-
-			<!-- TODO button for date, checkbox or select for checkbox -->
-		</div>
-
-		{#if !isSelect && !isDate && !(def instanceof CheckboxDef)}
-			<div class="stick-right">
-				<Action
-					data-type="quicksearch"
-					size={Size.FillHeight}
-					colourSet={ColourSet.Auxiliary}
-					icon={{
-						name: 'filter-2',
-						size: Size.MediumLarge,
-						colour: Colour['$ui-blue-5'],
-					}}
-					onclick={() => {
-						if (!openedSelect) {
-							return;
-						}
-						if (openedSelect.value === selectSymbol) {
-							openedSelect.value = null;
-						} else {
-							openedSelect.value = selectSymbol;
-						}
-					}}
-				/>
-			</div>
-		{/if}
-	{/if}
-
-	{#if isSelectOpen}
-		<div
-			class="floating"
-			transition:fade={{ easing: cubicOut, duration: 100 }}
-		>
-			<div class="select-wrapper">
-				{#if isNumeric}
-					<SingleSelect
-						options={numberDateFilterTypes}
-						labelProp="label"
-						valueProp="value"
-						name="Filter Type"
-						valueAsObject
-						value={selectedNumberFilterType}
-						onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
-							const oldFilterType = selectedNumberFilterType;
-
-							const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
-
-							if (newFilterType !== oldFilterType?.value) {
-								tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
-
-								if (newFilterType === NumberDateFilterMode.Between) {
-									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
-								} else if (newFilterType === NumberDateFilterMode.In) {
-									tableContext.paginationRepo?.filterBy(def.id, [value]);
-								} else {
-									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
-								}
-							}
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else}
-					<SingleSelect
-						options={stringFilterTypes}
-						labelProp="label"
-						valueProp="value"
-						name="Filter Type"
-						valueAsObject
-						value={selectedStringFilterType}
-						onchange={(newValue: SelectOption<StringFilterMode> | null) => {
-							const filterType = newValue?.value ?? StringFilterMode.Contains;
-							tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{/if}
-			</div>
-		</div>
-	{/if}
-</div>
-
+</script>
+
+<div class="input-cell {inputId}">
+	{#if isSearchable}
+		<div class="input-wrapper-parent">
+			{#if isDate}
+				{@const dateValues = tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)
+					?.value ?? [null, null]}
+				{#if isDateTuple(dateValues)}
+					{@const [fromDate, toDate] = dateValues}
+					<div class="spaced-around">
+						<Button
+							size={Size.FillHeight}
+							fullWidth
+							onclick={() => {
+								showFromDateModal = true;
+							}}
+							>{i18n['scoria.label.filter_date_from']({
+								date: fromDate?.toLocaleDateString() ?? i18n['scoria.label.any_date'](),
+							})}</Button
+						>
+
+						<Button
+							size={Size.FillHeight}
+							fullWidth
+							onclick={() => {
+								showToDateModal = true;
+							}}
+							>{i18n['scoria.label.filter_date_to']({
+								date: toDate?.toLocaleDateString() ?? i18n['scoria.label.any_date'](),
+							})}</Button
+						>
+					</div>
+
+					{#if showFromDateModal}
+						<DateModal
+							header={i18n['scoria.label.edit_date_from']()}
+							value={fromDate}
+							cancelEditing={() => {
+								showFromDateModal = false;
+							}}
+							confirm={(e) => {
+								tableContext.paginationRepo?.filterBy(def.id, [e, toDate]);
+								showFromDateModal = false;
+							}}
+						/>
+					{/if}
+
+					{#if showToDateModal}
+						<DateModal
+							inclusive
+							header={i18n['scoria.label.edit_date_to']()}
+							value={toDate}
+							cancelEditing={() => {
+								showToDateModal = false;
+							}}
+							confirm={(e) => {
+								tableContext.paginationRepo?.filterBy(def.id, [fromDate, e]);
+								showToDateModal = false;
+							}}
+						/>
+					{/if}
+				{/if}
+			{:else if isSelect}
+				{#if hasQuery(customFilter)}
+					{#if customFilter.valueAsObject !== true}
+						{@const label = customFilter.id}
+
+						<!-- TODO: multiselect -->
+
+						<!-- FIXME: Most likely Unsafe -->
+						<QuerySelect
+							valueAsObject={false}
+							clearable
+							name={customFilter.objectName ?? 'Item'}
+							valueProp="value"
+							labelProp="label"
+							value={value as null}
+							query={customFilter.query}
+							bind:options={lastQueryOptions}
+							onchange={generateOnChangePrimitive(label)}
+						/>
+					{:else}
+						{@const label = customFilter.id}
+
+						<!-- TODO: multiselect -->
+
+						<QuerySelect
+							valueAsObject={true}
+							clearable
+							name={customFilter.objectName ?? 'Item'}
+							valueProp="value"
+							labelProp="label"
+							value={value as null}
+							query={customFilter.query}
+							bind:options={lastQueryOptions}
+							onchange={generateOnChangeObject(label)}
+						/>
+					{/if}
+				{:else}
+					{#await options then options}
+						<MultiSelect
+							labelProp="label"
+							valueProp="value"
+							{options}
+							valueAsObject
+							onchange={(e: Array<SelectOption<unknown>>) => {
+								tableContext.paginationRepo?.filterBy(
+									def.id,
+									e.map((it) => it.value)
+								);
+							}}
+							selectedValues={selectedOptions}
+							collapseSelection
+						/>
+					{/await}
+				{/if}
+			{:else if def instanceof CheckboxDef}
+				{@const value = (() => {
+					switch (tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value) {
+						case true: {
+							return Ternary.True;
+						}
+						case false: {
+							return Ternary.False;
+						}
+						default: {
+							return Ternary.Neutral;
+						}
+					}
+				})()}
+				<div class="centered">
+					<ThreeStateRadio
+						{value}
+						yesLabel={i18n['scoria.label.selected']()}
+						noLabel={i18n['scoria.label.not_selected']()}
+						neutralLabel={i18n['scoria.label.any']()}
+						noIcon={{ name: 'circle' }}
+						neutralIcon={{ name: 'circle-minus' }}
+						onchange={(v) => {
+							switch (v) {
+								case Ternary.False: {
+									tableContext.paginationRepo?.filterBy(def.id, false);
+									return;
+								}
+								case Ternary.True: {
+									tableContext.paginationRepo?.filterBy(def.id, true);
+									return;
+								}
+								case Ternary.Neutral:
+								default: {
+									tableContext.paginationRepo?.filterBy(def.id, null);
+									return;
+								}
+							}
+						}}
+					/>
+				</div>
+			{:else if isNumeric}
+				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
+					<div class="input-wrapper left">
+						<NumberInput
+							data-type="quicksearch"
+							id={inputId}
+							bind:value={valueMin}
+							variant={InputVariant.Table}
+							placeholder={i18n['scoria.label.min_placeholder']()}
+							oninput={() => {
+								debouncedFilterBy([valueMin, valueMax]);
+							}}
+							onkeydown={closeOnCtrlF}
+						/>
+					</div>
+					<div class="input-wrapper right">
+						<NumberInput
+							data-type="quicksearch"
+							id={inputId}
+							bind:value={valueMax}
+							placeholder={i18n['scoria.label.max_placeholder']()}
+							variant={InputVariant.Table}
+							oninput={() => {
+								debouncedFilterBy([valueMin, valueMax]);
+							}}
+							onkeydown={closeOnCtrlF}
+						/>
+					</div>
+				{:else}
+					<div class="input-wrapper right">
+						{#await isNullFilter}
+							loading
+						{:then isNullFilter}
+							{#if isNullFilter}
+								<TextInput
+									data-type="quicksearch"
+									id={inputId}
+									value={i18n['scoria.label.filter_is_null']()}
+									disabled
+									variant={InputVariant.Table}
+								/>
+							{:else}
+								<!-- NOTE: This is a text input in order to support the __in functionality, which is a comma separated list of numbers -->
+								<TextInput
+									data-type="quicksearch"
+									id={inputId}
+									bind:value={value as string | null}
+									placeholder={i18n['scoria.label.filter_placeholder']()}
+									variant={InputVariant.Table}
+									oninput={() => {
+										debouncedFilterBy([value || null]);
+									}}
+									onkeydown={closeOnCtrlF}
+								/>
+							{/if}
+						{:catch e}
+							<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+							{@debug e}
+						{/await}
+					</div>
+				{/if}
+			{:else if value == null || typeof value == 'string'}
+				<div class="input-wrapper right">
+					{#if selectedStringFilterType?.value == StringFilterMode.null}
+						<TextInput
+							data-type="quicksearch"
+							id={inputId}
+							value={i18n['scoria.label.filter_is_null']()}
+							disabled
+							variant={InputVariant.Table}
+						/>
+					{:else if selectedStringFilterType?.value == StringFilterMode.Empty}
+						<TextInput
+							data-type="quicksearch"
+							id={inputId}
+							value={i18n['scoria.label.filter_is_empty']()}
+							disabled
+							variant={InputVariant.Table}
+						/>
+					{:else}
+						<TextInput
+							data-type="quicksearch"
+							id={inputId}
+							oninput={() => {
+								debouncedFilterBy(value);
+							}}
+							variant={InputVariant.Table}
+							bind:value={value as string | null}
+							placeholder={i18n['scoria.label.filter_placeholder']()}
+						/>
+					{/if}
+				</div>
+			{/if}
+
+			<!-- TODO button for date, checkbox or select for checkbox -->
+		</div>
+
+		{#if !isSelect && !isDate && !(def instanceof CheckboxDef)}
+			<div class="stick-right">
+				<Action
+					data-type="quicksearch"
+					size={Size.FillHeight}
+					colourSet={ColourSet.Auxiliary}
+					icon={{
+						name: 'filter-2',
+						size: Size.MediumLarge,
+						colour: Colour['$ui-blue-5'],
+					}}
+					onclick={() => {
+						if (!openedSelect) {
+							return;
+						}
+						if (openedSelect.value === selectSymbol) {
+							openedSelect.value = null;
+						} else {
+							openedSelect.value = selectSymbol;
+						}
+					}}
+				/>
+			</div>
+		{/if}
+	{/if}
+
+	{#if isSelectOpen}
+		<div
+			class="floating"
+			transition:fade={{ easing: cubicOut, duration: 100 }}
+		>
+			<div class="select-wrapper">
+				{#if isNumeric}
+					<SingleSelect
+						options={numberDateTypes}
+						labelProp="label"
+						valueProp="value"
+						name="Filter Type"
+						placeholder={i18n['scoria.label.select_filter_type']()}
+						valueAsObject
+						value={selectedNumberFilterType}
+						onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
+							const oldFilterType = selectedNumberFilterType;
+
+							const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
+
+							if (newFilterType !== oldFilterType?.value) {
+								tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
+
+								if (newFilterType === NumberDateFilterMode.Between) {
+									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
+								} else if (newFilterType === NumberDateFilterMode.In) {
+									tableContext.paginationRepo?.filterBy(def.id, [value]);
+								} else {
+									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+								}
+							}
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else}
+					<SingleSelect
+						options={stringTypes}
+						labelProp="label"
+						valueProp="value"
+						name="Filter Type"
+						placeholder={i18n['scoria.label.select_filter_type']()}
+						valueAsObject
+						value={selectedStringFilterType}
+						onchange={(newValue: SelectOption<StringFilterMode> | null) => {
+							const filterType = newValue?.value ?? StringFilterMode.Contains;
+							tableContext.paginationRepo?.setFilterMode(def.id, filterType);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -611,9 +623,9 @@ onDestroy(() => {
   overflow-x: var(--cell-overflow-x, clip);
   text-overflow: ellipsis;
   position: relative;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  border-right: solid 1px #cbd4da;
+  padding-inline-start: 0.75rem;
+  padding-inline-end: 0.75rem;
+  border-inline-end: solid 1px #cbd4da;
   border-bottom: solid 1px #cbd4da;
   box-sizing: border-box;
   width: 100%;
@@ -630,8 +642,8 @@ onDestroy(() => {
   height: 100%;
   overflow: hidden;
   display: flex;
-  padding-left: 4px;
-  padding-right: 4px;
+  padding-inline-start: 4px;
+  padding-inline-end: 4px;
   gap: 4px;
   width: 100%;
   justify-content: space-around;
@@ -641,14 +653,14 @@ div.input-cell {
   background-color: #f4f7f9;
   height: var(--height);
   overflow: visible;
-  padding-left: 0;
-  padding-right: 0;
-  border-right: none;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  border-inline-end: none;
   box-sizing: border-box;
 }
 div.input-cell div.stick-right {
   position: absolute;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   height: 100%;
   bottom: 50%;
   top: 0;
@@ -661,7 +673,7 @@ div.input-cell div.stick-right {
 div.floating {
   position: absolute;
   width: 18rem;
-  right: -14.5rem;
+  inset-inline-end: -14.5rem;
   top: calc(100% + 0.75rem);
   z-index: 99999;
   border: solid 2px #cbd4da;
@@ -675,7 +687,7 @@ div.floating::after {
   z-index: 5;
   top: -0.75rem;
   border-radius: 4px;
-  left: 1rem;
+  inset-inline-start: 1rem;
   transform: rotate(45deg);
   background-color: #ffffff;
   border: solid 2px #cbd4da;
@@ -714,7 +726,7 @@ div.input-wrapper-parent div.input-wrapper.left {
 div.input-wrapper-parent div.input-wrapper.right {
   min-width: 100px;
   flex-grow: 2;
-  --input-padding-right: 2.6rem;
+  --input-padding-inline-end: 2.6rem;
 }
 div.input-wrapper-parent > :global(.select-wrapper) {
   flex: 1 1 auto;
@@ -738,4 +750,4 @@ div.input-wrapper-parent > :global(.select-wrapper) {
   height: 60px;
   --input-height: 60px;
   background-color: #ffffff;
-}</style>
+}</style>