stimulus-library 0.7.4 → 0.8.0

package/dist/controllers/equalize_controller.js

@@ -0,0 +1,39 @@
+import { BaseController } from "../utilities/base_controller";
+import debounce from "lodash-es/debounce";
+import { useIntersection } from "../mixins/use_intersection";
+export class EqualizeController extends BaseController {
+    initialize() {
+        this._equalize = debounce(this._equalize.bind(this), 100);
+        this.observer = new ResizeObserver((_entries) => this._equalize());
+    }
+    connect() {
+        let { teardown } = useIntersection(this, this.el, this.appear);
+        this._unobserveIntersection = teardown;
+        requestAnimationFrame(this._equalize);
+    }
+    disconnect() {
+        this._unequalize();
+    }
+    watchTargetConnected(element) {
+        this.observer.observe(element);
+        this._equalize();
+    }
+    watchTargetDisconnected(element) {
+        this.observer.unobserve(element);
+        this._equalize();
+    }
+    appear(_entry) {
+        this._unobserveIntersection();
+        this._equalize();
+    }
+    _equalize() {
+        this._unequalize();
+        let maxHeight = 0;
+        Array.from(this.watchTargets).forEach(target => maxHeight = Math.max(maxHeight, target.getBoundingClientRect().height));
+        Array.from(this.watchTargets).forEach(target => target.style.minHeight = `${maxHeight}px`);
+    }
+    _unequalize() {
+        Array.from(this.watchTargets).forEach(target => target.style.minHeight = "");
+    }
+}
+EqualizeController.targets = ["watch"];

package/dist/controllers/forms/auto_submit_form_controller.js

@@ -0,0 +1,62 @@
+import { BaseController } from "../../utilities/base_controller";
+import { requestSubmit } from "../../utilities/request_submit";
+import { useEventListener } from "../../mixins/use_event_listener";
+export class AutoSubmitFormController extends BaseController {
+    get _eventModes() {
+        if (this.hasEventModeValue) {
+            let modes = this.eventModeValue.split(' ').map(mode => mode.trim());
+            if (modes.length === 1 && modes[0] === 'debounced') {
+                return ['change', 'input'];
+            }
+            if (!modes.every(mode => ['change', 'input'].includes(mode))) {
+                throw new Error(`The modeValue provided '${this.eventModeValue}' is not one of the recognised configuration options`);
+            }
+            return modes;
+        }
+        else {
+            return ["change"];
+        }
+    }
+    get _debounceTimeout() {
+        return this.hasDebounceIntervalValue ? this.debounceIntervalValue : -1;
+    }
+    get _mode() {
+        if (this.hasSubmitModeValue) {
+            if (!["direct", "request"].includes(this.submitModeValue)) {
+                throw new Error(`The modeValue provided '${this.submitModeValue}' is not one of the recognised configuration options`);
+            }
+            return this.submitModeValue;
+        }
+        else {
+            return "request";
+        }
+    }
+    get _cssSelector() {
+        let inputTypes = ['input', 'textarea', 'select'];
+        let ignore = ':not([data-no-autosubmit])';
+        return inputTypes.map(type => type.concat(ignore)).join(',');
+    }
+    get inputElements() {
+        let subElements = Array.from(this.element.querySelectorAll(this._cssSelector));
+        subElements = subElements.filter(el => !this._ancestorIsTrix(el));
+        return subElements;
+    }
+    connect() {
+        this.inputElements.forEach(el => {
+            return useEventListener(this, el, this._eventModes, this.submit, { debounce: this._debounceTimeout && this._debounceTimeout > 0 ? this._debounceTimeout : undefined });
+        });
+    }
+    _ancestorIsTrix(element) {
+        return element.closest('trix-toolbar') !== null && element.closest('trix-editor') !== null;
+    }
+    submit() {
+        let el = this.el;
+        if (this._mode == 'request') {
+            requestSubmit(el);
+        }
+        else {
+            el.submit();
+        }
+    }
+}
+AutoSubmitFormController.values = { submitMode: String, eventMode: String, debounceInterval: Number };

package/dist/controllers/forms/autosize_controller.js

@@ -0,0 +1,32 @@
+import { BaseController } from '../../utilities/base_controller';
+import { isHTMLTextAreaElement } from "../../utilities/elements";
+import { useEventListener } from "../../mixins/use_event_listener";
+import { useIntersection } from "../../mixins/use_intersection";
+export class AutosizeController extends BaseController {
+    connect() {
+        let { teardown } = useIntersection(this, this.el, this.appear);
+        this._unobserveIntersection = teardown;
+        if (!isHTMLTextAreaElement(this.el)) {
+            throw new Error(`Expected controller to be attached to a textarea, but was a '${this.el.tagName}'`);
+        }
+        requestAnimationFrame(() => {
+            this.el.style.resize = "none";
+            this.el.style.boxSizing = "border-box";
+            this._handler();
+            useEventListener(this, window, ['resize'], this._handler);
+            useEventListener(this, this.el, ['input', 'change', 'focus'], this._handler, { debounce: 100 });
+        });
+    }
+    appear(_entry) {
+        this.autosize(this.el);
+        this._unobserveIntersection();
+    }
+    _handler() {
+        this.autosize(this.el);
+    }
+    autosize(element) {
+        let offset = element.offsetHeight - element.clientHeight;
+        element.style.height = "auto";
+        element.style.height = element.scrollHeight + offset + "px";
+    }
+}

package/dist/controllers/forms/char_count_controller.js

@@ -0,0 +1,37 @@
+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 {
+    connect() {
+        installClassMethods(this);
+        requestAnimationFrame(() => {
+            useEventListener(this, this.inputTarget, "input", this._updateCharCount);
+            this._updateCharCount();
+        });
+    }
+    _updateCharCount() {
+        let charCount = this.inputTarget.value.length;
+        this.outputTarget.innerText = charCount.toString();
+        if (this._isValidCount(charCount)) {
+            this.removeErrorClasses(this.outputTarget);
+        }
+        else {
+            this.addErrorClasses(this.outputTarget);
+        }
+    }
+    _isValidCount(count) {
+        let min = 0;
+        let max = 99999;
+        if (this.hasMinValue) {
+            min = this.minValue;
+        }
+        if (this.hasMaxValue) {
+            max = this.maxValue;
+        }
+        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

@@ -0,0 +1,32 @@
+import { BaseController } from "../../utilities/base_controller";
+export class CheckboxDisableInputsController extends BaseController {
+    connect() {
+        this.toggle();
+    }
+    toggle() {
+        if (this.hasDisablerTarget && this.disablerTarget.checked) {
+            this.disable();
+        }
+        else {
+            this.enable();
+        }
+    }
+    disable() {
+        let shouldClear = this.hasClearValue && this.clearValue;
+        this.disableTargets.forEach((el, _) => {
+            if (shouldClear) {
+                el.value = "";
+            }
+            el.disabled = true;
+        });
+    }
+    enable() {
+        this.disableTargets.forEach((el, _) => {
+            el.disabled = false;
+        });
+    }
+}
+CheckboxDisableInputsController.targets = ["disabler", "disable"];
+CheckboxDisableInputsController.values = {
+    clear: Boolean,
+};

package/dist/controllers/forms/checkbox_enable_inputs_controller.js

@@ -0,0 +1,32 @@
+import { BaseController } from "../../utilities/base_controller";
+export class CheckboxEnableInputsController extends BaseController {
+    connect() {
+        this.toggle();
+    }
+    toggle() {
+        if (this.hasEnablerTarget && this.enablerTarget.checked) {
+            this.enable();
+        }
+        else {
+            this.disable();
+        }
+    }
+    disable() {
+        let shouldClear = this.hasClearValue && this.clearValue;
+        this.enableTargets.forEach((el, _) => {
+            if (shouldClear) {
+                el.value = "";
+            }
+            el.disabled = true;
+        });
+    }
+    enable() {
+        this.enableTargets.forEach((el, _) => {
+            el.disabled = false;
+        });
+    }
+}
+CheckboxEnableInputsController.targets = ["enabler", "enable"];
+CheckboxEnableInputsController.values = {
+    clear: Boolean,
+};

package/dist/controllers/forms/checkbox_select_all_controller.js

@@ -0,0 +1,35 @@
+import { BaseController } from '../../utilities/base_controller';
+import { useCollectionEventListener, useEventListener } from "../../mixins/use_event_listener";
+export class CheckboxSelectAllController extends BaseController {
+    get _checked() {
+        return this._enabled.filter(checkbox => checkbox.checked);
+    }
+    get _enabled() {
+        return this.checkboxTargets.filter(checkbox => !checkbox.disabled && !checkbox.readOnly);
+    }
+    get _unchecked() {
+        return this._enabled.filter(checkbox => !checkbox.checked);
+    }
+    connect() {
+        requestAnimationFrame(() => {
+            if (!this.hasSelectAllTarget) {
+                return;
+            }
+            useEventListener(this, this.selectAllTarget, 'change', this._toggle);
+            useCollectionEventListener(this, this.checkboxTargets, 'change', this._refresh);
+            this._refresh();
+        });
+    }
+    _toggle(event) {
+        event.preventDefault();
+        let target = event.target;
+        this._enabled.forEach((checkbox) => checkbox.checked = (checkbox.disabled || checkbox.readOnly) ? checkbox.checked : target.checked);
+    }
+    _refresh() {
+        const checkboxesCount = this._enabled.length;
+        const checkboxesCheckedCount = this._checked.length;
+        this.selectAllTarget.checked = checkboxesCheckedCount > 0;
+        this.selectAllTarget.indeterminate = checkboxesCheckedCount > 0 && checkboxesCheckedCount < checkboxesCount;
+    }
+}
+CheckboxSelectAllController.targets = ['selectAll', 'checkbox'];

package/dist/controllers/forms/checkbox_xor_controller.js

@@ -0,0 +1,24 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useCollectionEventListener } from "../../mixins";
+export class CheckboxXORController extends BaseController {
+    connect() {
+        useCollectionEventListener(this, this.checkboxTargets, "change", this._update);
+    }
+    _otherCheckboxes(el) {
+        return Array.from(this.checkboxTargets).filter(field => field !== el);
+    }
+    _update(event) {
+        const target = event.target;
+        if (!target) {
+            throw new Error("No target found on event");
+        }
+        let others = this._otherCheckboxes(target);
+        if (target.checked) {
+            others.forEach(checkbox => {
+                checkbox.checked = false;
+                this.dispatchEvent(this.el, 'change');
+            });
+        }
+    }
+}
+CheckboxXORController.targets = ["checkbox"];

package/dist/controllers/forms/detect_dirty_controller.js

@@ -0,0 +1,98 @@
+import { BaseController } from "../../utilities/base_controller";
+import { getOtherRadiosInGroup, isElementCheckable, isHTMLInputElement, isHTMLSelectElement } from "../../utilities/elements";
+import { useEventListener } from "../../mixins/use_event_listener";
+export class DetectDirtyController extends BaseController {
+    get _cacheAttrName() {
+        return 'detect-dirty-load-value';
+    }
+    connect() {
+        let element = this.el;
+        this._cacheLoadValues();
+        this._checkDirty();
+        useEventListener(this, element, ["input", "change"], this._checkDirty, { debounce: 10 });
+    }
+    restore(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this._restoreElementFromLoadValue();
+    }
+    _getElementValue() {
+        let element = this.el;
+        return isElementCheckable(element) ? element.checked : element.value;
+    }
+    _getElementLoadValue() {
+        let element = this.el;
+        let value = element.getAttribute(this._cacheAttrName);
+        if (isElementCheckable(element)) {
+            return value == null ? element.defaultChecked : value == "true";
+        }
+        else if (isHTMLSelectElement(element)) {
+            let options = Array.from(element.options);
+            options.forEach((option) => {
+                if (option.defaultSelected) {
+                    element.value = option.value;
+                    return option.value;
+                }
+            });
+        }
+        else if (value !== null) {
+            return value;
+        }
+        return value;
+    }
+    _elementHasCachedLoadValue() {
+        let element = this.el;
+        return element.hasAttribute(this._cacheAttrName);
+    }
+    _checkDirty() {
+        let element = this.el;
+        if (isHTMLInputElement(element) && element.type == "radio") {
+            getOtherRadiosInGroup(element).forEach((radio) => radio.removeAttribute('data-dirty'));
+        }
+        if (this._isElementDirty()) {
+            element.setAttribute('data-dirty', "true");
+        }
+        else {
+            element.removeAttribute('data-dirty');
+        }
+    }
+    _isElementDirty() {
+        return this._getElementValue() !== this._getElementLoadValue();
+    }
+    _restoreElementFromLoadValue() {
+        let element = this.el;
+        let cacheValue = element.getAttribute(this._cacheAttrName);
+        if (isElementCheckable(element)) {
+            element.setAttribute(this._cacheAttrName, element.checked.toString());
+            element.checked = cacheValue == null ? element.defaultChecked : cacheValue == "true";
+        }
+        else if (isHTMLSelectElement(element)) {
+            if (cacheValue == null) {
+                let options = Array.from(element.options);
+                options.forEach((option) => {
+                    if (option.defaultSelected) {
+                        element.value = option.value;
+                        return;
+                    }
+                });
+            }
+            else {
+                element.value = cacheValue;
+            }
+        }
+        else {
+            element.value = cacheValue == null ? element.defaultValue : cacheValue;
+        }
+    }
+    _cacheLoadValues() {
+        let element = this.el;
+        if (!this._elementHasCachedLoadValue() && isElementCheckable(element)) {
+            element.setAttribute(this._cacheAttrName, element.checked.toString());
+        }
+        else {
+            element.setAttribute(this._cacheAttrName, element.value.toString());
+        }
+    }
+}
+export function isDirty(element) {
+    return element.hasAttribute("data-dirty");
+}

package/dist/controllers/forms/detect_dirty_form_controller.js

@@ -0,0 +1,107 @@
+import { BaseController } from "../../utilities/base_controller";
+import { getOtherRadiosInGroup, isElementCheckable, isHTMLInputElement, isHTMLSelectElement } from "../../utilities/elements";
+import { useEventListener } from "../../mixins/use_event_listener";
+export class DetectDirtyFormController extends BaseController {
+    get _formElements() {
+        return Array.from(this.el.querySelectorAll('input, select, textarea'));
+    }
+    get _cacheAttrName() {
+        return 'detect-dirty-load-value';
+    }
+    connect() {
+        let element = this.el;
+        this._cacheLoadValues();
+        this._checkDirty();
+        useEventListener(this, element, ["input", "change"], this._checkDirty, { debounce: 10 });
+    }
+    restore(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this._formElements.forEach(element => this._restoreElementFromLoadValue(element));
+    }
+    _getElementValue(element) {
+        return isElementCheckable(element) ? element.checked : element.value;
+    }
+    _getElementLoadValue(element) {
+        let value = element.getAttribute(this._cacheAttrName);
+        if (isElementCheckable(element)) {
+            return value == null ? element.defaultChecked : value == "true";
+        }
+        else if (isHTMLSelectElement(element)) {
+            let options = Array.from(element.options);
+            options.forEach((option) => {
+                if (option.defaultSelected) {
+                    element.value = option.value;
+                    return option.value;
+                }
+            });
+        }
+        else if (value !== null) {
+            return value;
+        }
+        return value;
+    }
+    _elementHasCachedLoadValue(element) {
+        return element.hasAttribute(this._cacheAttrName);
+    }
+    _checkElementDirty(element) {
+        if (isHTMLInputElement(element) && element.type == "radio") {
+            getOtherRadiosInGroup(element).forEach((radio) => radio.removeAttribute('data-dirty'));
+        }
+        if (this._isElementDirty(element)) {
+            element.setAttribute('data-dirty', "true");
+        }
+        else {
+            element.removeAttribute('data-dirty');
+        }
+    }
+    _isElementDirty(element) {
+        return this._getElementValue(element) !== this._getElementLoadValue(element);
+    }
+    _cacheElementLoadValue(element) {
+        if (!this._elementHasCachedLoadValue(element) && isElementCheckable(element)) {
+            element.setAttribute(this._cacheAttrName, element.checked.toString());
+        }
+        else {
+            element.setAttribute(this._cacheAttrName, element.value.toString());
+        }
+    }
+    _restoreElementFromLoadValue(element) {
+        let cacheValue = element.getAttribute(this._cacheAttrName);
+        if (isElementCheckable(element)) {
+            element.setAttribute(this._cacheAttrName, element.checked.toString());
+            element.checked = cacheValue == null ? element.defaultChecked : cacheValue == "true";
+        }
+        else if (isHTMLSelectElement(element)) {
+            if (cacheValue == null) {
+                let options = Array.from(element.options);
+                options.forEach((option) => {
+                    if (option.defaultSelected) {
+                        element.value = option.value;
+                        return;
+                    }
+                });
+            }
+            else {
+                element.value = cacheValue;
+            }
+        }
+        else {
+            element.value = cacheValue == null ? element.defaultValue : cacheValue;
+        }
+    }
+    _cacheLoadValues() {
+        this._formElements.forEach(el => this._cacheElementLoadValue(el));
+    }
+    _checkDirty() {
+        this._formElements.forEach(el => this._checkElementDirty(el));
+        if (this._formElements.some(el => isFormDirty(el))) {
+            this.el.setAttribute("data-dirty", "true");
+        }
+        else {
+            this.el.removeAttribute("data-dirty");
+        }
+    }
+}
+export function isFormDirty(element) {
+    return element.hasAttribute("data-dirty");
+}

package/dist/controllers/forms/enable_inputs_controller.js

@@ -0,0 +1,21 @@
+import { BaseController } from "../../utilities/base_controller";
+export class EnableInputsController extends BaseController {
+    connect() {
+    }
+    disable() {
+        let shouldClear = this.hasClearValue && this.clearValue;
+        this.inputTargets.forEach((el, _) => {
+            if (shouldClear) {
+                el.value = "";
+            }
+            el.disabled = true;
+        });
+    }
+    enable() {
+        this.inputTargets.forEach((el, _) => el.disabled = false);
+    }
+}
+EnableInputsController.targets = ["input"];
+EnableInputsController.values = {
+    clear: Boolean,
+};

package/dist/controllers/forms/focus_steal_controller.js

@@ -0,0 +1,28 @@
+import { BaseController } from "../../utilities/base_controller";
+export class FocusStealController extends BaseController {
+    get _mode() {
+        const MODES = ['immediate', 'wait'];
+        if (this.hasModeValue) {
+            if (!MODES.includes(this.modeValue)) {
+                throw new Error(`The given modeValue '${this.modeValue}' is not one of the supported modes: "${MODES.join('", "')}"`);
+            }
+            else {
+                return this.modeValue;
+            }
+        }
+        else {
+            return MODES[0];
+        }
+    }
+    connect() {
+        if (this._mode == 'immediate') {
+            this.steal();
+        }
+    }
+    steal() {
+        this.el.focus();
+    }
+}
+FocusStealController.values = {
+    mode: String,
+};

package/dist/controllers/forms/form_rc_controller.js

@@ -0,0 +1,47 @@
+import { BaseController } from '../../utilities/base_controller';
+import { requestReset, requestSubmit } from "../../utilities/request_submit";
+export class FormRcController extends BaseController {
+    get _mode() {
+        if (this.hasSubmitModeValue) {
+            if (!["direct", "request"].includes(this.submitModeValue)) {
+                throw new Error(`The modeValue provided '${this.submitModeValue}' is not one of the recognised configuration options`);
+            }
+            return this.submitModeValue;
+        }
+        else {
+            return "request";
+        }
+    }
+    get form() {
+        let form;
+        if (this.hasFormSelectorValue) {
+            form = document.querySelector(this.formSelectorValue);
+            if (!form) {
+                throw new Error(`Could not find a form on the page that matches selector '${this.formSelectorValue}'`);
+            }
+        }
+        else {
+            form = this.formTarget;
+        }
+        return form;
+    }
+    submit(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        let el = this.form;
+        if (this._mode == 'request') {
+            requestSubmit(el);
+        }
+        else {
+            el.submit();
+        }
+    }
+    reset(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        requestReset(this.form);
+    }
+}
+FormRcController.targets = ["form"];
+FormRcController.values = {
+    formSelector: String,
+    submitMode: String,
+};