kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.23

package/components/dropdown/dropdown.js

@@ -0,0 +1,505 @@
+import { Utils } from '../../src/utils';
+import { Component } from '../../src/component';
+const _defaults = {
+    alignment: 'left',
+    autoFocus: true,
+    constrainWidth: true,
+    container: null,
+    coverTrigger: true,
+    closeOnClick: true,
+    hover: false,
+    inDuration: 150,
+    outDuration: 250,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    onItemClick: null
+};
+export class Dropdown extends Component {
+    static _dropdowns = [];
+    /** ID of the dropdown element. */
+    id;
+    /** The DOM element of the dropdown. */
+    dropdownEl;
+    /** If the dropdown is open. */
+    isOpen;
+    /** If the dropdown content is scrollable. */
+    isScrollable;
+    isTouchMoving;
+    /** The index of the item focused. */
+    focusedIndex;
+    filterQuery;
+    filterTimeout;
+    constructor(el, options) {
+        super(el, options, Dropdown);
+        this.el['M_Dropdown'] = this;
+        Dropdown._dropdowns.push(this);
+        this.id = Utils.getIdFromTrigger(el);
+        this.dropdownEl = document.getElementById(this.id);
+        this.options = {
+            ...Dropdown.defaults,
+            ...options
+        };
+        this.isOpen = false;
+        this.isScrollable = false;
+        this.isTouchMoving = false;
+        this.focusedIndex = -1;
+        this.filterQuery = [];
+        this.el.ariaExpanded = 'false';
+        // Move dropdown-content after dropdown-trigger
+        this._moveDropdownToElement();
+        this._makeDropdownFocusable();
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    /**
+     * Initializes instances of Dropdown.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options = {}) {
+        return super.init(els, options, Dropdown);
+    }
+    static getInstance(el) {
+        return el['M_Dropdown'];
+    }
+    destroy() {
+        this._resetDropdownStyles();
+        this._removeEventHandlers();
+        Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1);
+        this.el['M_Dropdown'] = undefined;
+    }
+    _setupEventHandlers() {
+        // Trigger keydown handler
+        this.el.addEventListener('keydown', this._handleTriggerKeydown);
+        // Item click handler
+        this.dropdownEl?.addEventListener('click', this._handleDropdownClick);
+        // Hover event handlers
+        if (this.options.hover) {
+            this.el.addEventListener('mouseenter', this._handleMouseEnter);
+            this.el.addEventListener('mouseleave', this._handleMouseLeave);
+            this.dropdownEl.addEventListener('mouseleave', this._handleMouseLeave);
+            // Click event handlers
+        }
+        else {
+            this.el.addEventListener('click', this._handleClick);
+        }
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('keydown', this._handleTriggerKeydown);
+        this.dropdownEl.removeEventListener('click', this._handleDropdownClick);
+        if (this.options.hover) {
+            this.el.removeEventListener('mouseenter', this._handleMouseEnter);
+            this.el.removeEventListener('mouseleave', this._handleMouseLeave);
+            this.dropdownEl.removeEventListener('mouseleave', this._handleMouseLeave);
+        }
+        else {
+            this.el.removeEventListener('click', this._handleClick);
+        }
+    }
+    _setupTemporaryEventHandlers() {
+        document.body.addEventListener('click', this._handleDocumentClick);
+        document.body.addEventListener('touchmove', this._handleDocumentTouchmove);
+        this.dropdownEl.addEventListener('keydown', this._handleDropdownKeydown);
+        window.addEventListener('resize', this._handleWindowResize);
+    }
+    _removeTemporaryEventHandlers() {
+        document.body.removeEventListener('click', this._handleDocumentClick);
+        document.body.removeEventListener('touchmove', this._handleDocumentTouchmove);
+        this.dropdownEl.removeEventListener('keydown', this._handleDropdownKeydown);
+        window.removeEventListener('resize', this._handleWindowResize);
+    }
+    _handleClick = (e) => {
+        e.preventDefault();
+        //this._moveDropdown((<HTMLElement>e.target).closest('li'));
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    };
+    _handleMouseEnter = () => {
+        //this._moveDropdown((<HTMLElement>e.target).closest('li'));
+        this.open();
+    };
+    _handleMouseLeave = (e) => {
+        const toEl = e.relatedTarget;
+        const leaveToDropdownContent = !!toEl.closest('.dropdown-content');
+        let leaveToActiveDropdownTrigger = false;
+        const closestTrigger = toEl.closest('.dropdown-trigger');
+        if (closestTrigger && !!closestTrigger['M_Dropdown'] && closestTrigger['M_Dropdown'].isOpen) {
+            leaveToActiveDropdownTrigger = true;
+        }
+        // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content
+        if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) {
+            this.close();
+        }
+    };
+    _handleDocumentClick = (e) => {
+        const target = e.target;
+        if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
+            // isTouchMoving to check if scrolling on mobile.
+            this.close();
+        }
+        else if (!target.closest('.dropdown-content') && !target.closest('.dropdown-trigger')) {
+            // Do this one frame later so that if the element clicked also triggers _handleClick
+            // For example, if a label for a select was clicked, that we don't close/open the dropdown
+            setTimeout(() => {
+                if (this.isOpen) {
+                    this.close();
+                }
+            }, 0);
+        }
+        this.isTouchMoving = false;
+    };
+    _handleTriggerKeydown = (e) => {
+        // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown
+        const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key);
+        if (arrowDownOrEnter && !this.isOpen) {
+            e.preventDefault();
+            this.open();
+        }
+    };
+    _handleDocumentTouchmove = (e) => {
+        const target = e.target;
+        if (target.closest('.dropdown-content')) {
+            this.isTouchMoving = true;
+        }
+    };
+    _handleDropdownClick = (e) => {
+        // onItemClick callback
+        if (typeof this.options.onItemClick === 'function') {
+            const itemEl = e.target.closest('li');
+            this.options.onItemClick.call(this, itemEl);
+        }
+    };
+    _handleDropdownKeydown = (e) => {
+        const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key);
+        if (Utils.keys.TAB.includes(e.key)) {
+            e.preventDefault();
+            this.close();
+        }
+        // Navigate down dropdown list
+        else if (arrowUpOrDown && this.isOpen) {
+            e.preventDefault();
+            const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
+            let newFocusedIndex = this.focusedIndex;
+            let hasFoundNewIndex = false;
+            do {
+                newFocusedIndex = newFocusedIndex + direction;
+                if (!!this.dropdownEl.children[newFocusedIndex] &&
+                    this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) {
+                    hasFoundNewIndex = true;
+                    break;
+                }
+            } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0);
+            if (hasFoundNewIndex) {
+                // Remove active class from old element
+                if (this.focusedIndex >= 0)
+                    this.dropdownEl.children[this.focusedIndex].classList.remove('active');
+                this.focusedIndex = newFocusedIndex;
+                this._focusFocusedItem();
+            }
+        }
+        // ENTER selects choice on focused item
+        else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) {
+            // Search for <a> and <button>
+            const focusedElement = this.dropdownEl.children[this.focusedIndex];
+            const activatableElement = focusedElement?.querySelector('a, button');
+            // Click a or button tag if exists, otherwise click li tag
+            if (!!activatableElement) {
+                activatableElement.click();
+            }
+            else if (!!focusedElement) {
+                if (focusedElement instanceof HTMLElement) {
+                    focusedElement.click();
+                }
+            }
+        }
+        // Close dropdown on ESC
+        else if (Utils.keys.ESC.includes(e.key) && this.isOpen) {
+            e.preventDefault();
+            this.close();
+        }
+        // CASE WHEN USER TYPE LTTERS
+        const keyText = e.key.toLowerCase();
+        const isLetter = /[a-zA-Z0-9-_]/.test(keyText);
+        const specialKeys = [
+            ...Utils.keys.ARROW_DOWN,
+            ...Utils.keys.ARROW_UP,
+            ...Utils.keys.ENTER,
+            ...Utils.keys.ESC,
+            ...Utils.keys.TAB
+        ];
+        if (isLetter && !specialKeys.includes(e.key)) {
+            this.filterQuery.push(keyText);
+            const string = this.filterQuery.join('');
+            const newOptionEl = Array.from(this.dropdownEl.querySelectorAll('li')).find((el) => el.innerText.toLowerCase().indexOf(string) === 0);
+            if (newOptionEl) {
+                this.focusedIndex = [...newOptionEl.parentNode.children].indexOf(newOptionEl);
+                this._focusFocusedItem();
+            }
+        }
+        this.filterTimeout = setTimeout(this._resetFilterQuery, 1000);
+    };
+    _handleWindowResize = () => {
+        // Only re-place the dropdown if it's still visible
+        // Accounts for elements hiding via media queries
+        if (this.el.offsetParent) {
+            this.recalculateDimensions();
+        }
+    };
+    _resetFilterQuery = () => {
+        this.filterQuery = [];
+    };
+    _resetDropdownStyles() {
+        this.dropdownEl.style.display = '';
+        this._resetDropdownPositioningStyles();
+        this.dropdownEl.style.transform = '';
+        this.dropdownEl.style.opacity = '';
+    }
+    _resetDropdownPositioningStyles() {
+        this.dropdownEl.style.width = '';
+        this.dropdownEl.style.height = '';
+        this.dropdownEl.style.left = '';
+        this.dropdownEl.style.top = '';
+        this.dropdownEl.style.transformOrigin = '';
+    }
+    _moveDropdownToElement(containerEl = null) {
+        if (this.options.container) {
+            this.options.container.append(this.dropdownEl);
+            return;
+        }
+        if (containerEl) {
+            if (!containerEl.contains(this.dropdownEl))
+                containerEl.append(this.dropdownEl);
+            return;
+        }
+        this.el.after(this.dropdownEl);
+    }
+    _makeDropdownFocusable() {
+        if (!this.dropdownEl)
+            return;
+        this.dropdownEl.popover = '';
+        // Needed for arrow key navigation
+        this.dropdownEl.tabIndex = 0;
+        // Only set tabindex if it hasn't been set by user
+        Array.from(this.dropdownEl.children).forEach((el) => {
+            if (!el.getAttribute('tabindex'))
+                el.setAttribute('tabindex', '0');
+        });
+    }
+    _focusFocusedItem() {
+        if (this.focusedIndex >= 0 &&
+            this.focusedIndex < this.dropdownEl.children.length &&
+            this.options.autoFocus) {
+            this.dropdownEl.children[this.focusedIndex].focus({
+                preventScroll: true
+            });
+            this.dropdownEl.children[this.focusedIndex].scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'nearest'
+            });
+        }
+    }
+    _getDropdownPosition(closestOverflowParent) {
+        // const offsetParentBRect = this.el.offsetParent.getBoundingClientRect();
+        const triggerBRect = this.el.getBoundingClientRect();
+        const dropdownBRect = this.dropdownEl.getBoundingClientRect();
+        let idealHeight = dropdownBRect.height;
+        let idealWidth = dropdownBRect.width;
+        let idealXPos = triggerBRect.left - dropdownBRect.left;
+        let idealYPos = triggerBRect.top - dropdownBRect.top;
+        const dropdownBounds = {
+            left: idealXPos,
+            top: idealYPos,
+            height: idealHeight,
+            width: idealWidth
+        };
+        const alignments = Utils.checkPossibleAlignments(this.el, closestOverflowParent, dropdownBounds, this.options.coverTrigger ? 0 : triggerBRect.height);
+        let verticalAlignment = 'top';
+        let horizontalAlignment = this.options.alignment;
+        idealYPos += this.options.coverTrigger ? 0 : triggerBRect.height;
+        // Reset isScrollable
+        this.isScrollable = false;
+        if (!alignments.top) {
+            if (alignments.bottom) {
+                verticalAlignment = 'bottom';
+                if (!this.options.coverTrigger) {
+                    idealYPos -= triggerBRect.height;
+                }
+            }
+            else {
+                this.isScrollable = true;
+                // Determine which side has most space and cutoff at correct height
+                idealHeight -= 20; // Add padding when cutoff
+                if (alignments.spaceOnTop > alignments.spaceOnBottom) {
+                    verticalAlignment = 'bottom';
+                    idealHeight += alignments.spaceOnTop;
+                    idealYPos -= this.options.coverTrigger
+                        ? alignments.spaceOnTop - 20
+                        : alignments.spaceOnTop - 20 + triggerBRect.height;
+                }
+                else {
+                    idealHeight += alignments.spaceOnBottom;
+                }
+            }
+        }
+        // If preferred horizontal alignment is possible
+        if (!alignments[horizontalAlignment]) {
+            const oppositeAlignment = horizontalAlignment === 'left' ? 'right' : 'left';
+            if (alignments[oppositeAlignment]) {
+                horizontalAlignment = oppositeAlignment;
+            }
+            else {
+                // Determine which side has most space and cutoff at correct height
+                if (alignments.spaceOnLeft > alignments.spaceOnRight) {
+                    horizontalAlignment = 'right';
+                    idealWidth += alignments.spaceOnLeft;
+                    idealXPos -= alignments.spaceOnLeft;
+                }
+                else {
+                    horizontalAlignment = 'left';
+                    idealWidth += alignments.spaceOnRight;
+                }
+            }
+        }
+        if (verticalAlignment === 'bottom') {
+            idealYPos =
+                idealYPos - dropdownBRect.height + (this.options.coverTrigger ? triggerBRect.height : 0);
+        }
+        if (horizontalAlignment === 'right') {
+            idealXPos = idealXPos - dropdownBRect.width + triggerBRect.width;
+        }
+        return {
+            x: idealXPos,
+            y: idealYPos,
+            verticalAlignment: verticalAlignment,
+            horizontalAlignment: horizontalAlignment,
+            height: idealHeight,
+            width: idealWidth
+        };
+    }
+    _animateIn() {
+        const duration = this.options.inDuration;
+        this.dropdownEl.style.transition = 'none';
+        // from
+        this.dropdownEl.style.opacity = '0';
+        this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+        setTimeout(() => {
+            // easeOutQuad (opacity) & easeOutQuint
+            this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+            // to
+            this.dropdownEl.style.opacity = '1';
+            this.dropdownEl.style.transform = 'scale(1, 1)';
+        }, 1);
+        setTimeout(() => {
+            if (this.options.autoFocus)
+                this.dropdownEl.focus();
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
+    }
+    _animateOut() {
+        const duration = this.options.outDuration;
+        // easeOutQuad (opacity) & easeOutQuint
+        this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+        // to
+        this.dropdownEl.style.opacity = '0';
+        this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+        setTimeout(() => {
+            this._resetDropdownStyles();
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    _getClosestAncestor(el, condition) {
+        let ancestor = el.parentNode;
+        while (ancestor !== null && ancestor !== document) {
+            if (condition(ancestor)) {
+                return ancestor;
+            }
+            ancestor = ancestor.parentElement;
+        }
+        return null;
+    }
+    _placeDropdown() {
+        // Container here will be closest ancestor with overflow: hidden
+        let closestOverflowParent = this._getClosestAncestor(this.dropdownEl, (ancestor) => {
+            return (!['HTML', 'BODY'].includes(ancestor.tagName) &&
+                getComputedStyle(ancestor).overflow !== 'visible');
+        });
+        // Fallback
+        if (!closestOverflowParent) {
+            closestOverflowParent = ((!!this.dropdownEl.offsetParent ? this.dropdownEl.offsetParent : this.dropdownEl.parentNode));
+        }
+        if (getComputedStyle(closestOverflowParent).position === 'static')
+            closestOverflowParent.style.position = 'relative';
+        //this._moveDropdown(closestOverflowParent);
+        // Set width before calculating positionInfo
+        const idealWidth = this.options.constrainWidth
+            ? this.el.getBoundingClientRect().width
+            : this.dropdownEl.getBoundingClientRect().width;
+        this.dropdownEl.style.width = idealWidth + 'px';
+        const positionInfo = this._getDropdownPosition(closestOverflowParent);
+        this.dropdownEl.style.left = positionInfo.x + 'px';
+        this.dropdownEl.style.top = positionInfo.y + 'px';
+        this.dropdownEl.style.height = positionInfo.height + 'px';
+        this.dropdownEl.style.width = positionInfo.width + 'px';
+        this.dropdownEl.style.transformOrigin = `${positionInfo.horizontalAlignment === 'left' ? '0' : '100%'} ${positionInfo.verticalAlignment === 'top' ? '0' : '100%'}`;
+    }
+    /**
+     * Open dropdown.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        // onOpenStart callback
+        if (typeof this.options.onOpenStart === 'function') {
+            this.options.onOpenStart.call(this, this.el);
+        }
+        // Reset styles
+        this._resetDropdownStyles();
+        this.dropdownEl.style.display = 'block';
+        this._placeDropdown();
+        this._animateIn();
+        // Do this one frame later so that we don't bind an event handler that's immediately
+        // called when the event bubbles up to the document and closes the dropdown
+        setTimeout(() => this._setupTemporaryEventHandlers(), 0);
+        this.el.ariaExpanded = 'true';
+    };
+    /**
+     * Close dropdown.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        // onCloseStart callback
+        if (typeof this.options.onCloseStart === 'function') {
+            this.options.onCloseStart.call(this, this.el);
+        }
+        this._animateOut();
+        this._removeTemporaryEventHandlers();
+        if (this.options.autoFocus) {
+            this.el.focus();
+        }
+        this.el.ariaExpanded = 'false';
+    };
+    /**
+     * While dropdown is open, you can recalculate its dimensions if its contents have changed.
+     */
+    recalculateDimensions = () => {
+        if (this.isOpen) {
+            this._resetDropdownPositioningStyles();
+            this._placeDropdown();
+        }
+    };
+}

package/components/file-input/file-input.js

@@ -0,0 +1,169 @@
+import { Component } from '../../src/component';
+import { loadPeer } from '../../src/peer-loader';
+const _defaults = {
+    plugins: []
+};
+// Each plugin needs its own literal `import('literal-string')` call (see
+// peer-loader.ts) so Vite/webpack/Rollup can statically discover it - a
+// generic specifier-driven loop can't produce that, hence one entry per
+// plugin instead of building the import call from PLUGIN_SPECS's string.
+const PLUGIN_LOADERS = {
+    'image-preview': {
+        specifier: 'filepond-plugin-image-preview',
+        globalName: 'FilePondPluginImagePreview',
+        importer: () => import('filepond-plugin-image-preview')
+    },
+    'file-validate-type': {
+        specifier: 'filepond-plugin-file-validate-type',
+        globalName: 'FilePondPluginFileValidateType',
+        importer: () => import('filepond-plugin-file-validate-type')
+    },
+    'image-exif-orientation': {
+        specifier: 'filepond-plugin-image-exif-orientation',
+        globalName: 'FilePondPluginImageExifOrientation',
+        importer: () => import('filepond-plugin-image-exif-orientation')
+    }
+};
+// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/src/Front/Library/Utility/Form/File.ts
+// Enhances the EXISTING `.file-field` structure in place - add
+// `data-file-picker="filepond"` (+ optional `data-file-plugins="a,b,c"`) to
+// an otherwise completely stock `.file-field`, nothing else about the
+// markup changes. FilePond.create() hides the native `<input type=file>`
+// and injects its own root as a *sibling*, it never removes anything from
+// the DOM, so the surrounding button/label/file-path-wrapper stay intact
+// at rest - only the interactive drop area swaps in visually.
+//
+// FilePond and its plugins are optional peerDependencies, loaded on demand
+// via peer-loader.
+export class FileInput extends Component {
+    pond;
+    ready;
+    _fileEl;
+    _pathEl;
+    constructor(el, options) {
+        super(el, options, FileInput);
+        this.el.M_FileInput = this;
+        const pluginsAttr = this.el.dataset.filePlugins;
+        this.options = {
+            ...FileInput.defaults,
+            plugins: pluginsAttr
+                ? pluginsAttr.split(',').map((p) => p.trim())
+                : FileInput.defaults.plugins,
+            ...options
+        };
+        this._fileEl = this.el.querySelector('input[type="file"]');
+        this._pathEl = this.el.querySelector('.file-path');
+        this.ready = this._setup();
+    }
+    static get defaults() {
+        return _defaults;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, FileInput);
+    }
+    static getInstance(el) {
+        return el.M_FileInput;
+    }
+    destroy() {
+        this.el.classList.remove('file-field-enhanced');
+        this.el.querySelector('.btn')?.classList.remove('hide');
+        this.el.querySelector('.file-path-wrapper')?.classList.remove('hide');
+        this.pond?.destroy();
+        this.el.M_FileInput = undefined;
+    }
+    /** Convenience wrapper over the underlying FilePond instance's own getFiles(). */
+    getFiles() {
+        return this.pond?.getFiles() ?? [];
+    }
+    async _setup() {
+        if (!this._fileEl) {
+            console.error(Error('.file-field enhanced with data-file-picker="filepond" needs an input[type=file]'));
+            return;
+        }
+        const FilePond = await loadPeer({
+            specifier: 'filepond',
+            globalName: 'FilePond',
+            feature: 'File input (FilePond) enhancement',
+            cdnHint: '<link rel="stylesheet" href="path/to/filepond.min.css">\n' +
+                '    <script src="path/to/filepond.min.js"></script>\n' +
+                '    (self-hosted - copy from node_modules/filepond/dist/, or a CDN of your choice)'
+        }, () => import('filepond'));
+        const pluginNames = new Set(this.options.plugins);
+        // file-validate-type is auto-registered whenever the input restricts
+        // `accept`, matching CrazyPHP's own convention, even if the consumer
+        // didn't list it explicitly in data-file-plugins.
+        if (this._fileEl.accept)
+            pluginNames.add('file-validate-type');
+        for (const name of pluginNames) {
+            const loader = PLUGIN_LOADERS[name];
+            if (!loader)
+                continue;
+            const plugin = await loadPeer({
+                specifier: loader.specifier,
+                globalName: loader.globalName,
+                feature: `File input FilePond plugin "${name}"`,
+                cdnHint: `<script src="path/to/${loader.specifier}.min.js"></script> (self-hosted - copy from node_modules/${loader.specifier}/dist/, or a CDN of your choice)`
+            }, loader.importer);
+            FilePond.registerPlugin(plugin);
+        }
+        const pondOptions = {};
+        const { dataset } = this._fileEl;
+        const readBoolean = (value) => value !== 'false';
+        pondOptions.allowMultiple = this._fileEl.multiple;
+        pondOptions.disabled = this._fileEl.disabled;
+        if (dataset.defaultFile)
+            pondOptions.files = [dataset.defaultFile];
+        if (dataset.maxFiles)
+            pondOptions.maxFiles = Number(dataset.maxFiles);
+        if (this._fileEl.multiple)
+            pondOptions.allowReorder = readBoolean(dataset.allowReorder);
+        if (dataset.labelIdle)
+            pondOptions.labelIdle = dataset.labelIdle;
+        if (dataset.instantUpload !== undefined)
+            pondOptions.instantUpload = readBoolean(dataset.instantUpload);
+        if (dataset.dropValidation !== undefined)
+            pondOptions.dropValidation = readBoolean(dataset.dropValidation);
+        if (dataset.imagePreviewHeight)
+            pondOptions.imagePreviewHeight = Number(dataset.imagePreviewHeight);
+        if (dataset.stylePanelLayout) {
+            pondOptions.stylePanelLayout = dataset.stylePanelLayout;
+        }
+        if (dataset.stylePanelAspectRatio)
+            pondOptions.stylePanelAspectRatio = dataset.stylePanelAspectRatio;
+        this.pond = FilePond.create(this._fileEl, pondOptions);
+        // FilePond inserts its own root as a *sibling* of the input it was
+        // given - but that input lives inside .btn (stock .file-field markup
+        // is `.btn > input[type=file]`), so the fresh FilePond root lands
+        // inside .btn too. Move it back out to be a direct child of .file-field
+        // itself before hiding .btn, or hiding .btn would take the whole
+        // FilePond widget down with it.
+        const pondRoot = this.pond.element;
+        if (pondRoot) {
+            this.el.appendChild(pondRoot);
+            const fileHeight = Number(dataset.fileHeight);
+            if (Number.isFinite(fileHeight) && fileHeight > 0) {
+                pondRoot.style.height = `${fileHeight}px`;
+            }
+            // Matches CrazyPHP's own File.ts behavior - FilePond's free-tier
+            // "Powered by FilePond" credit link doesn't fit a themed, branded UI.
+            pondRoot.querySelectorAll('.filepond--credits').forEach((el) => el.remove());
+        }
+        // Everything from the stock .file-field is now redundant - FilePond's
+        // own drop zone is the entire upload affordance. Hidden, not removed,
+        // so the .file-field structure this component promises to preserve is
+        // still there, just not shown alongside FilePond's widget.
+        this.el.classList.add('file-field-enhanced');
+        this.el.querySelector('.btn')?.classList.add('hide');
+        this.el.querySelector('.file-path-wrapper')?.classList.add('hide');
+        this._syncPathInput();
+        this.pond.on('updatefiles', this._syncPathInput);
+    }
+    _syncPathInput = () => {
+        if (!this._pathEl || !this.pond)
+            return;
+        this._pathEl.value = this.pond
+            .getFiles()
+            .map((f) => f.filename)
+            .join(', ');
+    };
+}