stimulus-library 0.7.5 → 0.9.0

package/dist/controllers/prefetch_controller.js

@@ -0,0 +1,74 @@
+import { BaseController } from "../utilities/base_controller";
+import { useEventListener } from "../mixins/use_event_listener";
+import { warn } from "../utilities/logging";
+export class PrefetchController extends BaseController {
+    get _mode() {
+        return this.hasModeValue ? this.modeValue : "mouseover";
+    }
+    get _supportsPrefetch() {
+        var _a, _b;
+        const link = document.createElement('link');
+        return ((_a = link.relList) === null || _a === void 0 ? void 0 : _a.supports) && ((_b = link.relList) === null || _b === void 0 ? void 0 : _b.supports('prefetch'));
+    }
+    get _href() {
+        return this.el.href;
+    }
+    get _existingPrefetch() {
+        return (document.head.querySelectorAll(`link[rel="prefetch"][href="${this._href}"]`) || []).length > 0;
+    }
+    get _connectionSuitable() {
+        // @ts-ignore
+        const connection = navigator.connection;
+        // no way to know what network state is. Allow prefetching
+        if (!connection) {
+            return true;
+        }
+        // Don't prefetch if network conditions are poor or user has enabled data-saving mode
+        if (connection) {
+            // @ts-ignore Experimental API
+            if (connection.saveData) {
+                warn(this, 'Data Saving is enabled');
+                return false;
+            }
+            // @ts-ignore Experimental API
+            if (/2g/.test(connection.effectiveType)) {
+                warn(this, "Network is too slow");
+                return false;
+            }
+        }
+        return true;
+    }
+    connect() {
+        if (!this._supportsPrefetch) {
+            return;
+        }
+        switch (this._mode) {
+            case "intersect":
+                this._setupObserver();
+                break;
+            case "mouseover":
+                useEventListener(this, this.el, "mouseover", this.prefetch, { once: true });
+                break;
+            default:
+                throw new Error(`'${this._mode}' is not a supported prefetch mode`);
+        }
+    }
+    _setupObserver() {
+        const observer = new IntersectionObserver(([entry], observer) => {
+            if (entry.isIntersecting) {
+                this.prefetch();
+                observer.unobserve(entry.target);
+            }
+        });
+        observer.observe(this.element);
+    }
+    prefetch() {
+        if (this._existingPrefetch || !this._connectionSuitable) {
+            return;
+        }
+        const link = document.createElement('link');
+        Object.assign(link, { rel: 'prefetch', href: this._href, as: 'document' });
+        document.head.appendChild(link);
+    }
+}
+PrefetchController.values = { mode: String };

package/dist/controllers/print_button_controller.js

@@ -0,0 +1,18 @@
+import { PrintController } from "./utility/print_controller";
+import { useEventListener } from "../mixins/use_event_listener";
+import { installClassMethods } from "../mixins/install_class_methods";
+export class PrintButtonController extends PrintController {
+    get defaultUnsupportedClasses() {
+        return ["unsupported"];
+    }
+    connect() {
+        installClassMethods(this);
+        if (!("print" in window)) {
+            this.addUnsupportedClasses();
+        }
+        useEventListener(this, this.el, 'click', this.print);
+    }
+}
+PrintButtonController.classes = [
+    'unsupported',
+];

package/dist/controllers/responsive_iframe_controller.js

@@ -0,0 +1,35 @@
+import { BaseController } from "../utilities/base_controller";
+import { useEventListener } from "../mixins/use_event_listener";
+export class ResponsiveIframeWrapperController extends BaseController {
+    connect() {
+        useEventListener(this, window, "message", this.messageReceived);
+    }
+    messageReceived(message) {
+        let data = message.data;
+        if (data.hasOwnProperty("name") && data.name === "iframe-body" && data.hasOwnProperty("height")) {
+            this.resize(data.height);
+        }
+    }
+    resize(height) {
+        this.el.style.height = `${height}px`;
+    }
+}
+export class ResponsiveIframeBodyController extends BaseController {
+    connect() {
+        // If this Window is inside a frame
+        if (window.self !== window.top) {
+            useEventListener(this, window, "resize", this.postUpdate, { debounce: 200 });
+            this.postUpdate();
+        }
+    }
+    postUpdate() {
+        let payload = { name: "iframe-body", height: this.getHeight() };
+        window.parent.postMessage(payload, "*");
+    }
+    getHeight() {
+        const body = document.body;
+        const html = document.documentElement;
+        // Get the largest height out of body and html's various height measurements
+        return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+    }
+}

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

@@ -3,4 +3,3 @@ export * from './scroll_into_focus_controller';
 export * from './scroll_to_bottom_controller';
 export * from './scroll_to_controller';
 export * from './scroll_to_top_controller';
-//# sourceMappingURL=index.d.ts.map

package/dist/controllers/scroll/scroll_container_controller.js

@@ -0,0 +1,81 @@
+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 { scrollAbsoluteBottom, scrollAbsoluteLeft, scrollAbsoluteTop, scrollDown, scrollLeft, scrollRight, scrollUp } from "../../utilities/scroll";
+export class ScrollContainerController extends BaseController {
+    get _increment() {
+        return this.hasIncrementValue ? this.incrementValue : 50;
+    }
+    get _behaviour() {
+        if (this.hasBehaviourValue) {
+            if (["auto", "smooth"].includes(this.behaviourValue)) {
+                return this.behaviourValue;
+            }
+            else {
+                throw new Error(`'${this.behaviourValue}' is not a recognised scroll behaviour`);
+            }
+        }
+        else {
+            return "auto";
+        }
+    }
+    scrollTop(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            yield scrollAbsoluteTop(this.el, { behavior: this._behaviour });
+        });
+    }
+    scrollBottom(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            yield scrollAbsoluteBottom(this.el, { behavior: this._behaviour });
+        });
+    }
+    scrollLeft(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            yield scrollAbsoluteLeft(this.el, { behavior: this._behaviour });
+        });
+    }
+    scrollRight(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            yield scrollAbsoluteLeft(this.el, { behavior: this._behaviour });
+        });
+    }
+    up(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            yield scrollUp(this.el, this._increment, { behavior: this._behaviour });
+        });
+    }
+    down(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            yield scrollDown(this.el, this._increment, { behavior: this._behaviour });
+        });
+    }
+    left(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            yield scrollLeft(this.el, this._increment, { behavior: this._behaviour });
+        });
+    }
+    right(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            yield scrollRight(this.el, this._increment, { behavior: this._behaviour });
+        });
+    }
+}
+ScrollContainerController.values = {
+    behaviour: String,
+    increment: Number,
+};

package/dist/controllers/scroll/scroll_into_focus_controller.js

@@ -0,0 +1,20 @@
+import { EphemeralController } from "../../utilities/ephemeral_controller";
+import { scrollToElement } from "../../utilities/scroll";
+export class ScrollIntoFocusController extends EphemeralController {
+    connect() {
+        requestAnimationFrame(() => {
+            // Attempt smooth scrolling, with polyfill
+            scrollToElement(this.el, {
+                behavior: this.hasBehaviorValue ? this.behaviorValue : "smooth",
+                block: this.hasBlockValue ? this.blockValue : "center",
+                inline: this.hasInlineValue ? this.inlineValue : "center",
+            }).catch(() => this.el.scrollIntoView()); // Fallback to snap-scrolling
+            this._cleanupSelf();
+        });
+    }
+}
+ScrollIntoFocusController.values = {
+    behavior: String,
+    block: String,
+    inline: String,
+};

package/dist/controllers/scroll/scroll_to_bottom_controller.js

@@ -0,0 +1,37 @@
+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 { getScrollParent, scrollAbsoluteBottom } from "../../utilities/scroll";
+export class ScrollToBottomController extends BaseController {
+    get _mode() {
+        return this.hasModeValue ? this.modeValue : "document";
+    }
+    get _scrollTarget() {
+        let target;
+        if (this._mode == "document") {
+            target = window;
+        }
+        else {
+            target = getScrollParent(this.el);
+        }
+        return target;
+    }
+    scroll(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            if (this._scrollTarget) {
+                yield scrollAbsoluteBottom(this._scrollTarget);
+            }
+        });
+    }
+}
+ScrollToBottomController.values = {
+    mode: String,
+};

package/dist/controllers/scroll/scroll_to_controller.js

@@ -0,0 +1,22 @@
+import { BaseController } from "../../utilities/base_controller";
+import { scrollToElement } from "../../utilities/scroll";
+export class ScrollToController extends BaseController {
+    scroll() {
+        let target = document.querySelector(this.selectorValue);
+        if (!target) {
+            console.warn(`Could not find target for '${this.selectorValue}'`);
+            return;
+        }
+        scrollToElement(target, {
+            behavior: this.hasBehaviorValue ? this.behaviorValue : "smooth",
+            block: this.hasBlockValue ? this.blockValue : "center",
+            inline: this.hasInlineValue ? this.inlineValue : "center",
+        }).catch(() => target.scrollIntoView()); // Fallback to snap-scrolling
+    }
+}
+ScrollToController.values = {
+    selector: String,
+    behavior: String,
+    block: String,
+    inline: String,
+};

package/dist/controllers/scroll/scroll_to_top_controller.js

@@ -0,0 +1,37 @@
+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 { getScrollParent, scrollAbsoluteTop } from "../../utilities/scroll";
+export class ScrollToTopController extends BaseController {
+    get _mode() {
+        return this.hasModeValue ? this.modeValue : "document";
+    }
+    get _scrollTarget() {
+        let target;
+        if (this._mode == "document") {
+            target = window;
+        }
+        else {
+            target = getScrollParent(this.el);
+        }
+        return target;
+    }
+    scroll(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+            if (this._scrollTarget) {
+                yield scrollAbsoluteTop(this._scrollTarget);
+            }
+        });
+    }
+}
+ScrollToTopController.values = {
+    mode: String,
+};

package/dist/controllers/self_destruct_controller.js

@@ -0,0 +1,11 @@
+import { BaseController } from "../utilities/base_controller";
+import { useTimeout } from "../mixins/use_timeout";
+export class SelfDestructController extends BaseController {
+    connect() {
+        requestAnimationFrame(() => {
+            // Only start countdown on first paint
+            useTimeout(this, () => this.el.remove(), this.secondsValue * 1000);
+        });
+    }
+}
+SelfDestructController.values = { seconds: Number };

package/dist/controllers/signal/events.js

@@ -0,0 +1,12 @@
+export function signalEventName(name, type) {
+    return `signal:${type}:${name}`;
+}
+export function signalConnectEvent(name) {
+    return signalEventName(name, 'connect');
+}
+export function signalValueEvent(name) {
+    return signalEventName(name, 'value');
+}
+export function signalVisibilityEvent(name, action) {
+    return signalEventName(`${name}:${action}`, 'visibility');
+}

package/dist/controllers/signal/expressions.js

@@ -0,0 +1,54 @@
+export function extractPredicates(expressionString) {
+    expressionString = expressionString.trim();
+    let andExpression = expressionString.includes("&&");
+    let orExpression = expressionString.includes("||");
+    let groupings = expressionString.includes("(") || expressionString.includes(")");
+    if (andExpression && orExpression) {
+        throw new Error("Cannot have both && and || in the same expression.");
+    }
+    if (groupings) {
+        throw new Error("Cannot have logical groupings `(>3 && <= 9) || (>1 && <2)` in the expression. Only supports simple expressions like  `>1 && <3`");
+    }
+    let expressions = expressionString.split(andExpression ? "&&" : "||");
+    if (andExpression) {
+        return expressions.map(ex => _predicateForExpression(ex));
+    }
+    else if (orExpression) {
+        return expressions.map(ex => _predicateForExpression(ex));
+    }
+    else {
+        return [_predicateForExpression(expressionString)];
+    }
+}
+function _predicateForExpression(expression) {
+    let operators = [">=", "<=", "==", "!=", ">", "<"];
+    let operator = operators.find(part => expression.includes(part));
+    if (!operator) {
+        throw new Error(`Could not find operator in expression: ${expression}`);
+    }
+    let expressionValue = expression.split(operator)[1].trim();
+    let isNumber = /^-?\d*(\.\d+)?$/.test(expressionValue);
+    if (isNumber) {
+        expressionValue = parseFloat(expressionValue);
+    }
+    if (expressionValue === "") {
+        throw new Error(`Could not find a value in expression: ${expression}`);
+    }
+    let notEmpty = (signalValue) => signalValue !== "";
+    switch (operator) {
+        case ">":
+            return (signalValue) => isNumber && notEmpty(signalValue) && signalValue > expressionValue;
+        case "<":
+            return (signalValue) => isNumber && notEmpty(signalValue) && signalValue < expressionValue;
+        case ">=":
+            return (signalValue) => isNumber && notEmpty(signalValue) && signalValue >= expressionValue;
+        case "<=":
+            return (signalValue) => isNumber && notEmpty(signalValue) && signalValue <= expressionValue;
+        case "==":
+            return (signalValue) => notEmpty(signalValue) && signalValue == expressionValue;
+        case "!=":
+            return (signalValue) => notEmpty(signalValue) && signalValue != expressionValue;
+        default:
+            throw new Error(`Unknown operator ${operator}`);
+    }
+}

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

@@ -2,4 +2,3 @@ export * from './signal_action_controller';
 export * from './signal_dom_children_controller';
 export * from './signal_input_controller';
 export * from './signal_visibility_controller';
-//# sourceMappingURL=index.d.ts.map

package/dist/controllers/signal/signal_action_controller.js

@@ -0,0 +1,31 @@
+import { BaseController } from "../../utilities/base_controller";
+import { extractPredicates } from "./expressions";
+import { useEventBus } from "../../mixins/use_event_bus";
+import { EventBus } from "../../utilities";
+import { signalConnectEvent, signalEventName, signalValueEvent } from "./events";
+export class SignalActionController extends BaseController {
+    get _predicates() {
+        return extractPredicates(this.whenValue);
+    }
+    connect() {
+        EventBus.emit(signalConnectEvent(this.nameValue));
+        useEventBus(this, signalValueEvent(this.nameValue), this._onSignal);
+    }
+    _onSignal(payload) {
+        let value = payload.value;
+        if (!this.hasWhenValue) {
+            this.dispatchEvent(this.el, signalEventName(this.nameValue, 'match'));
+            return;
+        }
+        if (this._predicates.every(predicate => predicate(value))) {
+            this.dispatchEvent(this.el, signalEventName(this.nameValue, 'match'), { detail: { element: this.el, value } });
+        }
+        else {
+            this.dispatchEvent(this.el, signalEventName(this.nameValue, 'no-match'), { detail: { element: this.el, value } });
+        }
+    }
+}
+SignalActionController.values = {
+    name: String,
+    when: String,
+};

package/dist/controllers/signal/signal_dom_children_controller.js

@@ -0,0 +1,40 @@
+import { BaseController } from "../../utilities/base_controller";
+import { EventBus } from "../../utilities";
+import { signalConnectEvent, signalValueEvent } from "./events";
+import { useMutationObserver } from "../../mixins/use_mutation_observer";
+import { useEventBus } from "../../mixins/use_event_bus";
+export class SignalDomChildrenController extends BaseController {
+    get _children() {
+        if (this.hasScopeSelectorValue) {
+            return Array.from(this.el.querySelectorAll(this.scopeSelectorValue));
+        }
+        else {
+            return Array.from(this.el.children);
+        }
+    }
+    get _name() {
+        if (this.hasNameValue) {
+            return this.nameValue;
+        }
+        else {
+            throw new Error("SignalEmptyDomController requires a nameValue to be provided");
+        }
+    }
+    connect() {
+        useEventBus(this, signalConnectEvent(this._name), this.emitChildCount);
+        EventBus.emit(signalConnectEvent(this._name));
+        useMutationObserver(this, this.el, this.mutate, { childList: true });
+        this.emitChildCount();
+    }
+    mutate(entries) {
+        this.emitChildCount();
+    }
+    emitChildCount() {
+        let childCount = this._children.length;
+        EventBus.emit(signalValueEvent(this._name), { element: this.el, value: childCount.toString() });
+    }
+}
+SignalDomChildrenController.values = {
+    name: String,
+    scopeSelector: String,
+};

package/dist/controllers/signal/signal_input_controller.js

@@ -0,0 +1,36 @@
+import { BaseController } from "../../utilities/base_controller";
+import { EventBus } from "../../utilities/event_bus";
+import { useEventListeners } from "../../mixins/use_event_listener";
+import { getAllRadiosInGroup, isHTMLInputElement } from "../../utilities";
+import { signalConnectEvent, signalValueEvent } from "./events";
+import { useEventBus } from "../../mixins/use_event_bus";
+export class SignalInputController extends BaseController {
+    get _debounceTimeout() {
+        return this.hasDebounceIntervalValue ? this.debounceIntervalValue : 1;
+    }
+    get _name() {
+        return this.hasNameValue ? this.nameValue : this.element.name;
+    }
+    connect() {
+        useEventBus(this, signalConnectEvent(this._name), () => this.emitValue());
+        useEventListeners(this, this.el, ["input", "change"], this.emitValue, { debounce: this._debounceTimeout || undefined });
+        requestAnimationFrame(() => this.emitValue());
+    }
+    emitValue() {
+        var _a;
+        let value = this.el.value;
+        if (isHTMLInputElement(this.el) && this.el.type === "checkbox") {
+            value = this.el.checked ? "true" : "false";
+        }
+        else if (isHTMLInputElement(this.el) && this.el.type === "radio") {
+            let selectedValue = (_a = getAllRadiosInGroup(this.el).find(el => el.checked)) === null || _a === void 0 ? void 0 : _a.value;
+            value = selectedValue ? selectedValue : "";
+        }
+        this.dispatchEvent(this.el, signalValueEvent(this._name), { detail: { value } });
+        EventBus.emit(signalValueEvent(this._name), { element: this.el, value });
+    }
+}
+SignalInputController.values = {
+    name: String,
+    debounceInterval: Number,
+};

package/dist/controllers/signal/signal_visibility_controller.js

@@ -0,0 +1,44 @@
+import { BaseController } from "../../utilities/base_controller";
+import { useEventBus } from "../../mixins/use_event_bus";
+import { extractPredicates } from "./expressions";
+import { signalConnectEvent, signalValueEvent, signalVisibilityEvent } from "./events";
+import { EventBus } from "../../utilities";
+import { installClassMethods } from "../../mixins/install_class_methods";
+export class SignalVisibilityController extends BaseController {
+    get _predicates() {
+        return extractPredicates(this.showValue);
+    }
+    get defaultHideClasses() {
+        return ["hide"];
+    }
+    connect() {
+        installClassMethods(this);
+        EventBus.emit(signalConnectEvent(this.nameValue));
+        useEventBus(this, signalValueEvent(this.nameValue), this._onSignal);
+    }
+    _onSignal(payload) {
+        let value = payload.value;
+        if (this.showValue == "default") {
+            if (value == "") {
+                this.removeHideClasses(this.el);
+            }
+            else {
+                this.addHideClasses(this.el);
+            }
+            return;
+        }
+        if (this._predicates.every(predicate => predicate(value))) {
+            this.dispatchEvent(this.el, signalVisibilityEvent(this.nameValue, "show"), { detail: { predicate: this.showValue, value } });
+            this.removeHideClasses(this.el);
+        }
+        else {
+            this.dispatchEvent(this.el, signalVisibilityEvent(this.nameValue, "hide"), { detail: { predicate: this.showValue, value } });
+            this.addHideClasses(this.el);
+        }
+    }
+}
+SignalVisibilityController.values = {
+    name: String,
+    show: String,
+};
+SignalVisibilityController.classes = ['hide'];

package/dist/controllers/sticky_controller.js

@@ -0,0 +1,44 @@
+import { BaseController } from "../utilities/base_controller";
+import { useInjectedElement } from "../mixins/use_injected_html";
+export class StickyController extends BaseController {
+    constructor() {
+        super(...arguments);
+        this._magicElement = null;
+    }
+    get defaultStuckClasses() {
+        return ["stuck"];
+    }
+    get _mode() {
+        if (this.hasModeValue) {
+            if (!['top', 'bottom'].includes(this.modeValue)) {
+                throw new Error(`The modeValue provided '${this.modeValue}' is not one of the recognised configuration options`);
+            }
+            if (this.modeValue === 'top') {
+                return 'beforebegin';
+            }
+        }
+        return "afterend";
+    }
+    connect() {
+        this._magicElement = document.createElement("div");
+        useInjectedElement(this, this.el, this._mode, this._magicElement);
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.target !== this._magicElement) {
+                    return;
+                }
+                if (entry.intersectionRatio === 0) {
+                    this.addStuckClasses();
+                }
+                else if (entry.intersectionRatio === 1) {
+                    this.removeStuckClasses();
+                }
+            });
+        }, {
+            threshold: [0, 1],
+        });
+        observer.observe(this._magicElement);
+    }
+}
+StickyController.classes = ["stuck"];
+StickyController.values = { mode: String };

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

@@ -1,3 +1,2 @@
 export * from './table_sort_controller';
 export * from './table_truncate_controller';
-//# sourceMappingURL=index.d.ts.map