From 89086afbde9c9548547b2ea0854bb91f74a935e4 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 8 Aug 2023 15:26:15 +0200
Subject: [PATCH] feat(frontend): Add disable prop to App Toggles (#2010)

---
 .../lib/components/apps/components/inputs/AppCheckbox.svelte | 4 ++++
 .../src/lib/components/apps/editor/component/components.ts   | 5 +++++
 .../apps/editor/componentsPanel/ComponentList.svelte         | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
index 785cb487e0..227526ea21 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
@@ -38,6 +38,8 @@
 
 	let defaultValue: boolean | undefined = undefined
 	let label: string = ''
+	let disabled: boolean = false
+
 	$componentControl[id] = {
 		setValue(nvalue: boolean) {
 			value = nvalue
@@ -82,6 +84,7 @@
 
 <InputValue {id} key={extraKey} input={configuration.label} bind:value={label} />
 <InputValue {id} key={extraKey} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue {id} key={extraKey} input={configuration.disabled} bind:value={disabled} />
 
 <InitializeComponent {id} />
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
@@ -95,5 +98,6 @@
 			preclickAction?.()
 			value = e.detail
 		}}
+		{disabled}
 	/>
 </AlignWrapper>
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 689a1f3136..b34a1313ed 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -1396,6 +1396,11 @@ This is a paragraph.
 					type: 'static',
 					value: undefined,
 					fieldType: 'boolean'
+				},
+				disabled: {
+					type: 'static',
+					value: false,
+					fieldType: 'boolean'
 				}
 			}
 		}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index bea66636da..e2e3dc5662 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -66,7 +66,7 @@
 	}))
 </script>
 
-<section class="p-2 sticky w-full z-10 top-0">
+<section class="p-2 sticky w-full z-10 top-0 bg-surface border-b">
 	<ClearableInput bind:value={search} placeholder="Search components..." />
 </section>