@csedl/hotwire-svelte-helpers 0.1.0 → 0.1.1

package/.idea/dictionaries/project.xml

@@ -0,0 +1,7 @@
+<component name="ProjectDictionaryState">
+  <dictionary name="project">
+    <words>
+      <w>Hotwire</w>
+    </words>
+  </dictionary>
+</component>

package/README.md

@@ -1,44 +1,49 @@
-# Stimulus Dropdown
+# Hotwire Svelte Helpers
+
+is the successor of the `@csedl/stimulus-dropdown` package
 
 Dropdown with stimulus, based on floating-UI.
 
 **Links:**
-- [Online Demo App](https://stimulus-dropdown.sedlmair.ch/)
-- [Ruby Gem: csedl-stimulus-dropdown](https://gitlab.com/sedl/csedl-stimulus-dropdown)
+- [Online Demo App](https://hotwire-svelte-helpers.sedlmair.ch/)
+- [Ruby Gem: csedl-stimulus-dropdownSvelte](https://gitlab.com/sedl/csedl-stimulus-dropdown)
 - [How we are building a Rails App](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)
 
 ## Import and config
 
 ```javascript
-import {StimulusDropdown} from "@csedl/stimulus-dropdown"
-StimulusDropdown.debug = false
+import {HotwireSvelteHelpers} from "@csedl/hotwire-svelte-helpers"
+HotwireSvelteHelpers.debug = true
+HotwireSvelteHelpers.initializeOverlays()
 ```
 
 All configurations and their defaults are as follows:
 
 ```javascript
-debug: false
-closeButtonSelector: '.close-button'
-dropdownContentSelector: '.content'
-  // when a data-src attribute is added to the panel, the content-tag is replaced by the result of the xhr-response
-tooltipContentSelector: '.content'
-  // same as dropdownContentSelector
-addArrow: true
-  // add element with id #arrow within the panel, on opening
-persistTooltipOnClick: false
-  // clicking on the tooltip-label causes the tooltip-panel to persist open
-  // this may mostly be helpful for development, so you may make it environment-dependent
+HotwireSvelteHelpers.initializeOverlays({
+    debug: false,
+    closeButtonSelector: '.close-button',
+    dropdownContentSelector: '.content',
+    // when a data-src attribute is added to the panel, the content-tag is replaced by the result of the xhr-response
+    tooltipContentSelector: '.content',
+    // same as dropdownContentSelector
+    addArrow: true,
+    // add element with id #arrow within the panel, on opening
+    persistTooltipOnClick: false
+    // clicking on the tooltip-label causes the tooltip-panel to persist open
+    // this may mostly be helpful for development, so you may make it environment-dependent
+})
 ```
 
 ## Example
 
-There is a [online example app](https://stimulus-dropdown.sedlmair.ch/)
+There is a [online example app](https://hotwire-svelte-helpers.sedlmair.ch/)
 
 ```html
 <div data-controller="csedl-dropdown" data-panel-id="dropdown-panel-3h5k7l4">
     Button
 </div>
-<div id="dropdown-panel-3h5k7l4" class="hide dropdown-panel-example-class">
+<div id="dropdown-panel-3h5k7l4" class="hide dropdownSvelte-panel-example-class">
     ... any content
 </div>
 ```
@@ -53,35 +58,35 @@ There is a [online example app](https://stimulus-dropdown.sedlmair.ch/)
 
 ## Close on click outside
 
-When a dropdown is open, it closes when clicking outside a panel.
+When a dropdownSvelte is open, it closes when clicking outside a panel.
 
 This behaviour can be stopped on:
 
-- The clicked element or its parent elements has the `data-dropdown-persist` (not: `data-dropdown-persist="false"`) attribute.
+- The clicked element or its parent elements has the `data-dropdownSvelte-persist` (not: `data-dropdownSvelte-persist="false"`) attribute.
 - the event has the attribute `event.detail.dataDropdownPersist` set to true.
 
 ## Flexibility
 
-The functions of this package are intended to give flexibility on various ways building a dropdown.
+The functions of this package are intended to give flexibility on various ways building a dropdownSvelte.
 
 - Stimulus Controller with Rails Helper
   - Example: [Stimulus controller within this package](https://gitlab.com/sedl/csedl-stimulus-dropdown-js/-/blob/main/src/dropdown-controller.js?ref_type=heads)
 - Stimulus with Svelte component
   - Example: [Stimulus controller on example app](https://gitlab.com/sedl/stimulusfloatingdropdown/-/blob/main/app/frontend/javascript/svelte-dropdown-controller.js?ref_type=heads)
 
-**Important:** When creating or initializing the dropdown, 
+**Important:** When creating or initializing the dropdownSvelte, 
 always call the initialize function before attaching a listener to the panel's close event. 
 The initialize function adds a `close` event listener to the panel that executes the `onPanelClose` function. 
 If your custom close function destroys the panel, this has to be done after the `onPanelClose` is fired by the `close` event.
 
 ## Requirements
 
-- The class `dropdown-panel-example-class` must be set to `position: absolute;`.
+- The class `dropdownSvelte-panel-example-class` must be set to `position: absolute;`.
 - The class `hide` must be set to `display: none;`.
 
 ## Options
 
-- If there is an element with ID `arrow` inside the dropdown panel, it is treated as described on [floating-ui](https://floating-ui.com/docs/arrow).
+- If there is an element with ID `arrow` inside the dropdownSvelte panel, it is treated as described on [floating-ui](https://floating-ui.com/docs/arrow).
 - The `data-placement` attribute on the panel can be used to control positioning, see [floating-ui/placements](https://floating-ui.com/docs/tutorial#placements).
 
 ## Events
@@ -109,12 +114,12 @@ Event Triggers on the panel element:
 If the panels are rendered to a different location than the button (see z-index on [rails-app](https://gitlab.com/sedl/stimulusfloatingdropdown)), within a scrollable (e.g.) container, the button would scroll away from the panel. For such cases, add this both data-attributes to the scrollable element:
 
 ```html
-<div data-controller="csedl-place-dropdown-panels" data-on="scroll" data-run-after="500" style="overflow: scroll;">
+<div data-controller="csedl-place-dropdownSvelte-panels" data-on="scroll" data-run-after="500" style="overflow: scroll;">
     ...
 </div>
 ```
 
-Now, on scrolling, it searches for all dropdown-buttons (by class-name `has-open-panel`) and triggers the `place-panel` event there.
+Now, on scrolling, it searches for all dropdownSvelte-buttons (by class-name `has-open-panel`) and triggers the `place-panel` event there.
 
 **Options**
 
@@ -151,15 +156,15 @@ makes a tooltip.
 
 It adds the class `tooltip-is-visible` to the tooltip label while the tooltip is visible.
 
-`data-src` attribute is working similar to dropdown
+`data-src` attribute is working similar to dropdownSvelte
 
 ## Rails Helpers
 
 There is a corresponding rails gem, on [GitLab](https://gitlab.com/sedl/csedl-stimulus-dropdown)
 
-## Stimulus Usage in stimulus-dropdown
+## Stimulus Usage in stimulus-dropdownSvelte
 
-This package uses Stimulus unconventionally to initialize and toggle external dropdown or tooltip panels 
+This package uses Stimulus unconventionally to initialize and toggle external dropdownSvelte or tooltip panels 
 (via data-panel-id) rather than managing child elements within the controller’s scope, 
 as is typical in Stimulus documentation. 
 

package/index.js

@@ -1,19 +1,12 @@
 
-import StimulusDropdown from "./src/config.js";
+import HotwireSvelteHelpers from "./src/lib/config.js";
+import { cleanMount, unmountAllDetached } from './src/svelte/cleanMount';
+import {initializeDropdown, onPanelOpen, getOrSetPanelId, debugLog} from './src/lib/utils.js'
 
-import { Application } from "@hotwired/stimulus"
-window.Stimulus = Application.start()
 
-// initialize dropdowns
-import dc from './src/dropdown-controller'
-Stimulus.register('csedl-dropdown', dc)
 
-// initialize tooltips
-import ttc from './src/tooltip-controller'
-Stimulus.register('csedl-tooltip', ttc)
-
-// initialize place-panel controller
-import ppc from './src/move-panels-controller'
-Stimulus.register('csedl-move-panels', ppc)
-
-export { StimulusDropdown }
+export {
+    HotwireSvelteHelpers,
+    cleanMount, unmountAllDetached,
+    initializeDropdown, onPanelOpen, getOrSetPanelId, debugLog
+}

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@csedl/hotwire-svelte-helpers",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Hotwire + Svelte helpers for Rails: Stimulus floating dropdowns/toolips + Svelte global panels/modals + Rails form error mapping + Turbo-friendly utilities. Build together with the rubygem svelte-on-rails and its npm-package.",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "exports": {
+    ".": [
+      "./index.js",
+      "./src/utils.js"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "git+https://gitlab.com/sedl/csedl-hotwire-svelte-helpers"
@@ -20,7 +26,7 @@
   "bugs": {
     "url": "https://gitlab.com/sedl/csedl-stimulus-dropdown-js/-/issues"
   },
-  "homepage": "https://gitlab.com/sedl/csedl-stimulus-dropdown-js",
+  "homepage": "https://gitlab.com/sedl/csedl-hotwire-svelte-helpers",
   "dependencies": {
     "@floating-ui/dom": ">=1.5.1",
     "@hotwired/stimulus": ">=3.2.1"

package/src/lib/config.js

@@ -0,0 +1,74 @@
+import {debugLog} from "./utils.js";
+import { Application } from "@hotwired/stimulus"
+import dc from '../stimulus/dropdown-controller'
+import ttc from '../stimulus/tooltip-controller'
+import ppc from '../stimulus/move-panels-controller'
+
+// DEFAULTS
+let _debug = false;
+
+let _close_on_click_outside_listener_added = false;
+
+const HotwireSvelteHelpers = {
+
+    // debug
+
+    get debug() {
+        return _debug;
+    },
+    set debug(value) {
+        if (typeof value !== "boolean") {
+            throw new Error("Debug value must be true or false");
+        }
+        _debug = value;
+        debugLog('debugging active')
+    },
+
+    overlays: {
+        closeButtonSelector: '.close-button',
+        dropdownContentSelector: '.content',
+        tooltipContentSelector: '.content',
+        addArrow: true,
+        persistTooltipOnClick: false,
+        closeOnClickOutsideListenerAdded: false,
+    },
+
+    initializeOverlays(options = {}) {
+        const overlays = this.overlays;
+
+        if (options.closeButtonSelector !== undefined) {
+            overlays.closeButtonSelector = options.closeButtonSelector;
+        }
+
+        if (options.dropdownContentSelector !== undefined) {
+            overlays.dropdownContentSelector = options.dropdownContentSelector;
+        }
+
+        if (options.tooltipContentSelector !== undefined) {
+            overlays.tooltipContentSelector = options.tooltipContentSelector;
+        }
+
+        if (options.addArrow !== undefined) {
+            overlays.addArrow = options.addArrow;
+        }
+
+        if (options.persistTooltipOnClick !== undefined) {
+            overlays.persistTooltipOnClick = options.persistTooltipOnClick;
+        }
+
+        window.Stimulus = Application.start()
+
+        Stimulus.register('csedl-dropdown', dc)
+        Stimulus.register('csedl-tooltip', ttc)
+        Stimulus.register('csedl-move-panels', ppc)
+
+        debugLog('Overlays active, driven by Stimulus')
+
+        return overlays;
+    }
+
+};
+
+window.HotwireSvelteHelpers = HotwireSvelteHelpers;
+
+export default HotwireSvelteHelpers;

package/src/{floating-ui-functions.js → lib/floating-ui-functions.js}

@@ -28,7 +28,7 @@ export function getAllOpenPanels(scopeElement) {
         }
     }
 
-    debugLog(`FOUND ${elements.length} OPEN DROPDOWNS`)
+    debugLog(`FOUND ${elements.length} OPEN DROPDOWNS for ${buttons.length} buttons`)
 
     return (elements)
 }

package/src/{utils.js → lib/utils.js}

@@ -10,7 +10,7 @@ export function onPanelOpen(event, button) {
     closeOnOutsideClick(event)
 
     // add arrow
-    if (window.StimulusDropdown.addArrow) {
+    if (window.HotwireSvelteHelpers.overlays.addArrow) {
         if (!panel.querySelector(':scope > #arrow')) {
             const arrowTag = document.createElement('div');
             arrowTag.id = 'arrow';
@@ -28,7 +28,7 @@ export function onPanelOpen(event, button) {
     }
 
     // Set status attribute
-    panel.setAttribute('data-stimulus-dropdown-panel-status', 'open');
+    panel.setAttribute('data-stimulus-overlay-panel-status', 'open');
     button.classList.add('has-open-panel');
 
     // Dispatch events
@@ -39,8 +39,8 @@ export function onPanelOpen(event, button) {
     button.dispatchEvent(buttonOpenEvent);
 
     // Add listener for closing on outside click
-    if (!window.StimulusDropdown.closeOnClickOutsideListenerAdded) {
-        window.StimulusDropdown.closeOnClickOutsideListenerAdded = true;
+    if (!window.HotwireSvelteHelpers.overlays.closeOnClickOutsideListenerAdded) {
+        window.HotwireSvelteHelpers.overlays.closeOnClickOutsideListenerAdded = true;
         window.addEventListener('click', closeOnOutsideClick);
         debugLog('Listener for close panels on click outside added');
     }
@@ -58,7 +58,7 @@ export function onPanelOpen(event, button) {
             } else {
                 const button = document.querySelector(`[data-panel-id="${panel.id}"]`);
                 const ctrl = button.getAttribute('data-controller');
-                const config = window.StimulusDropdown;
+                const config = window.HotwireSvelteHelpers.overlays;
                 const contentSelector = config.dropdownContentSelector;
 
                 if (ctrl === 'csedl-dropdown' && contentSelector) {
@@ -92,13 +92,13 @@ export function onPanelClose(button) {
 
     // Update status attributes
     button.classList.remove('has-open-panel');
-    panel.setAttribute('data-stimulus-dropdown-panel-status', 'closed');
+    panel.setAttribute('data-stimulus-overlay-panel-status', 'closed');
 
     // Remove outside click listener if no panels are open
-    const openPanels = document.querySelectorAll("[data-stimulus-dropdown-panel-status='open']");
+    const openPanels = document.querySelectorAll("[data-stimulus-overlay-panel-status='open']");
     debugLog(`panel closed, still open: ${openPanels.length}`);
-    if (window.StimulusDropdown.closeOnClickOutsideListenerAdded && openPanels.length === 0) {
-        window.StimulusDropdown.closeOnClickOutsideListenerAdded = false;
+    if (window.HotwireSvelteHelpers.closeOnClickOutsideListenerAdded && openPanels.length === 0) {
+        window.HotwireSvelteHelpers.closeOnClickOutsideListenerAdded = false;
         window.removeEventListener('click', closeOnOutsideClick);
         debugLog('Listener for close panels on click outside removed');
     }
@@ -114,10 +114,10 @@ export function closeOnOutsideClick(ev) {
     let btn = ev.target;
     let parentPanelIds = [];
 
-    const persistElement = ev.target.closest('[data-dropdown-persist]');
+    const persistElement = ev.target.closest('[data-overlay-persist]');
     if (persistElement) {
-        if (persistElement.getAttribute('data-dropdown-persist') !== 'false') {
-            debugLog('closing panel prevented because the target element has attribute "data-dropdown-persist"');
+        if (persistElement.getAttribute('data-overlay-persist') !== 'false') {
+            debugLog('closing panel prevented because the target element has attribute "data-overlay-persist"');
             return false;
         }
     }
@@ -125,7 +125,7 @@ export function closeOnOutsideClick(ev) {
     debugLog('closeOnOutsideClick called, event.target:', ev.target);
 
     while (true) {
-        const parentPanel = btn.closest("[data-stimulus-dropdown-panel-status='open']");
+        const parentPanel = btn.closest("[data-stimulus-overlay-panel-status='open']");
         if (parentPanel) {
             parentPanelIds.push(parentPanel.id);
             btn = document.querySelector(`[data-panel-id="${parentPanel.id}"]`);
@@ -134,7 +134,7 @@ export function closeOnOutsideClick(ev) {
         }
     }
 
-    const openPanels = document.querySelectorAll("[data-stimulus-dropdown-panel-status='open']");
+    const openPanels = document.querySelectorAll("[data-stimulus-overlay-panel-status='open']");
     for (const panel of openPanels) {
         if (!parentPanelIds.includes(panel.id)) {
             const ev = new Event('close');
@@ -157,7 +157,7 @@ export function initializeDropdown(button) {
     }
 
     // Add close button functionality
-    const selector = window.StimulusDropdown.closeButtonSelector;
+    const selector = window.HotwireSvelteHelpers.overlays.closeButtonSelector;
     const closeButtons = panel.querySelectorAll(selector);
     for (const btn of closeButtons) {
         btn.addEventListener('click', () => {
@@ -179,13 +179,13 @@ export function initializeDropdown(button) {
 // xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
 export function debugLog(message, object) {
-    if (window.StimulusDropdown.debug) {
+    if (window.HotwireSvelteHelpers.debug) {
 
         if (object) {
-            console.log(`[stimulus-dropdown] ${message}`, object);
+            console.log(`[HSH] ${message}`, object);
 
         } else {
-            console.log(`[stimulus-dropdown] ${message}`);
+            console.log(`[HSH] ${message}`);
         }
 
     }

package/src/{dropdown-controller.js → stimulus/dropdown-controller.js}

@@ -1,6 +1,6 @@
 import {Controller} from "@hotwired/stimulus"
-import {initializeDropdown, onPanelOpen} from "./utils.js";
-import {debugLog} from "./utils.js";
+import {initializeDropdown, onPanelOpen} from "../lib/utils.js";
+import {debugLog} from "../lib/utils.js";
 
 export default class extends Controller {
 
@@ -10,6 +10,8 @@ export default class extends Controller {
 
         this.element.addEventListener('click', (e) => this.toggle(e))
 
+        debugLog('dropdown connected')
+
     }
 
 

package/src/{move-panels-controller.js → stimulus/move-panels-controller.js}

@@ -1,6 +1,6 @@
 import {Controller} from "@hotwired/stimulus"
-import {positionAllPanels, getAllOpenPanels} from "./floating-ui-functions";
-import {debugLog} from "./utils.js";
+import {positionAllPanels, getAllOpenPanels} from "../lib/floating-ui-functions";
+import {debugLog} from "../lib/utils.js";
 
 export default class extends Controller {
 

package/src/{tooltip-controller.js → stimulus/tooltip-controller.js}

@@ -1,6 +1,6 @@
 import {Controller} from "@hotwired/stimulus"
-import {positionPanelByButton} from "./floating-ui-functions.js";
-import {debugLog, onPanelOpen} from "./utils.js";
+import {positionPanelByButton} from "../lib/floating-ui-functions.js";
+import {debugLog, onPanelOpen} from "../lib/utils.js";
 
 export default class extends Controller {
 
@@ -17,7 +17,7 @@ export default class extends Controller {
         }
         this.element.addEventListener('mouseenter', (e) => this.start_opening(e, panel_id, delay_sec * 1000))
         this.element.addEventListener('mouseleave', (e) => this.close(e, panel_id))
-        if (window.StimulusDropdown.persistTooltipOnClick) {
+        if (window.HotwireSvelteHelpers.persistTooltipOnClick) {
             this.element.addEventListener('click', (e) => this.toggleByClick(e, panel_id))
         }
     }

package/src/svelte/cleanMount.js

@@ -0,0 +1,80 @@
+import { mount, unmount } from 'svelte';
+import { debugLog } from '../lib/utils.js';
+
+const mountedByTarget = new WeakMap();
+const trackedTargets = new Set();
+
+function getTargetRecordList(target) {
+    let records = mountedByTarget.get(target);
+
+    if (!records) {
+        records = [];
+        mountedByTarget.set(target, records);
+        trackedTargets.add(target);
+    }
+
+    return records;
+}
+
+export function cleanMount(component, options = {}) {
+
+    if (!options.target) {
+        throw new Error('[HSH] cleanMount: target is required');
+    }
+
+    if (!component) {
+        throw new Error('[HSH] cleanMount: component is required');
+    }
+
+    const instance = mount(component, options);
+
+    const records = getTargetRecordList(options.target);
+    records.push({
+        target: options.target,
+        component: component,
+        instance: instance
+    });
+
+    debugLog(`cleanMount: mounted, stored: ${records.length} components`, instance)
+
+    return instance;
+}
+
+export function unmountAllDetached() {
+    let unmountedCount = 0;
+
+    for (const target of Array.from(trackedTargets)) {
+        const records = mountedByTarget.get(target);
+
+        if (!records || records.length === 0) {
+            trackedTargets.delete(target);
+            mountedByTarget.delete(target);
+            continue;
+        }
+
+        if (target.isConnected) {
+            continue;
+        }
+
+        for (const record of records) {
+            try {
+                unmount(record.instance);
+                unmountedCount++;
+            } catch (error) {
+                console.error('[HSH] unmountAllDetached: failed to unmount component', error);
+            }
+        }
+
+        records.length = 0;
+        trackedTargets.delete(target);
+        mountedByTarget.delete(target);
+    }
+
+    if (unmountedCount === 0) {
+        debugLog('unmountAllDetached: nothing to unmount')
+    } else {
+        debugLog(`unmountAllDetached: unmounted ${unmountedCount} components`)
+    }
+
+    return unmountedCount;
+}

package/src/config.js

@@ -1,114 +0,0 @@
-import {debugLog} from "./utils.js";
-
-// DEFAULTS
-let _debug = false;
-let _close_button_selector = '.close-button';
-let _dropdown_content_selector = '.content';
-let _tooltip_content_selector = '.content';
-let _add_arrow = true;
-let _persist_tooltip_on_click = false;
-
-let _close_on_click_outside_listener_added = false;
-
-const StimulusDropdown = {
-
-    // debug
-
-    get debug() {
-        return _debug;
-    },
-    set debug(value) {
-        if (typeof value !== "boolean") {
-            throw new Error("Debug value must be true or false");
-        }
-        _debug = value;
-        debugLog('debugging active')
-    },
-
-    // close button selector
-
-    get closeButtonSelector() {
-        return _close_button_selector;
-    },
-    set closeButtonSelector(string) {
-        if (typeof string !== "string") {
-            throw new Error("Close Button Selector must be a string");
-        }
-        _close_button_selector = string;
-        debugLog(`close button selector is: «${string}»`);
-    },
-
-    // content selector
-
-    get dropdownContentSelector() {
-        return _dropdown_content_selector;
-    },
-    set dropdownContentSelector(string) {
-        if (typeof string !== "string") {
-            throw new Error("Content Selector must be a string");
-        }
-        _dropdown_content_selector = string;
-        debugLog(`dropdown content selector is: «${string}»`);
-    },
-
-    // tooltip content selector
-
-    get tooltipContentSelector() {
-        return _tooltip_content_selector;
-    },
-    set tooltipContentSelector(string) {
-        if (typeof string !== "string") {
-            throw new Error("Tooltip Content Selector must be a string");
-        }
-        _tooltip_content_selector = string;
-        debugLog(`tooltip content selector is: «${string}»`);
-    },
-
-    // add arrow
-
-    get addArrow() {
-        return _add_arrow;
-    },
-    set addArrow(boolean) {
-        if (typeof boolean !== "boolean") {
-            throw new Error("Tooltip Content Selector must be a string");
-        }
-        _add_arrow = boolean;
-        debugLog(`add-arrow is set to: «${boolean}»`);
-    },
-
-    // add arrow
-
-    get persistTooltipOnClick() {
-        return _persist_tooltip_on_click;
-    },
-    set persistTooltipOnClick(boolean) {
-        if (typeof boolean !== "boolean") {
-            throw new Error("Tooltip Content Selector must be a string");
-        }
-        _persist_tooltip_on_click = boolean;
-        debugLog(`Persist tooltip on click is set to: «${boolean}»`);
-    },
-
-    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-    // INTERNAL USE
-    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-
-    // closeOnClickOutsideListenerAdded
-
-    get closeOnClickOutsideListenerAdded() {
-        return _close_on_click_outside_listener_added;
-    },
-    set closeOnClickOutsideListenerAdded(bool) {
-        if (typeof bool !== "boolean") {
-            throw new Error("closeOnClickOutsideListenerAdded must be a boolean");
-        }
-        _close_on_click_outside_listener_added = bool;
-        debugLog(`closeOnClickOutsideListenerAdded is: «${bool}»`);
-    },
-
-};
-
-window.StimulusDropdown = StimulusDropdown;
-
-export default StimulusDropdown;