@bagelink/vue 1.2.109 → 1.2.111

package/dist/style.css

@@ -1,4 +1,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
+.expand-enter-active,
+.expand-leave-active {
+	transition: all 0.2s;
+	transition-delay: 0ms;
+}
+.expand-enter-from,
+.expand-leave-to {
+	max-height: 0;
+}
+.expand-enter-to,
+.expand-leave-from {
+	max-height: 300px;
+}
+
 .accordion-item[data-v-3334f637] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
@@ -41,20 +55,6 @@
 	text-decoration: underline;
 }
 
-.expand-enter-active,
-.expand-leave-active {
-	transition: all 0.2s;
-	transition-delay: 0ms;
-}
-.expand-enter-from,
-.expand-leave-to {
-	max-height: 0;
-}
-.expand-enter-to,
-.expand-leave-from {
-	max-height: 300px;
-}
-
 .bgl_btn[data-v-99c4aa53] {
   --btn-bg: var(--bgl-primary);
   --btn-color: var(--bgl-light-text);
@@ -262,10 +262,6 @@ display: block;
   object-fit: cover;
 }
 
-.inline[data-v-689f051f] {
-	display: inline;
-}
-
 .pill {
 	border-radius: 10px;
 	padding: 4px 8px;
@@ -308,6 +304,10 @@ display: block;
 	color: var(--bgl-red);
 }
 
+.inline[data-v-689f051f] {
+	display: inline;
+}
+
 .bgl_vid iframe[data-v-006552f6],
 .bgl_vid video[data-v-006552f6] {
 	width: 100%;
@@ -1406,6 +1406,12 @@ fieldset[data-v-f7e758e5] {
     color: var(--label-color) !important;
 }
 
+/* Global styles */
+pre code.hljs {
+	padding: 0 !important;
+	background: transparent !important;
+}
+
 .code-editor-container[data-v-6ab9613f] {
 	margin-bottom: 0.5rem;
 	height: 100%;
@@ -1474,12 +1480,6 @@ fieldset[data-v-f7e758e5] {
 	color: transparent;
 }
 
-/* Global styles */
-pre code.hljs {
-	padding: 0 !important;
-	background: transparent !important;
-}
-
 .colorInputPick{
     --input-font-size: 12px;
 	height: calc(var(--input-height) - 9px) !important;
@@ -2148,42 +2148,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-c16650b4] {
-	width: 100%;
-}
-.selectinput-option[data-v-c16650b4] {
-	padding: 6px 12px;
-	cursor: pointer;
-	border-radius: 5px;
-	transition: all 0.2s;
-	display: grid;
-	grid-template-columns:1fr;
-	justify-content: space-between;
-	width: 100%;
-	font-size: var(--input-font-size);
-	margin-block: 0.15rem;
-}
-.selectinput-option .bgl_icon-font[data-v-c16650b4]{
-	line-height: normal;
-}
-.selectinput-options.multiselect .selectinput-option[data-v-c16650b4] {
-	grid-template-columns: 10px 1fr;
-}
-.selectinput-options[data-v-c16650b4] {
-	max-height: 300px;
-	overflow-y: auto;
-}
-.selectinput-option[data-v-c16650b4]:hover, .highlight[data-v-c16650b4] {
-	background: var(--bgl-gray-20);
-}
-.isEmpty p[data-v-c16650b4] {
-	opacity: 0.3;
-}
-.selected[data-v-c16650b4]{
-	/* background: var(--bgl-primary-tint); */
-	background: var(--bgl-selected);
-}
-
 .bagel-input label {
 	font-size: var(--label-font-size);
 }
@@ -2224,6 +2188,42 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	/* color: var(--input-color); */
 }
 
+.selectinput[data-v-c16650b4] {
+	width: 100%;
+}
+.selectinput-option[data-v-c16650b4] {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: grid;
+	grid-template-columns:1fr;
+	justify-content: space-between;
+	width: 100%;
+	font-size: var(--input-font-size);
+	margin-block: 0.15rem;
+}
+.selectinput-option .bgl_icon-font[data-v-c16650b4]{
+	line-height: normal;
+}
+.selectinput-options.multiselect .selectinput-option[data-v-c16650b4] {
+	grid-template-columns: 10px 1fr;
+}
+.selectinput-options[data-v-c16650b4] {
+	max-height: 300px;
+	overflow-y: auto;
+}
+.selectinput-option[data-v-c16650b4]:hover, .highlight[data-v-c16650b4] {
+	background: var(--bgl-gray-20);
+}
+.isEmpty p[data-v-c16650b4] {
+	opacity: 0.3;
+}
+.selected[data-v-c16650b4]{
+	/* background: var(--bgl-primary-tint); */
+	background: var(--bgl-selected);
+}
+
 .bgl_input .canvas {
 	width: 100%;
 	height: 100%;
@@ -2239,6 +2239,40 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	border-radius: var(--input-border-radius);
 }
 
+.table-row .bagel-input input,
+.table-row .bagel-input textarea,
+.table-row .bagel-input .input {
+	border-radius: 0;
+	background: transparent;
+	color: var(--bgl-text-color);
+}
+.table-row .bagel-input textarea {
+	resize: none;
+	min-height: 40px;
+	overflow: auto;
+	margin: 0px;
+	padding: 0.64rem 0.7rem 0;
+}
+.table-row .bagel-input {
+	margin: 0;
+}
+.table-row .bagel-input input:focus-visible,
+.table-row .bagel-input textarea:focus-visible,
+.table-row .bagel-input .input:focus-visible {
+	background: var(--border-color);
+}
+.ghost {
+	opacity: 0;
+	background: #c8ebfb;
+}
+.sortable-chosen {
+	cursor: grabbing !important;
+	border-color: transparent;
+	background: var(--bgl-box-bg);
+	border-radius: 10px;
+	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
+}
+
 .table-side-scroll[data-v-e9632f79] {
 	overflow: auto;
 	margin-inline-start: -1rem;
@@ -2345,40 +2379,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	opacity: 1;
 }
 
-.table-row .bagel-input input,
-.table-row .bagel-input textarea,
-.table-row .bagel-input .input {
-	border-radius: 0;
-	background: transparent;
-	color: var(--bgl-text-color);
-}
-.table-row .bagel-input textarea {
-	resize: none;
-	min-height: 40px;
-	overflow: auto;
-	margin: 0px;
-	padding: 0.64rem 0.7rem 0;
-}
-.table-row .bagel-input {
-	margin: 0;
-}
-.table-row .bagel-input input:focus-visible,
-.table-row .bagel-input textarea:focus-visible,
-.table-row .bagel-input .input:focus-visible {
-	background: var(--border-color);
-}
-.ghost {
-	opacity: 0;
-	background: #c8ebfb;
-}
-.sortable-chosen {
-	cursor: grabbing !important;
-	border-color: transparent;
-	background: var(--bgl-box-bg);
-	border-radius: 10px;
-	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
-}
-
 .tel-input[data-v-24f599bf] {
 	direction: ltr;
 	text-align: left;
@@ -2812,6 +2812,24 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	background-color: var(--skeleton-bg);
 }
 
+.fileColSelect{
+	--input-bg: var(--bgl-green-light);
+}
+.fileColSelect .bgl_icon-font{
+	color: var(--bgl-green);
+	line-height: 0;
+}
+.hideLabel label{
+	font-size: 0 !important;
+}
+.mapping-table .selectinput-btn:disabled{
+	background: var(--input-bg) !important;
+	cursor: not-allowed !important;
+}
+.field-label{
+	--pill-height: 20px;
+}
+
 .bgl_bottombar .bgl_btn-flex{
   flex-direction: column;
   height: 60px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.109",
+  "version": "1.2.111",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Icon/Icon.vue

@@ -9,6 +9,8 @@ const props = withDefaults(defineProps<{
 	color?: string
 	round?: boolean
 	weight?: number | string
+	fontAwesome?: boolean
+	fill?: boolean
 }>(), {
 	size: 1
 })
@@ -16,6 +18,7 @@ const props = withDefaults(defineProps<{
 const iconRender = $computed(() => props.icon || props.name) as IconType
 
 const iconRenderType = $computed(() => {
+	if (props.fontAwesome && (FONT_AWESOME_ICONS.includes(iconRender) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender))) return 'font-awesome'
 	if (MATERIAL_ICONS.includes(iconRender)) return 'material'
 	if (FONT_AWESOME_ICONS.includes(iconRender) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender)) return 'font-awesome'
 	return 'material'
@@ -31,7 +34,7 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 		:class="{ 'round flex aspect-ratio-1 justify-content-center': round }"
 		:style="{ 'fontSize': `${size}rem`,
 			color,
-			'font-variation-settings': `'wght' ${weight || 400}`,
+			'font-variation-settings': `'FILL' ${fill ? 1 : 0}, 'wght' ${weight || 400}`,
 			'width': round ? `calc(${size}rem * 2)` : 'auto',
 			'height': round ? `calc(${size}rem * 2)` : 'auto',
 		}"
@@ -40,7 +43,15 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 	</span>
 	<span
 		v-else-if="iconRenderType === 'font-awesome'"
-		class="fa far bgl_icon-font" :class="[`fa-${iconRender}`, { 'fa-brands': isFaBrand }]"
+		class="fa bgl_icon-font"
+		:class="[
+			`fa-${iconRender}`,
+			{
+				'fa-brands': isFaBrand,
+				'fa-solid': fill,
+				'far': !fill && !isFaBrand,
+			},
+		]"
 		:style="{ 'fontSize': `${size}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
 	/>
 </template>

package/src/components/ImportData.vue

@@ -1535,116 +1535,109 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 		</div>
 
 		<!-- Step 2: Sheet selection and configuration -->
-		<div v-if="file && !isLoading && sheetNames.length > 0" class="config-section">
-			<div class="file-info mb-1">
-				<div class="file-chip">
-					{{ file.name }}
-				</div>
-				<Btn thin round value="Change File" @click="file = null" />
-			</div>
-			<SelectInput v-if="sheetNames.length > 1" v-model="selectedSheet" :options="sheetNames" label="Select Sheet" />
-			<div class="header-config">
-				<CheckInput v-model="hasHeaders" label="Mark this if file has a header row" />
+		<div class="overflow h-100p">
+			<div v-if="file && !isLoading && sheetNames.length > 0" class="config-section flex gap-05 pb-2">
+				<Btn v-tooltip="'Change File'" :value="file.name" thin round iconEnd="edit" @click="file = null" />
+				<SelectInput v-if="sheetNames.length > 1" v-model="selectedSheet" :options="sheetNames" label="Select Sheet" />
+				<CheckInput v-model="hasHeaders" label="Mark this if file has a header row" class="m-0" />
 			</div>
-		</div>
 
-		<!-- Step 3: Field Mapping -->
-		<Card v-if="file && !isLoading && fileHeaders.length > 0" class="overflow h-100p">
-			<h3 class="mt-0">
-				Map Fields
-			</h3>
-			<p class="instructions">
-				Match each required field to a column from your file, set default values, or configure transformations
-			</p>
-
-			<div class="mapping-table">
-				<table class="tbl">
-					<thead>
-						<tr>
-							<th>Schema Field</th>
-							<th>File Column</th>
-							<th>Default Value</th>
-							<th>Data Type</th>
-							<th>Actions</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="field in schemaFields" :key="field.id" :class="{ 'array-field-row': field.isArrayField || field.$el === 'array' }">
-							<td>
-								<div class="field-label">
-									{{ field.label }}
-									<span v-if="field.isArrayField">↳</span>
-									<Pill v-if="field.$el === 'array'" outline thin value="Array" />
-									<!-- <span v-if="field.$el === 'array'" class="array-parent-indicator">[Array]</span> -->
-									<span v-if="isFieldRequired(field)">*</span>
-									<span v-if="getFieldDescription(field).isConditional">†</span>
-								</div>
-								<div v-if="field.disabled" class="field-disabled-reason">
-									{{ field.disabledReason }}
-								</div>
-								<div v-if="getFieldDescription(field).isConditional">
-									{{ getFieldDescription(field).description }}
-								</div>
-							</td>
-							<td>
-								<SelectInput
-									v-model="fieldMapping[field.id]"
-									:options="fileHeaders"
-									:required="isFieldRequired(field)"
-									:disabled="field.disabled"
-									@change="handleSelectChange($event, field.id)"
+			<!-- Step 3: Field Mapping -->
+			<div v-if="file && !isLoading && fileHeaders.length > 0">
+				<!-- <h3 class="mt-0">
+					Map Fields
+				</h3> -->
+				<p class="label pb-1 border-bottom mb-1">
+					Match each required field to a column from your file, set default values, or configure transformations
+				</p>
+
+				<div class="mapping-table">
+					<div class="grid grid-wrap-5 gap-1 bold pb-1">
+						<p>Schema Field</p>
+						<p>Column from File</p>
+						<p>Default Value</p>
+						<p>Data Type</p>
+						<p>Actions</p>
+					</div>
+
+					<div v-for="field in schemaFields" :key="field.id" class="grid grid-wrap-5 gap-1" :class="{ 'array-field-row': field.isArrayField || field.$el === 'array' }">
+						<div>
+							<div class="field-label">
+								{{ field.label }}
+								<span v-if="field.isArrayField">↳</span>
+								<Pill v-if="field.$el === 'array'" class="txt10 ms-05" round thin value="Array" />
+								<!-- <span v-if="field.$el === 'array'" class="array-parent-indicator">[Array]</span> -->
+								<span v-if="isFieldRequired(field)">*</span>
+								<span v-if="getFieldDescription(field).isConditional">†</span>
+							</div>
+							<div v-if="field.disabled" class="field-disabled-reason">
+								{{ field.disabledReason }}
+							</div>
+							<div v-if="getFieldDescription(field).isConditional">
+								{{ getFieldDescription(field).description }}
+							</div>
+						</div>
+						<td class="fileColSelect">
+							<SelectInput
+								v-model="fieldMapping[field.id]"
+								icon="table_chart"
+								:options="fileHeaders"
+								:required="isFieldRequired(field)"
+								:disabled="field.disabled"
+								@change="handleSelectChange($event, field.id)"
+							/>
+						</td>
+						<div>
+							<!-- Default Value Input -->
+							<div class="default-value-container hideLabel">
+								{{ initDefaultValue(field.id) }}
+								<component
+									:is="renderField(getFieldWithDefaults(field))"
 								/>
-							</td>
-							<td>
-								<!-- Default Value Input -->
-								<div class="default-value-container">
-									{{ initDefaultValue(field.id) }}
-									<component
-										:is="renderField(getFieldWithDefaults(field))"
-									/>
-								</div>
-							</td>
-							<td>
-								<SelectInput
-									v-model="fieldDataTypes[field.id]"
-									:options="dataTypeOptions"
-									:disabled="!fieldMapping[field.id] && !defaultValues[field.id]"
+							</div>
+						</div>
+						<div>
+							<SelectInput
+								v-model="fieldDataTypes[field.id]"
+								:options="dataTypeOptions"
+								:disabled="!fieldMapping[field.id] && !defaultValues[field.id]"
+							/>
+						</div>
+						<div>
+							<div class="flex gap-05">
+								<Btn
+									v-tooltip="'Transform'"
+									thin
+									:disabled="field.disabled"
+									icon="transform"
+									@click="openTransformDialog(field)"
 								/>
-							</td>
-							<td>
-								<div class="action-buttons-cell">
-									<Btn
-										v-tooltip="'Transform'"
-										thin
-										:disabled="field.disabled"
-										icon="transform"
-										@click="openTransformDialog(field)"
-									/>
-									<Btn v-if="field.$el === 'array'" v-tooltip="'Related File'" thin icon="attach_file" :disabled="field.disabled" @click="openRelatedDialog(field)" />
-								</div>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
+								<Btn v-if="field.$el === 'array'" v-tooltip="'Related File'" thin icon="attach_file" :disabled="field.disabled" @click="openRelatedDialog(field)" />
+							</div>
+						</div>
+					</div>
+				</div>
 
-			<div v-if="mappingComplete" class="action-buttons">
-				<Btn @click="showPreview">
-					Preview Data
-				</Btn>
-			</div>
-			<div v-else class="action-buttons">
-				<div class="mapping-incomplete-message">
-					Please map the required fields to continue
+				<div v-if="mappingComplete" class="action-buttons">
+					<Btn @click="showPreview">
+						Preview Data
+					</Btn>
+				</div>
+				<div v-else class="action-buttons">
+					<div class="mapping-incomplete-message">
+						Please map the required fields to continue
+					</div>
 				</div>
 			</div>
-		</Card>
+		</div>
 
 		<!-- Transformation Modal -->
 		<Modal v-model:visible="showTransformDialog" title="Configure Transformations" width="800">
 			<div v-if="selectedTransformField">
-				<p>Create transformations for <strong>{{ selectedTransformField.label }}</strong></p>
-				<Btn icon="auto_awesome" thin value="Autodetect" @click="autoPopulateTransformations(selectedTransformField.id)" />
+				<div class="flex space-between gap-1 mb-1">
+					<p>Create transformations for <strong>{{ selectedTransformField.label }}</strong></p>
+					<Btn icon="auto_awesome" thin value="Autodetect" @click="autoPopulateTransformations(selectedTransformField.id)" />
+				</div>
 				<table>
 					<thead>
 						<tr>
@@ -1700,16 +1693,20 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						</tr>
 					</tbody>
 				</table>
-				<Btn thin value="Close" @click="showTransformDialog = false" />
+				<div class="flex pt-05">
+					<Btn class="ms-auto" value="Close" @click="showTransformDialog = false" />
+				</div>
 			</div>
 		</Modal>
 
 		<!-- Related File Modal -->
 		<Modal v-model:visible="showRelatedDialog" title="Configure Related Data" width="900">
 			<div v-if="selectedRelationField">
-				<p>Upload a file with related data for {{ selectedRelationField.label }}</p>
+				<p class="pb-05">
+					Upload a file with related data for {{ selectedRelationField.label }}
+				</p>
 
-				<div v-if="!relatedFiles[selectedRelationField.id]">
+				<div v-if="!relatedFiles[selectedRelationField.id]" class="mb-05">
 					<DragOver
 						accept=".csv,.xls,.xlsx"
 						@addFiles="(files) => { if (files[0]) processRelatedFile(selectedRelationField!.id, files[0]) }"
@@ -1795,7 +1792,9 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 						</table>
 					</div>
 				</div>
-				<Btn value="Close" @click="showRelatedDialog = false" />
+				<div class="flex pt-05">
+					<Btn class="ms-auto" value="Close" @click="showRelatedDialog = false" />
+				</div>
 			</div>
 		</Modal>
 
@@ -1916,3 +1915,23 @@ function getRelatedFieldWithDefaults(parentId: string, field: any) {
 		</Modal>
 	</Card>
 </template>
+
+<style>
+.fileColSelect{
+	--input-bg: var(--bgl-green-light);
+}
+.fileColSelect .bgl_icon-font{
+	color: var(--bgl-green);
+	line-height: 0;
+}
+.hideLabel label{
+	font-size: 0 !important;
+}
+.mapping-table .selectinput-btn:disabled{
+	background: var(--input-bg) !important;
+	cursor: not-allowed !important;
+}
+.field-label{
+	--pill-height: 20px;
+}
+</style>

package/dist/types/timeago.d.ts

@@ -1,23 +0,0 @@
-export interface TimeUnit {
-    singular: string;
-    plural: string;
-}
-export type TranslationValue = string | TimeUnit;
-export interface LanguageTranslations {
-    [key: string]: TranslationValue;
-}
-export type AvailableTimeLanguages = 'en' | 'es' | 'fr' | 'he';
-export type DayFormatTypes = 'DD' | 'DDD' | 'DDDD';
-export type MonthFormatTypes = 'MM' | 'MMM' | 'MMMM';
-export type YearFormatTypes = 'YY' | 'YYYY';
-export type HourFormatTypes = 'HH';
-export type MinuteFormatTypes = 'mm';
-export type SecondFormatTypes = 'ss';
-export type MillisecondFormatTypes = 'sss';
-export type AmPmFormatTypes = 'AmPm';
-export type DateFormatSeparatorTypes = '/' | '-' | ' ' | ':' | '.';
-export type CommonDateFormats = `${DayFormatTypes}${DateFormatSeparatorTypes}${MonthFormatTypes}${DateFormatSeparatorTypes}${YearFormatTypes}` | 'DD.MM.YY' | 'DD.MM.YYYY' | 'DD/MM/YY' | 'DD/MM/YYYY' | 'MM.DD.YY' | 'MM.DD.YYYY' | 'MM/DD/YY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'YY-MM-DD' | 'DD MMM YYYY' | 'DD MMMM YYYY' | 'DDD, DD MMM' | 'DDDD, DD MMMM' | 'MMM DD' | 'MMMM DD';
-export type CommonTimeFormats = 'HH:mm' | 'HH:mm:ss' | 'HH:mm:ss:sss' | 'HH:MM' | 'HH:mm AmPm';
-export type CommonDateTimeFormats = `${CommonDateFormats} ${CommonTimeFormats}` | `${CommonTimeFormats}, ${CommonDateFormats}` | 'YYYY-MM-DD HH:MM';
-export type DateTimeAcceptedFormats = CommonDateFormats | CommonTimeFormats | CommonDateTimeFormats;
-//# sourceMappingURL=timeago.d.ts.map

package/dist/types/timeago.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"timeago.d.ts","sourceRoot":"","sources":["../../src/types/timeago.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEhD,MAAM,WAAW,oBAAoB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAA;CAC/B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAClD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AACpD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,CAAA;AAC3C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAA;AACpC,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAA;AAC1C,MAAM,MAAM,eAAe,GAAG,MAAM,CAAA;AAEpC,MAAM,MAAM,wBAAwB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAGlE,MAAM,MAAM,iBAAiB,GAC1B,GAAG,cAAc,GAAG,wBAAwB,GAAG,gBAAgB,GAAG,wBAAwB,GAAG,eAAe,EAAE,GAC9G,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GACrD,YAAY,GAAG,UAAU,GACzB,aAAa,GAAG,cAAc,GAC9B,aAAa,GAAG,eAAe,GAC/B,QAAQ,GAAG,SAAS,CAAA;AAEvB,MAAM,MAAM,iBAAiB,GAC1B,OAAO,GAAG,UAAU,GAAG,cAAc,GACrC,OAAO,GACP,YAAY,CAAA;AAGf,MAAM,MAAM,qBAAqB,GAC9B,GAAG,iBAAiB,IAAI,iBAAiB,EAAE,GAC3C,GAAG,iBAAiB,KAAK,iBAAiB,EAAE,GAC5C,kBAAkB,CAAA;AAGrB,MAAM,MAAM,uBAAuB,GAChC,iBAAiB,GACjB,iBAAiB,GACjB,qBAAqB,CAAA"}