stimulus-library 0.7.3 → 0.8.0-beta

package/dist/controllers/forms/navigate_form_errors_controller.js

@@ -0,0 +1,154 @@
+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 { scrollToElement } from "../../utilities/scroll";
+import clamp from "lodash-es/clamp";
+import { installClassMethods } from "../../mixins/install_class_methods";
+export class NavigateFormErrorsController extends BaseController {
+    constructor() {
+        super(...arguments);
+        this._errors = [];
+        this._firstClick = false;
+    }
+    get defaultCurrentClasses() {
+        return ["currentError"];
+    }
+    get _errorCount() {
+        return this._errors.length;
+    }
+    get _previousIndex() {
+        let index = this._index - 1;
+        if (index < 0) {
+            return 0;
+        }
+        return index;
+    }
+    get _nextIndex() {
+        let index = this._index + 1;
+        if (index > this._errors.length - 1) {
+            return this._errors.length - 1;
+        }
+        return index;
+    }
+    get _index() {
+        return clamp(this.hasIndexValue ? this.indexValue : 0, 0, this._errors.length);
+    }
+    get _selector() {
+        if (this.hasSelectorValue) {
+            return this.selectorValue;
+        }
+        else {
+            throw new Error("Expected `selectorValue` to be present");
+        }
+    }
+    get _currentError() {
+        return this._errors[this._index];
+    }
+    get _otherErrors() {
+        return this._errors.filter((error, index) => index !== this._index);
+    }
+    connect() {
+        installClassMethods(this);
+        requestAnimationFrame(() => {
+            this._firstClick = true;
+            this._toggleButtons();
+            this._toggleVisibility();
+        });
+    }
+    current(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            if (this._firstClick) {
+                this._firstClick = false;
+                this._toggleButtons();
+            }
+            yield scrollToElement(this._currentError, { behavior: "smooth", block: "center", inline: "center" });
+            this._updateClasses();
+        });
+    }
+    next(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            if (this._firstClick) {
+                this._firstClick = false;
+                this._toggleButtons();
+            }
+            else {
+                this.indexValue = this._nextIndex;
+            }
+            yield scrollToElement(this._currentError, { behavior: "smooth", block: "center", inline: "center" });
+            this._updateClasses();
+        });
+    }
+    previous(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            if (this._firstClick) {
+                this._firstClick = false;
+                this._toggleButtons();
+            }
+            else {
+                this.indexValue = this._previousIndex;
+            }
+            yield scrollToElement(this._currentError, { behavior: "smooth", block: "center", inline: "center" });
+            this._updateClasses();
+        });
+    }
+    indexValueChanged() {
+        this._toggleButtons();
+    }
+    selectorValueChanged() {
+        this._errors = Array.from(document.querySelectorAll(this._selector));
+        this.indexValue = 0;
+        this._toggleButtons();
+        this._toggleVisibility();
+    }
+    _updateClasses() {
+        this.addCurrentClasses(this._currentError);
+        this._otherErrors.forEach((error) => this.removeCurrentClasses(error));
+    }
+    _toggleVisibility() {
+        if (this._errorCount === 0) {
+            this.el.style.display = "none";
+        }
+        else {
+            this.el.style.display = "";
+        }
+    }
+    _toggleButtons() {
+        if (this.hasNextTarget) {
+            // If there is no "Current Error" button, then enable the next error button when there is only 1 error.
+            if (!this.hasCurrentTarget && this._firstClick && this.indexValue == this._errorCount - 1) {
+                this.nextTarget.removeAttribute("disabled");
+                return;
+            }
+            else if (this.indexValue >= this._errorCount - 1) {
+                this.nextTarget.setAttribute("disabled", "true");
+            }
+            else {
+                this.nextTarget.removeAttribute("disabled");
+            }
+        }
+        if (this.hasPreviousTarget) {
+            if (this.indexValue <= 0) {
+                this.previousTarget.setAttribute("disabled", "true");
+            }
+            else {
+                this.previousTarget.removeAttribute("disabled");
+            }
+        }
+    }
+}
+NavigateFormErrorsController.values = {
+    selector: String,
+    index: Number,
+};
+NavigateFormErrorsController.classes = ["current"];
+NavigateFormErrorsController.targets = ["next", "current", "previous"];

package/dist/controllers/forms/nested_form_controller.js

@@ -0,0 +1,49 @@
+import { BaseController } from "../../utilities/base_controller";
+export class NestedFormController extends BaseController {
+    get _wrapperClass() {
+        return this.hasWrapperSelectorValue ? this.wrapperClassValue : 'nested-fields';
+    }
+    get _insertMode() {
+        return this.hasInsertModeValue ? this.insertModeValue : 'beforeend';
+    }
+    connect() {
+        this._checkStructure();
+    }
+    add(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, this._generateID());
+        this.targetTarget.insertAdjacentHTML(this._insertMode, content);
+    }
+    remove(event) {
+        event.preventDefault();
+        const wrapper = event.target.closest(`.${this._wrapperClass}`);
+        if (wrapper == null) {
+            throw new Error(`#remove was clicked from outside of a child record. Could not find an ancestor with class .${this._wrapperClass}`);
+        }
+        if (wrapper.dataset.newRecord === 'true') {
+            wrapper.remove();
+        }
+        else {
+            wrapper.style.display = 'none';
+            let destroyInput = wrapper.querySelector("input[name*='_destroy']");
+            if (destroyInput == null) {
+                throw new Error(`Could not find a hidden input with name '_destroy'. NestedForm cannot remove an already persisted record without it.`);
+            }
+            destroyInput.value = "1";
+        }
+    }
+    _generateID() {
+        return new Date().getTime().toString() + Math.random().toString().slice(2);
+    }
+    _checkStructure() {
+        let template = this.templateTarget.innerHTML;
+        if (template.indexOf('NEW_RECORD')) {
+            throw new Error("Could not find 'NEW_RECORD' in the provided template. Please make sure you've passed `child_index: 'NEW_RECORD'` to `fields_for`");
+        }
+    }
+}
+NestedFormController.targets = ['target', 'template'];
+NestedFormController.values = {
+    insertMode: String,
+    wrapperClass: String,
+};

package/dist/controllers/forms/password_confirm_controller.js

@@ -0,0 +1,26 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useCollectionEventListener } from "../../mixins/use_event_listener";
+import { installClassMethods } from "../../mixins/install_class_methods";
+export class PasswordConfirmController extends BaseController {
+    connect() {
+        installClassMethods(this);
+        useCollectionEventListener(this, this.passwordTargets, "change", this._checkPasswordsMatch);
+    }
+    _allPasswordsMatch() {
+        let values = new Set(this.passwordTargets.map(el => el.value)); // Create a unique set of the password values
+        return values.has("") || values.size == 1; // If any of the passwords are still blank, or there is only one distinct password value (i.e. they all are the same)
+    }
+    _checkPasswordsMatch() {
+        let element = this.el;
+        if (this._allPasswordsMatch()) {
+            this.dispatchEvent(element, "password-confirm:match");
+            this.passwordTargets.forEach(el => this.removeErrorClasses(el));
+        }
+        else {
+            this.dispatchEvent(element, "password-confirm:no-match");
+            this.passwordTargets.forEach(el => this.addErrorClasses(el));
+        }
+    }
+}
+PasswordConfirmController.targets = ["password"];
+PasswordConfirmController.classes = ["error"];

package/dist/controllers/forms/password_peek_controller.js

@@ -0,0 +1,21 @@
+import { BaseController } from "../../utilities/base_controller";
+export class PasswordPeekController extends BaseController {
+    peak(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.passwordTarget.type = "text";
+    }
+    hide(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.passwordTarget.type = "password";
+    }
+    toggle(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        if (this.passwordTarget.type === "password") {
+            this.peak();
+        }
+        else {
+            this.hide();
+        }
+    }
+}
+PasswordPeekController.targets = ["password"];

package/dist/controllers/forms/remote_form_controller.js

@@ -0,0 +1,26 @@
+import { BaseController } from "../../utilities/base_controller";
+export class RemoteFormController extends BaseController {
+    get _selector() {
+        return this.hasSelectorValue ? this.selectorValue : `[data-controller~="${this.identifier}"]`;
+    }
+    replace(event) {
+        const [data, status, xhr] = event.detail;
+        if (data instanceof Node) {
+            let newElement = data.querySelector(this._selector);
+            if (newElement == null) {
+                throw new Error(`expected new form DOM with [data-controller="${this.identifier}"] to be present in returned payload`);
+            }
+            let parentNode = this.el.parentNode;
+            if (parentNode == null) {
+                throw new Error('expected form to have a DOM parent, could not execute replaceChild');
+            }
+            parentNode.replaceChild(newElement, this.el);
+            this.dispatchEvent(newElement, 'remote-form:replace');
+        }
+        else {
+            console.log('Unknown', data);
+        }
+    }
+}
+RemoteFormController.targets = [];
+RemoteFormController.values = { selector: String };

package/dist/controllers/forms/sync_inputs_controller.js

@@ -0,0 +1,67 @@
+import { BaseController } from "../../utilities/base_controller";
+import { isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, isTypeOfFormInputElement } from "../../utilities/elements";
+import { EventBus } from "../../utilities/event_bus";
+import { useEventListener } from "../../mixins/use_event_listener";
+import { useEventBus } from "../../mixins/use_event_bus";
+export class SyncInputsController extends BaseController {
+    get _eventName() {
+        return `sync:${this._key}`;
+    }
+    get _key() {
+        if (this.hasKeyValue) {
+            return this.keyValue;
+        }
+        throw new Error("Expected `keyValue` to be present");
+    }
+    get _value() {
+        let el = this.el;
+        if (isHTMLInputElement(el) && el.type === "checkbox") {
+            return el.checked;
+        }
+        else if (isHTMLInputElement(el) && el.type === "radio") {
+            return el.checked ? el.value : "";
+        }
+        else {
+            return el.value;
+        }
+    }
+    set _value(val) {
+        let el = this.el;
+        if (isHTMLInputElement(el) && el.type === "checkbox") {
+            el.checked = val.toString() === "true";
+        }
+        else if (isHTMLInputElement(el) && el.type === "radio") {
+            el.checked = el.value === val;
+        }
+        else if (isHTMLInputElement(el) || isHTMLTextAreaElement(el) || isHTMLSelectElement(el)) {
+            el.value = val.toString();
+        }
+        else {
+            el.innerHTML = val.toString();
+        }
+    }
+    connect() {
+        useEventBus(this, this._eventName, this._read);
+        requestAnimationFrame(() => {
+            if (isTypeOfFormInputElement(this.el)) {
+                this._emit();
+                useEventListener(this, this.el, "input", this._emit);
+            }
+        });
+    }
+    _emit() {
+        EventBus.emit(this._eventName, { value: this._value, dispatcher: this.el });
+    }
+    _read(payload) {
+        if (payload === undefined) {
+            throw new Error("No payload received");
+        }
+        let { dispatcher, value } = payload;
+        if (dispatcher !== this.el) {
+            this._value = value;
+        }
+    }
+}
+SyncInputsController.values = {
+    key: String,
+};

package/dist/controllers/forms/value_warn_controller.js

@@ -0,0 +1,45 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useEventListener } from "../../mixins/use_event_listener";
+import { installClassMethods } from "../../mixins/install_class_methods";
+export class ValueWarnController extends BaseController {
+    get _maxMessage() {
+        return this.hasMaxMessageValue ? this.maxMessageValue : `Value must be less than ${this.maxValue}`;
+    }
+    get _minMessage() {
+        return this.hasMinMessageValue ? this.minMessageValue : `Value must be greater than ${this.minValue}`;
+    }
+    get defaultWarningHideClasses() {
+        return ["hide"];
+    }
+    connect() {
+        installClassMethods(this);
+        this.addWarningHideClasses(this.warningTarget);
+        useEventListener(this, this.inputTarget, "input", this._check);
+        this._check();
+    }
+    _check() {
+        if (this.hasMinValue && Number.parseFloat(this.inputTarget.value) < this.minValue) {
+            this.removeWarningHideClasses(this.warningTarget);
+            this.addInputWarningClasses(this.inputTarget);
+            this.warningTarget.innerText = this._minMessage;
+        }
+        else if (this.hasMaxValue && Number.parseFloat(this.inputTarget.value) > this.maxValue) {
+            this.removeWarningHideClasses(this.warningTarget);
+            this.addInputWarningClasses(this.inputTarget);
+            this.warningTarget.innerText = this._maxMessage;
+        }
+        else {
+            this.addWarningHideClasses(this.warningTarget);
+            this.removeInputWarningClasses(this.inputTarget);
+            this.warningTarget.innerText = "";
+        }
+    }
+}
+ValueWarnController.classes = ["inputWarning", "warningHide"];
+ValueWarnController.targets = ["input", "warning"];
+ValueWarnController.values = {
+    max: Number,
+    min: Number,
+    minMessage: String,
+    maxMessage: String,
+};

package/dist/controllers/forms/word_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 WordCountController extends BaseController {
+    connect() {
+        installClassMethods(this);
+        this._updateWordCount();
+        useEventListener(this, this.inputTarget, "input", this._updateWordCount);
+    }
+    _updateWordCount() {
+        let wordCount = 0;
+        let textAreaValue = this.inputTarget.value;
+        let matches = textAreaValue.match(/\S+/g);
+        wordCount = (matches && matches.length) || 0;
+        this.outputTarget.innerText = wordCount.toString();
+        if (this._isValidCount(wordCount)) {
+            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;
+    }
+}
+WordCountController.targets = ["input", "output"];
+WordCountController.values = { min: Number, max: Number };
+WordCountController.classes = ["error"];

package/dist/controllers/{index.d.ts → index.js}

@@ -1,3 +1,4 @@
+// Directories
 export * from './ajax';
 export * from './forms';
 export * from './media';
@@ -6,6 +7,7 @@ export * from './signal';
 export * from './tables';
 export * from './utility';
 export * from './visual';
+// Controllers
 export * from './anchor_spy_controller';
 export * from './back_link_controller';
 export * from './clipboard_controller';
@@ -15,6 +17,7 @@ export * from './debug_controller';
 export * from './disable_with_controller';
 export * from './dismissable_controller';
 export * from './element_save_controller';
+export * from './equalize_controller';
 export * from './empty_dom_controller';
 export * from './prefetch_controller';
 export * from './print_button_controller';
@@ -27,4 +30,3 @@ export * from './toggle_class_controller';
 export * from './trix_modifier_controller';
 export * from './turbo_frame_rc_controller';
 export * from './turbo_frame_refresh_controller';
-//# sourceMappingURL=index.d.ts.map

package/dist/controllers/media/fallback_image_controller.js

@@ -0,0 +1,44 @@
+import { BaseController } from "../../utilities/base_controller";
+export class FallbackImageController extends BaseController {
+    initialize() {
+        this._hasLoadedSuccessfully = this._hasLoadedSuccessfully.bind(this);
+        this._success = this._success.bind(this);
+        this._fail = this._fail.bind(this);
+    }
+    connect() {
+        let element = this.el;
+        element.onerror = this._fail;
+        if (element.complete && !this._hasLoadedSuccessfully()) {
+            this._fail();
+        }
+        else {
+            this._success();
+        }
+    }
+    disconnect() {
+        this.removeSuccessClasses();
+        this.removeFailClasses();
+    }
+    _success() {
+        this.addSuccessClasses();
+    }
+    _fail() {
+        let element = this.el;
+        this.addFailClasses();
+        if (this.hasPlaceholderValue && element.src !== this.placeholderValue) {
+            this.dispatchEvent(element, "fallback-image:placeholder");
+            element.src = this.placeholderValue;
+            element.onerror = this._fail;
+        }
+        else {
+            this.dispatchEvent(element, "fallback-image:fail");
+            element.style.display = "none";
+        }
+    }
+    _hasLoadedSuccessfully() {
+        let element = this.el;
+        return element.naturalHeight > 0 && element.naturalWidth > 0;
+    }
+}
+FallbackImageController.values = { placeholder: String };
+FallbackImageController.classes = ["success", "fail"];

package/dist/controllers/media/{index.d.ts → index.js}

@@ -1,4 +1,3 @@
 export * from './fallback_image_controller';
 export * from './lightbox_image_controller';
 export * from './media_player_controller';
-//# sourceMappingURL=index.d.ts.map

package/dist/controllers/media/lightbox_image_controller.js

@@ -0,0 +1,71 @@
+import dialogPolyfill from "dialog-polyfill";
+import { BaseController } from "../../utilities/base_controller";
+import { scrollToElement } from "../../utilities/scroll";
+import { useEventListener } from "../../mixins/use_event_listener";
+export class LightboxImageController extends BaseController {
+    constructor() {
+        super(...arguments);
+        this._dialog = null;
+    }
+    get _src() {
+        return this.hasSrcValue ? this.srcValue : this.el.src;
+    }
+    get _srcSet() {
+        return this.hasSrcSetValue ? this.srcSetValue : this.el.srcset;
+    }
+    get _sizes() {
+        return this.hasSizesValue ? this.sizesValue : this.el.sizes;
+    }
+    get _modalClassName() {
+        return this.hasModalClass ? this.modalClass : "image-lightbox-dialog";
+    }
+    get _imageClassName() {
+        return this.hasImageClass ? this.imageClass : "image-lightbox-image";
+    }
+    initialize() {
+        this.open = this.open.bind(this);
+        this.close = this.close.bind(this);
+    }
+    connect() {
+    }
+    disconnect() {
+        this.close();
+    }
+    open() {
+        let element = this.el;
+        if (this._dialog) {
+            return;
+        }
+        this._dialog = document.createElement("dialog");
+        let image = document.createElement("img");
+        image.className = this._imageClassName;
+        image.src = this._src;
+        image.srcset = this._srcSet;
+        image.sizes = this._sizes;
+        this._dialog.appendChild(image);
+        element.insertAdjacentElement("afterend", this._dialog);
+        dialogPolyfill.registerDialog(this._dialog);
+        this._dialog.className = this._modalClassName;
+        // @ts-ignore Experimental API
+        this._dialog.showModal();
+        scrollToElement(this._dialog, { behavior: "smooth", block: "end" }).catch(() => this._dialog.scrollIntoView(false));
+        useEventListener(this, this._dialog, "click", this.close);
+        useEventListener(this, this._dialog, "cancel", this.close);
+        useEventListener(this, this._dialog, "close", this.close);
+    }
+    close() {
+        if (this._dialog) {
+            // @ts-ignore Experimental API
+            this._dialog.close();
+            this._dialog.remove();
+            this._dialog = null;
+            scrollToElement(this.el, { behavior: "smooth", block: "end" }).catch(() => this.el.scrollIntoView(false));
+        }
+    }
+}
+LightboxImageController.values = {
+    src: String,
+    srcSet: String,
+    sizes: String,
+};
+LightboxImageController.classes = ["modal", "image"];

package/dist/controllers/media/media_player_controller.js

@@ -0,0 +1,31 @@
+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";
+export class MediaPlayerController extends BaseController {
+    play(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            yield this.mediaTarget.play();
+        });
+    }
+    pause(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.mediaTarget.pause();
+    }
+    restart(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.mediaTarget.currentTime = 0;
+    }
+    seek(event) {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.mediaTarget.currentTime += 5;
+    }
+}
+MediaPlayerController.targets = ["media"];