@dropi/ui 0.1.55 → 999.0.0

package/dist/collection/components/dropi-modal/dropi-modal.js

@@ -1,700 +0,0 @@
-import { h, Build } from "@stencil/core";
-/**
- * @component dropi-modal
- * Modal/dialog with backdrop, close button, and header/content/footer slots.
- * Slots: (default) body, "header" custom header, "footer" actions.
- */
-export class DropiModal {
-    visible = false;
-    header = null;
-    showCloseIcon = true;
-    dismissable = true;
-    dismissableMask = true;
-    dismissible = true;
-    closeOnEscape = true;
-    modal = true;
-    closable = true;
-    blockScroll = true;
-    showHeader = true;
-    showFooter = true;
-    position = 'center';
-    size = 'm';
-    styleClass = null;
-    maxWidth = null;
-    /** Auto-manage z-index stack (matches Angular `autoZIndex`) */
-    autoZIndex = true;
-    /** Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) */
-    baseZIndex = 1100;
-    /** CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) */
-    transitionOptions = '0.15s';
-    /** Enable a before-close hook (matches Angular `enableBeforeClose`) */
-    enableBeforeClose = false;
-    /** No-op — kept for API parity with Angular (matches Angular `draggable`) */
-    isDraggable = false;
-    /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
-    resizable = false;
-    dropiShow;
-    dropiHide;
-    dropiVisibleChange;
-    isOpen = false;
-    isClosing = false;
-    mounted = false;
-    closeTimer = null;
-    keyHandler = null;
-    canDismiss = false;
-    visibleChanged(val) {
-        if (val) {
-            this.openModal();
-        }
-        else {
-            this.startClose();
-        }
-    }
-    componentDidLoad() {
-        if (this.visible)
-            this.openModal();
-    }
-    disconnectedCallback() {
-        this.removeKeyHandler();
-        if (this.closeTimer)
-            clearTimeout(this.closeTimer);
-        if (typeof document !== 'undefined') {
-            document.body.classList.remove('dropi-modal-open');
-        }
-    }
-    async dismiss() {
-        if (this.visible) {
-            this.visible = false;
-            this.dropiVisibleChange.emit(false);
-        }
-        else {
-            this.startClose();
-        }
-    }
-    async openModalExternally() {
-        this.visible = true;
-        this.dropiVisibleChange.emit(true);
-    }
-    openModal() {
-        if (this.closeTimer) {
-            clearTimeout(this.closeTimer);
-            this.closeTimer = null;
-        }
-        // Safety: ensure it's not already open or in a closing state
-        this.isClosing = false;
-        this.mounted = true;
-        requestAnimationFrame(() => requestAnimationFrame(() => {
-            this.isOpen = true;
-            this.dropiShow.emit();
-        }));
-        this.addKeyHandler();
-        this.canDismiss = false;
-        setTimeout(() => { this.canDismiss = true; }, 300);
-        if ((this.modal ?? true) && Build.isBrowser && document.body) {
-            document.body.classList.add('dropi-modal-open');
-        }
-    }
-    startClose() {
-        if (this.isClosing || !this.mounted)
-            return;
-        this.isClosing = true;
-        this.isOpen = false;
-        this.removeKeyHandler();
-        if (this.closeTimer)
-            clearTimeout(this.closeTimer);
-        this.closeTimer = setTimeout(() => {
-            this.mounted = false;
-            this.isClosing = false;
-            this.closeTimer = null;
-            if ((this.modal ?? true) && Build.isBrowser && document.body) {
-                document.body.classList.remove('dropi-modal-open');
-            }
-            this.dropiHide.emit();
-        }, 200);
-    }
-    addKeyHandler() {
-        if (!this.closeOnEscape)
-            return;
-        this.keyHandler = (e) => {
-            if (e.key === 'Escape' && this.visible && this.dismissable && this.canDismiss)
-                this.dismiss();
-        };
-        document.addEventListener('keydown', this.keyHandler);
-    }
-    removeKeyHandler() {
-        if (this.keyHandler) {
-            document.removeEventListener('keydown', this.keyHandler);
-            this.keyHandler = null;
-        }
-    }
-    render() {
-        return (h("div", { key: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && h("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), h("div", { key: '63906a7ed0432879c3256a659ddd9773099244bc', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true", style: this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {} }, this.showHeader && (h("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && h("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), h("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (h("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, h("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && h("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, h("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
-    }
-    static get is() { return "dropi-modal"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-modal.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-modal.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "visible": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "visible",
-                "defaultValue": "false"
-            },
-            "header": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "header",
-                "defaultValue": "null"
-            },
-            "showCloseIcon": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-close-icon",
-                "defaultValue": "true"
-            },
-            "dismissable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "dismissable",
-                "defaultValue": "true"
-            },
-            "dismissableMask": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "dismissable-mask",
-                "defaultValue": "true"
-            },
-            "dismissible": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "dismissible",
-                "defaultValue": "true"
-            },
-            "closeOnEscape": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "close-on-escape",
-                "defaultValue": "true"
-            },
-            "modal": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "modal",
-                "defaultValue": "true"
-            },
-            "closable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "closable",
-                "defaultValue": "true"
-            },
-            "blockScroll": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "block-scroll",
-                "defaultValue": "true"
-            },
-            "showHeader": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-header",
-                "defaultValue": "true"
-            },
-            "showFooter": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-footer",
-                "defaultValue": "true"
-            },
-            "position": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ModalPosition",
-                    "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\"",
-                    "references": {
-                        "ModalPosition": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-modal/dropi-modal.tsx",
-                            "id": "src/components/dropi-modal/dropi-modal.tsx::ModalPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "position",
-                "defaultValue": "'center'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ModalSize",
-                    "resolved": "\"drawer-l\" | \"drawer-m\" | \"drawer-s\" | \"drawer-xxl\" | \"full\" | \"l\" | \"m\" | \"s\" | \"sidebar-half\" | \"xs\" | \"xxl\"",
-                    "references": {
-                        "ModalSize": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-modal/dropi-modal.tsx",
-                            "id": "src/components/dropi-modal/dropi-modal.tsx::ModalSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'m'"
-            },
-            "styleClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "style-class",
-                "defaultValue": "null"
-            },
-            "maxWidth": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-width",
-                "defaultValue": "null"
-            },
-            "autoZIndex": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Auto-manage z-index stack (matches Angular `autoZIndex`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "auto-z-index",
-                "defaultValue": "true"
-            },
-            "baseZIndex": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Base z-index value when autoZIndex is false (matches Angular `baseZIndex`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "base-z-index",
-                "defaultValue": "1100"
-            },
-            "transitionOptions": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "transition-options",
-                "defaultValue": "'0.15s'"
-            },
-            "enableBeforeClose": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Enable a before-close hook (matches Angular `enableBeforeClose`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "enable-before-close",
-                "defaultValue": "false"
-            },
-            "isDraggable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "No-op \u2014 kept for API parity with Angular (matches Angular `draggable`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-draggable",
-                "defaultValue": "false"
-            },
-            "resizable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "No-op \u2014 kept for API parity with Angular (matches Angular `resizable`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "resizable",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isOpen": {},
-            "isClosing": {},
-            "mounted": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dropiShow",
-                "name": "dropiShow",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiHide",
-                "name": "dropiHide",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiVisibleChange",
-                "name": "dropiVisibleChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "dismiss": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "openModalExternally": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "visible",
-                "methodName": "visibleChanged"
-            }];
-    }
-}