Changes to error display and calendar icon

Author: mProjectsCode

exampleVault/.obsidian/plugins/obsidian-meta-bind-plugin/main.js

@@ -29,8 +29,15 @@
 }
 
 .meta-bind-plugin-error {
-	color: red;
+	display: block;
+	color: #FF0000;
 	font-weight: bold;
+	font-family: var(--font-monospace);
+}
+
+.meta-bind-code {
+	color: var(--text-normal);
+	font-family: var(--font-monospace);
 }
 
 .meta-bind-plugin-slider-input-label {

exampleVault/.obsidian/plugins/obsidian-meta-bind-plugin/styles.css

@@ -1,9 +1,9 @@
 ---
-title: ""
+title: asdasd
 select: option b
 multi-select:
   - option b
   - option c
-date: Tuesday, September 6th 2022
+date: Thursday, September 22nd 2022
 time: 19:20
 ---

exampleVault/other note.md

@@ -18,7 +18,9 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 	uid: number;
 	inputField: AbstractInputField | undefined;
 	error: string;
+	type: InputFieldMarkdownRenderChildType;
 
+	fullDeclaration: string;
 	inputFieldDeclaration: InputFieldDeclaration | undefined;
 	bindTargetFile: TFile | undefined;
 	bindTargetMetadataField: string | undefined;
@@ -34,6 +36,8 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 		this.filePath = filePath;
 		this.uid = uid;
 		this.plugin = plugin;
+		this.type = type;
+		this.fullDeclaration = fullDeclaration;
 
 		this.valueQueue = [];
 		this.intervalCounter = 0;
@@ -164,13 +168,17 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 		this.containerEl.addClass('meta-bind-plugin-input');
 
 		if (this.error) {
+			this.containerEl.empty();
+			const originalText = this.containerEl.createEl('span', {text: this.fullDeclaration, cls: 'meta-bind-code'});
 			container.innerText = ` -> ERROR: ${this.error}`;
 			container.addClass('meta-bind-plugin-error');
 			this.containerEl.appendChild(container);
 			return;
 		}
 
 		if (!this.inputField) {
+			this.containerEl.empty();
+			const originalText = this.containerEl.createEl('span', {text: this.fullDeclaration, cls: 'meta-bind-code'});
 			container.innerText = ` -> ERROR: ${(new MetaBindInternalError('input field is undefined and error is empty').message)}`;
 			container.addClass('meta-bind-plugin-error');
 			this.containerEl.appendChild(container);

src/InputFieldMarkdownRenderChild.ts

@@ -3,6 +3,7 @@
 	import Calender from './Calender.svelte';
 	import {getMonthName} from './DatePickerInputSvelteHelpers.js';
 	import {moment} from 'obsidian';
+	import Icon from './Icon.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -79,7 +80,6 @@
 		border-radius: var(--meta-bind-plugin-border-radius);
 		border:        var(--meta-bind-plugin-border-width) solid var(--background-modifier-border);
 		padding:       5px 10px;
-		height:        30px;
 		cursor:        pointer;
 		width:         fit-content;
 		display:       inline-block;
@@ -111,7 +111,10 @@
 </style>
 
 <div class="date-picker-input">
-	<div class="date-picker-text" on:click={() => showDatePicker = true}>{selectedDate.format(dateFormat)}</div>
+	<div class="date-picker-text" on:click={() => showDatePicker = true}>
+		{selectedDate.format(dateFormat)}
+		<Icon iconName="calendar"/>
+	</div>
 	{#if showDatePicker}
 		<div class="date-picker-close-layer" on:click={() => showDatePicker = false}></div>
 		<div class="date-picker">

src/inputFields/DatePicker/DatePicker.svelte

@@ -0,0 +1,19 @@
+<!--adapted from @joethei's code: https://github.com/joethei/obsidian-rss/blob/master/src/view/IconComponent.svelte-->
+<!--adapted from @javalent's code: https://discord.com/channels/686053708261228577/840286264964022302/902949764209987654-->
+<script lang="ts">
+	import {setIcon} from 'obsidian';
+
+	export let iconName: String = '';
+
+	function icon(node: HTMLElement, icon: string) {
+		setIcon(node, icon);
+	}
+</script>
+
+<style>
+
+</style>
+
+{#if iconName.length > 0}
+	<span use:icon={iconName} style=""></span>
+{/if}

src/inputFields/DatePicker/Icon.svelte

@@ -29,8 +29,15 @@
 }
 
 .meta-bind-plugin-error {
-	color: red;
+	display: block;
+	color: #FF0000;
 	font-weight: bold;
+	font-family: var(--font-monospace);
+}
+
+.meta-bind-code {
+	color: var(--text-normal);
+	font-family: var(--font-monospace);
 }
 
 .meta-bind-plugin-slider-input-label {