ui: Ability to close all modals with a backdrop click or header cross

ui/src/lib/components/DeleteAccountCard.svelte

@@ -74,6 +74,10 @@
          }
      );
  }
+
+ function toggleModal(): void {
+     deleteAccountModalOpen = !deleteAccountModalOpen;
+ }
 </script>
 
 <Card {...$$restProps}>
@@ -102,10 +106,10 @@
 
 <Modal
     isOpen={deleteAccountModalOpen}
-    toggle={() => deleteAccountModalOpen = !deleteAccountModalOpen}
+    toggle={toggleModal}
 >
     <ModalHeader
-        toggle={() => deleteAccountModalOpen = !deleteAccountModalOpen}
+        toggle={toggleModal}
     >
         {$t('account.delete.delete')}
     </ModalHeader>

ui/src/lib/components/DomainGroupModal.svelte

@@ -65,9 +65,9 @@
 
 <Modal
     {isOpen}
-    {toggle}
     scrollable
     size="lg"
+    {toggle}
 >
     <ModalHeader {toggle}>
         {$t('domaingroups.manage')}

ui/src/lib/components/ModalDiffZone.svelte

@@ -101,6 +101,10 @@
      }
  }
 
+ function toggle(): void {
+     isOpen = !isOpen;
+ }
+
  controls.Open = Open;
 </script>
 
@@ -108,9 +112,10 @@
     isOpen={isOpen}
     size="lg"
     scrollable
+    {toggle}
 >
     {#if domain}
-        <ModalHeader toggle={() => isOpen = false}>
+        <ModalHeader {toggle}>
             {@html $t('domains.view.description', {"domain": `<span class="font-monospace">${escape(domain.domain)}</span>`})}
         </ModalHeader>
     {/if}

ui/src/lib/components/ModalDomainDelete.svelte

@@ -51,14 +51,19 @@
      isOpen = true;
  }
 
+ function toggle(): void {
+     isOpen = !isOpen;
+ }
+
  controls.Open = Open;
 </script>
 
 <Modal
     isOpen={isOpen}
     size="lg"
+    {toggle}
 >
-    <ModalHeader toggle={() => isOpen = false}>{$t('domains.removal')}</ModalHeader>
+    <ModalHeader {toggle}>{$t('domains.removal')}</ModalHeader>
     <ModalBody>
         {$t('domains.alert.remove')}
     </ModalBody>

ui/src/lib/components/ModalUploadZone.svelte

@@ -83,14 +83,19 @@
      uploadModalActiveTab = 0;
  }
 
+ function toggle(): void {
+     isOpen = !isOpen;
+ }
+
  controls.Open = Open;
 </script>
 
 <Modal
     isOpen={isOpen}
     size="lg"
+    {toggle}
 >
-    <ModalHeader toggle={() => isOpen = false}>{$t('zones.upload')}</ModalHeader>
+    <ModalHeader {toggle}>{$t('zones.upload')}</ModalHeader>
     <ModalBody>
         <TabContent on:tab={(e) => (uploadModalActiveTab = e.detail)}>
             <TabPane tabId="uploadText" tab={$t('zones.import-text')} active>

ui/src/lib/components/ModalViewZone.svelte

@@ -57,6 +57,10 @@
      );
  }
 
+ function toggle(): void {
+     isOpen = !isOpen;
+ }
+
  controls.Open = Open;
 </script>
 
@@ -64,8 +68,9 @@
     isOpen={isOpen}
     size="lg"
     scrollable
+    {toggle}
 >
-    <ModalHeader toggle={() => isOpen = false}>{$t('domains.view.title')}</ModalHeader>
+    <ModalHeader {toggle}>{$t('domains.view.title')}</ModalHeader>
     <ModalBody>
         {#if zoneContent}
             <pre style="overflow: initial">{zoneContent}</pre>

ui/src/lib/components/domains/AliasModal.svelte

@@ -135,7 +135,7 @@
     {isOpen}
     {toggle}
 >
-    <ModalHeader>
+    <ModalHeader {toggle}>
         {$t('domains.add-an-alias')} {origin.domain}
     </ModalHeader>
     <ModalBody>

ui/src/lib/components/domains/ServiceModal.svelte

@@ -106,9 +106,9 @@
 {#if service && service._domain !== undefined}
 <Modal
     {isOpen}
-    {toggle}
     scrollable
     size="lg"
+    {toggle}
 >
     <ModalHeader
         {toggle}

ui/src/lib/components/providers/NewModal.svelte

@@ -57,14 +57,19 @@
      form.ptype = event.detail.ptype;
      form.changeState(0).then((res) => form.form = res);
  }
+
+ function toggle(): void {
+     isOpen = !isOpen;
+ }
 </script>
 
 <Modal
     {isOpen}
     scrollable
     size="lg"
+    {toggle}
 >
-    <ModalHeader>
+    <ModalHeader {toggle}>
         {$t('provider.new-form')}
     </ModalHeader>
     <ModalBody>