Refactoring: move svelte component out of UIElement

src/UI/InputElement/Helpers/OpeningHoursInput.svelte

@@ -5,8 +5,11 @@
   import { UIEventSource } from "../../../Logic/UIEventSource"
   import ToSvelte from "../../Base/ToSvelte.svelte"
   import OpeningHoursInput from "../../OpeningHours/OpeningHoursInput"
+  import PublicHolidaySelector from "../../OpeningHours/PublicHolidaySelector.svelte"
 
   export let value: UIEventSource<string>
+  export let phSelectorValue = new UIEventSource("")
 </script>
 
-<ToSvelte construct={new OpeningHoursInput(value)} />
+<ToSvelte construct={new OpeningHoursInput(value, phSelectorValue)} />
+<PublicHolidaySelector value={phSelectorValue}/>

src/UI/OpeningHours/OpeningHoursInput.ts

@@ -21,6 +21,7 @@ export default class OpeningHoursInput extends InputElement<string> {
 
     constructor(
         value: UIEventSource<string> = new UIEventSource<string>(""),
+        phSelectorValue: UIEventSource<string> = new UIEventSource<string>(undefined),
         prefix = "",
         postfix = ""
     ) {
@@ -88,7 +89,8 @@ export default class OpeningHoursInput extends InputElement<string> {
                 break
             }
         }
-        const phSelectorValue = new UIEventSource<string>(ph ?? "")
+
+        phSelectorValue.set(ph ?? "")
 
         // Note: MUST be bound AFTER the leftover rules!
         const rulesFromOhPicker: UIEventSource<OpeningHour[]> = valueWithoutPrefix.sync(
@@ -142,7 +144,6 @@ export default class OpeningHoursInput extends InputElement<string> {
         this._element = new Combine([
             leftoverWarning,
             ohPicker,
-            new SvelteUIElement(PublicHolidaySelector, { value: phSelectorValue }),
         ])
     }