@stackoverflow/stacks 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/js/stacks.js

@@ -51,7 +51,6 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   BannerController: () => (/* reexport */ BannerController),
   BasePopoverController: () => (/* reexport */ BasePopoverController),
-  ExpandableController: () => (/* reexport */ ExpandableController),
   ModalController: () => (/* reexport */ ModalController),
   PopoverController: () => (/* reexport */ PopoverController),
   StacksApplication: () => (/* reexport */ StacksApplication),
@@ -60,7 +59,6 @@ __webpack_require__.d(__webpack_exports__, {
   TableController: () => (/* reexport */ TableController),
   ToastController: () => (/* reexport */ ToastController),
   TooltipController: () => (/* reexport */ TooltipController),
-  UploaderController: () => (/* reexport */ UploaderController),
   addController: () => (/* reexport */ addController),
   application: () => (/* reexport */ application),
   attachPopover: () => (/* reexport */ attachPopover),
@@ -2832,200 +2830,6 @@ function toggleBanner(element, show) {
     show ? controller.show() : controller.hide();
 }
 
-;// ./lib/components/expandable/expandable.ts
-
-// Radio buttons only trigger a change event when they're *checked*, but not when
-// they're *unchecked*. Therefore, if we have an active `s-expandable-control` in
-// the document, we listen for change events on *all* radio buttons and find any
-// other radio buttons in the same `name` group, triggering a custom event on all
-// of them so the controller can re-evaluate.
-//
-// We're keeping a count of how many of these controllers are connected to the DOM,
-// so only have this global listener when we actually need it.
-const RADIO_OFF_EVENT = "s-expandable-control:radio-off";
-function globalChangeListener(e) {
-    const target = e.target;
-    if (!(target instanceof HTMLInputElement) ||
-        target.nodeName !== "INPUT" ||
-        target.type !== "radio") {
-        return;
-    }
-    document
-        .querySelectorAll('input[type="radio"][name="' + target.name + '"]')
-        .forEach(function (other) {
-        if (other === e.target) {
-            return;
-        }
-        let customEvent;
-        try {
-            customEvent = new Event(RADIO_OFF_EVENT);
-        }
-        catch (_a) {
-            // Internet Explorer
-            customEvent = document.createEvent("Event");
-            customEvent.initEvent(RADIO_OFF_EVENT, true, true);
-        }
-        other.dispatchEvent(customEvent);
-    });
-}
-let refCount = 0;
-function globalChangeListenerRequired(required) {
-    if (required) {
-        refCount++;
-        if (refCount === 1) {
-            document.body.addEventListener("change", globalChangeListener);
-        }
-    }
-    else {
-        refCount--;
-        if (refCount === 0) {
-            document.body.removeEventListener("change", globalChangeListener);
-        }
-    }
-}
-class ExpandableController extends StacksController {
-    constructor() {
-        super(...arguments);
-        this.lastKeydownClickTimestamp = 0;
-    }
-    initialize() {
-        if (this.element.nodeName === "INPUT" &&
-            ["radio", "checkbox"].indexOf(this.element.type) >= 0) {
-            this.isCollapsed = this._isCollapsedForCheckable.bind(this);
-            this.events = ["change", RADIO_OFF_EVENT];
-            this.isCheckable = true;
-            this.isRadio = this.element.type === "radio";
-        }
-        else {
-            this.isCollapsed = this._isCollapsedForClickable.bind(this);
-            this.events = ["click", "keydown"];
-        }
-        this.listener = this.listener.bind(this);
-    }
-    // for non-checkable elements, the initial source of truth is the collapsed/expanded
-    // state of the controlled element (unless the element doesn't exist)
-    _isCollapsedForClickable() {
-        const cc = this.controlledExpandables;
-        // the element is considered collapsed if *any* target element is collapsed
-        return cc.length > 0
-            ? !cc.every((element) => element.classList.contains("is-expanded"))
-            : this.element.getAttribute("aria-expanded") === "false";
-    }
-    // for checkable elements, the initial source of truth is the checked state
-    _isCollapsedForCheckable() {
-        return !this.element.checked;
-    }
-    get controlledExpandables() {
-        const attr = this.element.getAttribute("aria-controls");
-        if (!attr) {
-            throw `[aria-controls="targetId1 ... targetIdN"] attribute required`;
-        }
-        const result = attr
-            .split(/\s+/g)
-            .map((s) => document.getElementById(s))
-            .filter((e) => !!e);
-        if (!result.length) {
-            throw "couldn't find controls";
-        }
-        return result;
-    }
-    _dispatchShowHideEvent(isShow) {
-        this.triggerEvent(isShow ? "show" : "hide");
-    }
-    _toggleClass(doAdd) {
-        if (!this.data.has("toggle-class")) {
-            return;
-        }
-        const cl = this.element.classList;
-        const toggleClass = this.data.get("toggle-class");
-        if (!toggleClass) {
-            throw "couldn't find toggle class";
-        }
-        toggleClass.split(/\s+/).forEach(function (cls) {
-            cl.toggle(cls, !!doAdd);
-        });
-    }
-    listener(e) {
-        let newCollapsed;
-        if (this.isCheckable) {
-            newCollapsed = !this.element.checked;
-        }
-        else {
-            if (e.type == "keydown" &&
-                e instanceof KeyboardEvent &&
-                e.keyCode != 13 &&
-                e.keyCode != 32) {
-                return;
-            }
-            if (e.target !== e.currentTarget &&
-                ["A", "BUTTON"].indexOf(e.target.nodeName) >= 0) {
-                return;
-            }
-            e.preventDefault();
-            // Prevent "click" events from toggling the expandable within 300ms of "keydown".
-            // e.preventDefault() should have done the same, but https://bugzilla.mozilla.org/show_bug.cgi?id=1487102
-            // doesn't guarantee it.
-            if (e.type == "keydown") {
-                this.lastKeydownClickTimestamp = Date.now();
-            }
-            else if (e.type == "click" &&
-                Date.now() - this.lastKeydownClickTimestamp < 300) {
-                return;
-            }
-            newCollapsed =
-                this.element.getAttribute("aria-expanded") === "true";
-            if (e.type === "click") {
-                this.element.blur();
-            }
-        }
-        this.element.setAttribute("aria-expanded", newCollapsed ? "false" : "true");
-        for (const controlledElement of this.controlledExpandables) {
-            controlledElement.classList.toggle("is-expanded", !newCollapsed);
-        }
-        this._dispatchShowHideEvent(!newCollapsed);
-        this._toggleClass(!newCollapsed);
-    }
-    connect() {
-        this.events.forEach((e) => {
-            this.element.addEventListener(e, this.listener.bind(this));
-        }, this);
-        if (this.isRadio) {
-            globalChangeListenerRequired(true);
-        }
-        // synchronize state -- in all cases, this means setting the correct `aria-expanded`
-        // attribute; for checkable controls this also means setting the `is-collapsed` class.
-        // Note: aria-expanded is currently an invalid attribute on radio elements
-        // Support for aria-expanded is being debated by the W3C https://github.com/w3c/aria/issues/1404 as recently as June 2022
-        if (!this.isRadio) {
-            this.element.setAttribute("aria-expanded", this.isCollapsed() ? "false" : "true");
-        }
-        if (this.isCheckable) {
-            const cc = this.controlledExpandables;
-            if (cc.length) {
-                const expected = !this.isCollapsed();
-                // if any element does not match the expected state, set them all to the expected state
-                if (cc.some((element) => element.classList.contains("is-expanded") !==
-                    expected)) {
-                    for (const controlledElement of this
-                        .controlledExpandables) {
-                        controlledElement.classList.toggle("is-expanded", expected);
-                    }
-                    this._dispatchShowHideEvent(expected);
-                    this._toggleClass(expected);
-                }
-            }
-        }
-    }
-    disconnect() {
-        this.events.forEach((e) => {
-            this.element.removeEventListener(e, this.listener.bind(this));
-        }, this);
-        if (this.isRadio) {
-            globalChangeListenerRequired(false);
-        }
-    }
-}
-
 ;// ./lib/components/modal/modal.ts
 
 class ModalController extends StacksController {
@@ -6620,170 +6424,6 @@ function applyOptionsAndTitleAttributes(element, options) {
     }
 }
 
-;// ./lib/components/uploader/uploader.ts
-
-class UploaderController extends StacksController {
-    connect() {
-        super.connect();
-        this.boundDragEnter = this.handleUploaderActive.bind(this, true);
-        this.boundDragLeave = this.handleUploaderActive.bind(this, false);
-        this.inputTarget.addEventListener("dragenter", this.boundDragEnter);
-        this.inputTarget.addEventListener("dragleave", this.boundDragLeave);
-    }
-    disconnect() {
-        this.inputTarget.removeEventListener("dragenter", this.boundDragEnter);
-        this.inputTarget.removeEventListener("dragleave", this.boundDragLeave);
-        super.disconnect();
-    }
-    /**
-     * Handles rendering the file preview state on input change
-     */
-    handleInput() {
-        this.previewsTarget.innerHTML = "";
-        if (!this.inputTarget.files) {
-            return;
-        }
-        const count = this.inputTarget.files.length;
-        this.getDataURLs(this.inputTarget.files, UploaderController.FILE_DISPLAY_LIMIT)
-            .then((res) => {
-            this.handleVisible(true);
-            const hasMultipleFiles = res.length > 1;
-            if (hasMultipleFiles) {
-                const headingElement = document.createElement("div");
-                headingElement.classList.add("s-uploader--previews-heading");
-                headingElement.innerText =
-                    res.length < count
-                        ? `Showing ${res.length} of ${count} files`
-                        : `${count} items`;
-                this.previewsTarget.appendChild(headingElement);
-                this.previewsTarget.classList.add("has-multiple");
-            }
-            else {
-                this.previewsTarget.classList.remove("has-multiple");
-            }
-            res.forEach((file) => this.addFilePreview(file));
-            this.handleUploaderActive(true);
-        })
-            // TODO consider rendering an error message
-            .catch(() => null);
-    }
-    /**
-     * Resets the Uploader to initial state
-     */
-    reset() {
-        this.inputTarget.value = "";
-        this.previewsTarget.innerHTML = "";
-        this.handleVisible(false);
-    }
-    /**
-     * Set hide/show and disabled state on elements depending on preview state
-     * @param  {boolean} shouldPreview - Uploader is entering a preview state
-     */
-    handleVisible(shouldPreview) {
-        const { scope } = this.targets;
-        const hideElements = scope.findAllElements("[data-s-uploader-hide-on-input]");
-        const showElements = scope.findAllElements("[data-s-uploader-show-on-input]");
-        const enableElements = scope.findAllElements("[data-s-uploader-enable-on-input]");
-        if (shouldPreview) {
-            hideElements.forEach((el) => {
-                el.classList.add("d-none");
-            });
-            showElements.forEach((el) => {
-                el.classList.remove("d-none");
-            });
-            enableElements.forEach((el) => {
-                el.removeAttribute("disabled");
-            });
-        }
-        else {
-            hideElements.forEach((el) => {
-                el.classList.remove("d-none");
-            });
-            showElements.forEach((el) => {
-                el.classList.add("d-none");
-            });
-            enableElements.forEach((el) => {
-                el.setAttribute("disabled", "true");
-            });
-            this.handleUploaderActive(false);
-        }
-    }
-    /**
-     * Adds a DOM element to preview a selected file
-     * @param  {FilePreview} file
-     */
-    addFilePreview(file) {
-        if (!file) {
-            return;
-        }
-        const previewElement = document.createElement("div");
-        let thumbElement;
-        if (file.type.match("image/*") && file.data) {
-            thumbElement = document.createElement("img");
-            thumbElement.src = file.data.toString();
-            thumbElement.alt = file.name;
-        }
-        else {
-            thumbElement = document.createElement("div");
-            thumbElement.innerText = file.name;
-        }
-        thumbElement.classList.add("s-uploader--preview-thumbnail");
-        previewElement.appendChild(thumbElement);
-        previewElement.classList.add("s-uploader--preview");
-        previewElement.setAttribute("data-filename", file.name);
-        this.previewsTarget.appendChild(previewElement);
-    }
-    /**
-     * Toggles display and disabled state for select elements on valid input
-     * @param  {boolean} active - Uploader is in active state (typically on 'dragenter')
-     */
-    handleUploaderActive(active) {
-        this.uploaderTarget.classList.toggle("is-active", active);
-    }
-    /**
-     * Converts the file data into a data URL
-     * @param  {File} file
-     * @returns an object containing a FilePreview object
-     */
-    fileToDataURL(file) {
-        const reader = new FileReader();
-        const { name, size, type } = file;
-        if (size < UploaderController.MAX_FILE_SIZE &&
-            type.indexOf("image") > -1) {
-            return new Promise((resolve, reject) => {
-                reader.onload = (evt) => {
-                    var _a;
-                    const res = (_a = evt === null || evt === void 0 ? void 0 : evt.target) === null || _a === void 0 ? void 0 : _a.result;
-                    if (res) {
-                        resolve({ data: res, name, type });
-                    }
-                    else {
-                        reject();
-                    }
-                };
-                reader.readAsDataURL(file);
-            });
-        }
-        else {
-            return Promise.resolve({ name, type });
-        }
-    }
-    /**
-     * Gets an array of FilePreviews from a FileList
-     * @param  {FileList|[]} files
-     * @returns an array of FilePreview objects from a FileList
-     */
-    getDataURLs(files, limit) {
-        const promises = Array.from(files)
-            .slice(0, Math.min(limit, files.length))
-            .map((f) => this.fileToDataURL(f));
-        return Promise.all(promises);
-    }
-}
-UploaderController.targets = ["input", "previews", "uploader"];
-UploaderController.FILE_DISPLAY_LIMIT = 10;
-UploaderController.MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
-
 ;// ./lib/controllers.ts
 // export all controllers *with helpers* so they can be bulk re-exported by the package entry point
 
@@ -6794,22 +6434,18 @@ UploaderController.MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
 
 
 
-
-
 ;// ./lib/index.ts
 
 
 
 // register all built-in controllers
 application.register("s-banner", BannerController);
-application.register("s-expandable-control", ExpandableController);
 application.register("s-modal", ModalController);
 application.register("s-toast", ToastController);
 application.register("s-navigation-tablist", TabListController);
 application.register("s-popover", PopoverController);
 application.register("s-table", TableController);
 application.register("s-tooltip", TooltipController);
-application.register("s-uploader", UploaderController);
 // finalize the application to guard our controller namespace
 StacksApplication.finalize();
 // export all controllers w/ helpers