stimulus-library 0.9.2 → 0.9.3

package/README.md

@@ -1,43 +1,43 @@
-# Stimulus-Library
-
-[Documentation](https://sub-xaero.github.io/stimulus-library/)  |  [Full List of Controllers](https://sub-xaero.github.io/stimulus-library/)
-
----
-![npm](https://img.shields.io/npm/dt/stimulus-library)
-![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/stimulus-library/latest?label=minified%20size)
----
-
-## Installation
-
-To get started, you'll need to add the `stimulus-library` package to your project.
-
-To do so, either add `stimulus-library` to your package.json manually
-
-```json
-{
-  "dependencies": {
-    "stimulus-library": "latest"
-  }
-}
-```
-
-or run
-`npm install --save stimulus-library` or `yarn add stimulus-library`
-
-
-Then, to get started, import and register the controllers you want to use.
-
-*Please Note* as below, that when registering the name for the controller, you should use `kebab-case` and omit the `-controller` suffix.
-
-```js
-import { Application } from "@hotwired/stimulus";
-import { AutoSubmitFormController } from "stimulus-library";
-
-const application = Application.start();
-application.register("auto-submit-form", AutoSubmitFormController);
-```
-
-## Tree-shaking
-If you use the ESM builds of the library, this library fully supports tree-shaking, 
-only the controllers you directly import will be bundled with your application.  
-
+# Stimulus-Library
+
+[Documentation](https://sub-xaero.github.io/stimulus-library/)  |  [Full List of Controllers](https://sub-xaero.github.io/stimulus-library/)
+
+---
+![npm](https://img.shields.io/npm/dt/stimulus-library)
+![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/stimulus-library/latest?label=minified%20size)
+---
+
+## Installation
+
+To get started, you'll need to add the `stimulus-library` package to your project.
+
+To do so, either add `stimulus-library` to your package.json manually
+
+```json
+{
+  "dependencies": {
+    "stimulus-library": "latest"
+  }
+}
+```
+
+or run
+`npm install --save stimulus-library` or `yarn add stimulus-library`
+
+
+Then, to get started, import and register the controllers you want to use.
+
+*Please Note* as below, that when registering the name for the controller, you should use `kebab-case` and omit the `-controller` suffix.
+
+```js
+import { Application } from "@hotwired/stimulus";
+import { AutoSubmitFormController } from "stimulus-library";
+
+const application = Application.start();
+application.register("auto-submit-form", AutoSubmitFormController);
+```
+
+## Tree-shaking
+If you use the ESM builds of the library, this library fully supports tree-shaking, 
+only the controllers you directly import will be bundled with your application.  
+

package/dist/controllers/ajax/async_block_controller.js

@@ -1,30 +1,19 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { LoadBlockController } from "./load_block_controller";
 export class AsyncBlockController extends LoadBlockController {
+    static targets = ["replace"];
+    static values = {
+        endpoint: String,
+        errorMessage: String,
+        selector: String,
+        maxRetries: Number,
+    };
     get _errorMessage() {
         return this.hasErrorMessageValue ? this.errorMessageValue : "This content failed to load";
     }
     // This is a simple controller to load a block of content when the page loads.
     // It should be used to give a quick initial response before calling out to an
     // an AJAX endpoint to do some expensive work.
-    connect() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.loadContent();
-        });
+    async connect() {
+        await this.loadContent();
     }
 }
-AsyncBlockController.targets = ["replace"];
-AsyncBlockController.values = {
-    endpoint: String,
-    errorMessage: String,
-    selector: String,
-    maxRetries: Number,
-};

package/dist/controllers/ajax/lazy_block_controller.js

@@ -1,37 +1,24 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { LoadBlockController } from "./load_block_controller";
 import { useIntersection } from "../../mixins/use_intersection";
 export class LazyBlockController extends LoadBlockController {
-    connect() {
-        return __awaiter(this, void 0, void 0, function* () {
-            let element = this.el;
-            if ("IntersectionObserver" in window) {
-                let { observe, unobserve } = useIntersection(this, element, this.appear, null, { threshold: 0.3 });
-                this.observe = observe;
-                this.unobserve = unobserve;
-            }
-            else {
-                // Client doesn't support intersection observer, fallback to pre-loading
-                yield this.loadContent();
-            }
-        });
+    async connect() {
+        let element = this.el;
+        if ("IntersectionObserver" in window) {
+            let { observe, unobserve } = useIntersection(this, element, this.appear, null, { threshold: 0.3 });
+            this.observe = observe;
+            this.unobserve = unobserve;
+        }
+        else {
+            // Client doesn't support intersection observer, fallback to pre-loading
+            await this.loadContent();
+        }
     }
-    appear(entry) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (entry.target === this.el && entry.isIntersecting) {
-                yield this.loadContent();
-                if (this.unobserve) {
-                    this.unobserve();
-                }
+    async appear(entry) {
+        if (entry.target === this.el && entry.isIntersecting) {
+            await this.loadContent();
+            if (this.unobserve) {
+                this.unobserve();
             }
-        });
+        }
     }
 }

package/dist/controllers/ajax/load_block_controller.js

@@ -1,15 +1,13 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { BaseController } from "../../utilities/base_controller";
 import { fetchRetry } from "../../utilities/fetchRetry";
 export class LoadBlockController extends BaseController {
+    static targets = ["replace"];
+    static values = {
+        endpoint: String,
+        errorMessage: String,
+        selector: String,
+        maxRetries: Number,
+    };
     get _errorMessage() {
         return this.hasErrorMessageValue ? this.errorMessageValue : "This content failed to load";
     }
@@ -18,46 +16,37 @@ export class LoadBlockController extends BaseController {
     }
     connect() {
     }
-    loadContent(event = null) {
-        return __awaiter(this, void 0, void 0, function* () {
-            event === null || event === void 0 ? void 0 : event.preventDefault();
-            let self = this;
-            let el = this.hasReplaceTarget ? this.replaceTarget : this.el;
-            let failure = () => {
-                el.replaceWith(this._errorMessage);
-                self.dispatchEvent(el, "ajax:error");
-            };
-            try {
-                let response = yield fetchRetry(this._maxRetries, this.endpointValue);
-                if (!response.ok) {
-                    failure();
-                }
-                let text = yield response.text();
-                let newEl = document.createElement("div");
-                newEl.innerHTML = text;
-                if (this.hasSelectorValue) {
-                    let selectedContent = newEl.querySelectorAll(this.selectorValue);
-                    el.replaceWith(...selectedContent);
-                }
-                else {
-                    el.replaceWith(...newEl.children);
-                }
-                // Trigger event to show block has loaded
-                self.dispatchEvent(el, "ajax:success");
-            }
-            catch (e) {
+    async loadContent(event = null) {
+        event?.preventDefault();
+        let self = this;
+        let el = this.hasReplaceTarget ? this.replaceTarget : this.el;
+        let failure = () => {
+            el.replaceWith(this._errorMessage);
+            self.dispatchEvent(el, "ajax:error");
+        };
+        try {
+            let response = await fetchRetry(this._maxRetries, this.endpointValue);
+            if (!response.ok) {
                 failure();
             }
-            finally {
-                self.dispatchEvent(el, "ajax:complete");
+            let text = await response.text();
+            let newEl = document.createElement("div");
+            newEl.innerHTML = text;
+            if (this.hasSelectorValue) {
+                let selectedContent = newEl.querySelectorAll(this.selectorValue);
+                el.replaceWith(...selectedContent);
+            }
+            else {
+                el.replaceWith(...newEl.children);
             }
-        });
+            // Trigger event to show block has loaded
+            self.dispatchEvent(el, "ajax:success");
+        }
+        catch (e) {
+            failure();
+        }
+        finally {
+            self.dispatchEvent(el, "ajax:complete");
+        }
     }
 }
-LoadBlockController.targets = ["replace"];
-LoadBlockController.values = {
-    endpoint: String,
-    errorMessage: String,
-    selector: String,
-    maxRetries: Number,
-};

package/dist/controllers/ajax/poll_block_controller.js

@@ -1,15 +1,14 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { LoadBlockController } from "./load_block_controller";
 import { useInterval } from "../../mixins/use_interval";
 export class PollBlockController extends LoadBlockController {
+    static targets = ["replace"];
+    static values = {
+        endpoint: String,
+        errorMessage: String,
+        selector: String,
+        maxRetries: Number,
+        seconds: Number,
+    };
     connect() {
         if (!this.hasSecondsValue) {
             throw new Error("Required value `seconds` is missing");
@@ -19,17 +18,7 @@ export class PollBlockController extends LoadBlockController {
             useInterval(this, this._timeout, this.secondsValue * 1000);
         });
     }
-    _timeout() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.loadContent();
-        });
+    async _timeout() {
+        await this.loadContent();
     }
 }
-PollBlockController.targets = ["replace"];
-PollBlockController.values = {
-    endpoint: String,
-    errorMessage: String,
-    selector: String,
-    maxRetries: Number,
-    seconds: Number,
-};

package/dist/controllers/anchor_spy_controller.js

@@ -3,6 +3,8 @@ import { useEventListener } from "../mixins/use_event_listener";
 import { installClassMethods } from "../mixins/install_class_methods";
 import "../polyfills/string.replaceAll";
 export class AnchorSpyController extends BaseController {
+    static values = { key: String };
+    static classes = ["active", "inactive"];
     get defaultActiveClasses() {
         return ["active"];
     }
@@ -27,7 +29,7 @@ export class AnchorSpyController extends BaseController {
         });
     }
     write(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event?.preventDefault();
         this._anchor = this._key;
     }
     _checkAnchor() {
@@ -43,5 +45,3 @@ export class AnchorSpyController extends BaseController {
         }
     }
 }
-AnchorSpyController.values = { key: String };
-AnchorSpyController.classes = ["active", "inactive"];

package/dist/controllers/back_link_controller.js

@@ -2,6 +2,7 @@ import { BaseController } from "../utilities/base_controller";
 import { useTimeout } from "../mixins/use_timeout";
 import { useEventListener } from "../mixins/use_event_listener";
 export class BackLinkController extends BaseController {
+    static values = { timeout: Number, pages: Number };
     get _pages() {
         return this.hasPagesValue ? Math.abs(this.pagesValue) : 1;
     }
@@ -12,7 +13,7 @@ export class BackLinkController extends BaseController {
         useEventListener(this, this.el, "click", this.goBack);
     }
     goBack(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event?.preventDefault();
         history.go(-this._pages);
         if (this.el.href) {
             useTimeout(this, this.fallback, this._timeout);
@@ -22,4 +23,3 @@ export class BackLinkController extends BaseController {
         window.location.href = this.el.href;
     }
 }
-BackLinkController.values = { timeout: Number, pages: Number };

package/dist/controllers/clipboard_controller.js

@@ -1,9 +1,8 @@
 import { BaseController } from "../utilities/base_controller";
 export class ClipboardController extends BaseController {
-    constructor() {
-        super(...arguments);
-        this._supported = false;
-    }
+    static targets = ["source", "button", "copy", "fallback"];
+    static values = { removeUnused: Boolean };
+    _supported = false;
     connect() {
         this._supported = document.queryCommandSupported("copy");
         if (this.hasRemoveUnusedValue && this.removeUnusedValue) {
@@ -31,5 +30,3 @@ export class ClipboardController extends BaseController {
         }
     }
 }
-ClipboardController.targets = ["source", "button", "copy", "fallback"];
-ClipboardController.values = { removeUnused: Boolean };

package/dist/controllers/confirm_controller.js

@@ -2,6 +2,9 @@ import { BaseController } from '../utilities/base_controller';
 import { isHTMLAnchorElement, isHTMLFormElement } from "../utilities/elements";
 import { useEventListener } from "../mixins/use_event_listener";
 export class ConfirmController extends BaseController {
+    static values = {
+        message: String,
+    };
     get _message() {
         return this.hasMessageValue ? this.messageValue : 'Are you sure?';
     }
@@ -28,6 +31,3 @@ export class ConfirmController extends BaseController {
         }
     }
 }
-ConfirmController.values = {
-    message: String,
-};

package/dist/controllers/confirm_navigation_controller.js

@@ -1,6 +1,7 @@
 import { BaseController } from "../utilities/base_controller";
 import { useEventListener } from "../mixins/use_event_listener";
 export class ConfirmNavigationController extends BaseController {
+    static values = { message: String };
     get _message() {
         return this.hasMessageValue ? this.messageValue : "Do you want to leave this page? Changes you made may not be saved";
     }
@@ -26,4 +27,3 @@ export class ConfirmNavigationController extends BaseController {
         }
     }
 }
-ConfirmNavigationController.values = { message: String };

package/dist/controllers/debug_controller.js

@@ -1,7 +1,7 @@
 import { BaseController } from "../utilities/base_controller";
 export class DebugController extends BaseController {
+    static targets = ["test"];
     connect() {
         console.log("Debug Controller", this, this.testTargets);
     }
 }
-DebugController.targets = ["test"];

package/dist/controllers/disable_with_controller.js

@@ -3,6 +3,10 @@ import { isTypeOfButtonableElement } from "../utilities/elements";
 import { useEventListener } from "../mixins/use_event_listener";
 import { useTemporaryContent } from "../mixins/use_temporary_content";
 export class DisableWithController extends BaseController {
+    static values = {
+        message: String,
+        timeout: Number,
+    };
     get _message() {
         return this.hasMessageValue ? this.messageValue : 'Submitting...';
     }
@@ -18,8 +22,8 @@ export class DisableWithController extends BaseController {
     disable(event) {
         let element = this.el;
         if (this._isDisabled(element)) {
-            event === null || event === void 0 ? void 0 : event.preventDefault();
-            event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
+            event?.preventDefault();
+            event?.stopImmediatePropagation();
         }
         else {
             this._disable();
@@ -27,7 +31,7 @@ export class DisableWithController extends BaseController {
         }
     }
     enable(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event?.preventDefault();
         let element = this.el;
         if (this._isDisabled(element)) {
             this._enable();
@@ -60,7 +64,3 @@ export class DisableWithController extends BaseController {
         }
     }
 }
-DisableWithController.values = {
-    message: String,
-    timeout: Number,
-};

package/dist/controllers/element_save_controller.js

@@ -4,6 +4,14 @@ import _set from "lodash-es/set";
 import { BaseController } from '../utilities/base_controller';
 import { useLocalStorage } from "../mixins";
 export class ElementSaveController extends BaseController {
+    static targets = [
+        "element",
+    ];
+    static values = {
+        id: String,
+        attributes: String,
+        restoreOnLoad: Boolean,
+    };
     get _id() {
         if (this.hasIdValue) {
             return this.idValue;
@@ -70,11 +78,3 @@ export class ElementSaveController extends BaseController {
         }
     }
 }
-ElementSaveController.targets = [
-    "element",
-];
-ElementSaveController.values = {
-    id: String,
-    attributes: String,
-    restoreOnLoad: Boolean,
-};

package/dist/controllers/empty_dom_controller.js

@@ -2,6 +2,9 @@ import { useMutationObserver } from "../mixins/use_mutation_observer";
 import { BaseController } from "../utilities/base_controller";
 import { installClassMethods } from "../mixins/install_class_methods";
 export class EmptyDomController extends BaseController {
+    static targets = ["container"];
+    static classes = ["empty", "notEmpty"];
+    static values = { scopeSelector: String };
     get _container() {
         return this.hasContainerTarget ? this.containerTarget : this.el;
     }
@@ -37,6 +40,3 @@ export class EmptyDomController extends BaseController {
         }
     }
 }
-EmptyDomController.targets = ["container"];
-EmptyDomController.classes = ["empty", "notEmpty"];
-EmptyDomController.values = { scopeSelector: String };

package/dist/controllers/equalize_controller.js

@@ -2,6 +2,7 @@ import { BaseController } from "../utilities/base_controller";
 import debounce from "lodash-es/debounce";
 import { useIntersection } from "../mixins/use_intersection";
 export class EqualizeController extends BaseController {
+    static targets = ["watch"];
     initialize() {
         this._equalize = debounce(this._equalize.bind(this), 100);
         this.observer = new ResizeObserver((_entries) => this._equalize());
@@ -36,4 +37,3 @@ export class EqualizeController extends BaseController {
         Array.from(this.watchTargets).forEach(target => target.style.minHeight = "");
     }
 }
-EqualizeController.targets = ["watch"];

package/dist/controllers/forms/auto_submit_form_controller.js

@@ -2,6 +2,7 @@ import { BaseController } from "../../utilities/base_controller";
 import { requestSubmit } from "../../utilities/request_submit";
 import { useEventListener } from "../../mixins/use_event_listener";
 export class AutoSubmitFormController extends BaseController {
+    static values = { submitMode: String, eventMode: String, debounceInterval: Number };
     get _eventModes() {
         if (this.hasEventModeValue) {
             let modes = this.eventModeValue.split(' ').map(mode => mode.trim());
@@ -59,4 +60,3 @@ export class AutoSubmitFormController extends BaseController {
         }
     }
 }
-AutoSubmitFormController.values = { submitMode: String, eventMode: String, debounceInterval: Number };

package/dist/controllers/forms/char_count_controller.js

@@ -2,6 +2,10 @@ import { BaseController } from "../../utilities/base_controller";
 import { useEventListener } from "../../mixins/use_event_listener";
 import { installClassMethods } from "../../mixins/install_class_methods";
 export class CharCountController extends BaseController {
+    // Config
+    static targets = ["input", "output"];
+    static values = { min: Number, max: Number };
+    static classes = ["error"];
     connect() {
         installClassMethods(this);
         requestAnimationFrame(() => {
@@ -31,7 +35,3 @@ export class CharCountController extends BaseController {
         return count >= min && count <= max;
     }
 }
-// Config
-CharCountController.targets = ["input", "output"];
-CharCountController.values = { min: Number, max: Number };
-CharCountController.classes = ["error"];

package/dist/controllers/forms/checkbox_disable_inputs_controller.js

@@ -1,5 +1,9 @@
 import { BaseController } from "../../utilities/base_controller";
 export class CheckboxDisableInputsController extends BaseController {
+    static targets = ["disabler", "disable"];
+    static values = {
+        clear: Boolean,
+    };
     connect() {
         this.toggle();
     }
@@ -26,7 +30,3 @@ export class CheckboxDisableInputsController extends BaseController {
         });
     }
 }
-CheckboxDisableInputsController.targets = ["disabler", "disable"];
-CheckboxDisableInputsController.values = {
-    clear: Boolean,
-};

package/dist/controllers/forms/checkbox_enable_inputs_controller.js

@@ -1,5 +1,9 @@
 import { BaseController } from "../../utilities/base_controller";
 export class CheckboxEnableInputsController extends BaseController {
+    static targets = ["enabler", "enable"];
+    static values = {
+        clear: Boolean,
+    };
     connect() {
         this.toggle();
     }
@@ -26,7 +30,3 @@ export class CheckboxEnableInputsController extends BaseController {
         });
     }
 }
-CheckboxEnableInputsController.targets = ["enabler", "enable"];
-CheckboxEnableInputsController.values = {
-    clear: Boolean,
-};

package/dist/controllers/forms/checkbox_select_all_controller.js

@@ -1,6 +1,7 @@
 import { BaseController } from '../../utilities/base_controller';
 import { useCollectionEventListener, useEventListener } from "../../mixins/use_event_listener";
 export class CheckboxSelectAllController extends BaseController {
+    static targets = ['selectAll', 'checkbox'];
     get _checked() {
         return this._enabled.filter(checkbox => checkbox.checked);
     }
@@ -32,4 +33,3 @@ export class CheckboxSelectAllController extends BaseController {
         this.selectAllTarget.indeterminate = checkboxesCheckedCount > 0 && checkboxesCheckedCount < checkboxesCount;
     }
 }
-CheckboxSelectAllController.targets = ['selectAll', 'checkbox'];

package/dist/controllers/forms/checkbox_xor_controller.js

@@ -1,6 +1,7 @@
 import { BaseController } from "../../utilities/base_controller";
 import { useCollectionEventListener } from "../../mixins";
 export class CheckboxXORController extends BaseController {
+    static targets = ["checkbox"];
     connect() {
         useCollectionEventListener(this, this.checkboxTargets, "change", this._update);
     }
@@ -21,4 +22,3 @@ export class CheckboxXORController extends BaseController {
         }
     }
 }
-CheckboxXORController.targets = ["checkbox"];

package/dist/controllers/forms/detect_dirty_controller.js

@@ -12,7 +12,7 @@ export class DetectDirtyController extends BaseController {
         useEventListener(this, element, ["input", "change"], this._checkDirty, { debounce: 10 });
     }
     restore(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event?.preventDefault();
         this._restoreElementFromLoadValue();
     }
     _getElementValue() {

package/dist/controllers/forms/detect_dirty_form_controller.js

@@ -15,7 +15,7 @@ export class DetectDirtyFormController extends BaseController {
         useEventListener(this, element, ["input", "change"], this._checkDirty, { debounce: 10 });
     }
     restore(event) {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event?.preventDefault();
         this._formElements.forEach(element => this._restoreElementFromLoadValue(element));
     }
     _getElementValue(element) {