@dropi/ui 0.1.16 → 0.1.17

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

@@ -0,0 +1,406 @@
+import { h } 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 = '';
+    showCloseIcon = true;
+    dismissable = true;
+    closeOnEscape = true;
+    modal = true;
+    showHeader = true;
+    position = 'center';
+    size = 'm';
+    dropiShow;
+    dropiHide;
+    visibleChange;
+    isOpen = false;
+    isClosing = false;
+    mounted = false;
+    closeTimer = null;
+    keyHandler = null;
+    visibleChanged(val) {
+        val ? this.openModal() : this.startClose();
+    }
+    componentDidLoad() {
+        if (this.visible)
+            this.openModal();
+    }
+    disconnectedCallback() {
+        this.removeKeyHandler();
+        if (this.closeTimer)
+            clearTimeout(this.closeTimer);
+        document.body.style.overflow = '';
+    }
+    async hide() {
+        this.visible = false;
+        this.visibleChange.emit(false);
+        this.startClose();
+    }
+    async show() {
+        this.visible = true;
+        this.visibleChange.emit(true);
+        this.openModal();
+    }
+    openModal() {
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+        this.mounted = true;
+        this.isClosing = false;
+        this.isOpen = false;
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+            this.isOpen = true;
+            this.dropiShow.emit();
+        }));
+        this.addKeyHandler();
+        if (this.modal)
+            document.body.style.overflow = 'hidden';
+    }
+    startClose() {
+        if (this.isClosing)
+            return;
+        this.isClosing = true;
+        this.isOpen = false;
+        this.removeKeyHandler();
+        if (this.closeTimer)
+            clearTimeout(this.closeTimer);
+        this.closeTimer = setTimeout(() => {
+            this.mounted = false;
+            this.isClosing = false;
+            document.body.style.overflow = '';
+            this.dropiHide.emit();
+        }, 200);
+    }
+    addKeyHandler() {
+        if (!this.closeOnEscape)
+            return;
+        this.keyHandler = (e) => {
+            if (e.key === 'Escape' && this.visible && this.dismissable)
+                this.hide();
+        };
+        document.addEventListener('keydown', this.keyHandler);
+    }
+    removeKeyHandler() {
+        if (this.keyHandler) {
+            document.removeEventListener('keydown', this.keyHandler);
+            this.keyHandler = null;
+        }
+    }
+    render() {
+        if (!this.mounted)
+            return null;
+        return (h("div", { class: { 'modal-root': true, [`modal-root--${this.position}`]: true, 'modal-root--open': this.isOpen, 'modal-root--closing': this.isClosing } }, this.modal && h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { class: { 'modal-panel': true, [`size-${this.size}`]: !!this.size }, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { class: "modal-header" }, this.header && h("span", { class: "modal-title" }, this.header), h("slot", { name: "header" }), this.showCloseIcon && (h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Gray-Gray-400" }))))), h("div", { class: "modal-content" }, h("slot", null)), h("div", { class: "modal-footer" }, h("slot", { 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",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header",
+                "defaultValue": "''"
+            },
+            "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"
+            },
+            "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"
+            },
+            "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"
+            },
+            "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\" | \"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'"
+            }
+        };
+    }
+    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": "visibleChange",
+                "name": "visibleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "show": {
+                "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"
+            }];
+    }
+}

package/dist/collection/components/dropi-paginator/dropi-paginator.css

@@ -0,0 +1,100 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.paginator {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--Size-4, 16px);
+  flex-wrap: wrap;
+}
+
+.paginator-pages {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+}
+
+.paginator-btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 var(--Size-2, 8px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-1, 4px);
+  background: var(--Neutral-White, #fff);
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.paginator-btn:hover:not(:disabled) {
+  background: var(--Gray-Gray-50, #f7f8fa);
+  border-color: var(--Gray-Gray-300, #a3abbf);
+}
+
+.paginator-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.paginator-btn--active {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border-color: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #fff);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.paginator-btn--active:hover {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border-color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.paginator-btn--arrow {
+  border-color: transparent;
+  background: transparent;
+}
+
+.paginator-btn--arrow:hover:not(:disabled) {
+  background: var(--Gray-Gray-50, #f7f8fa);
+  border-color: var(--Gray-Gray-100, #e6eaf2);
+}
+
+.paginator-ellipsis {
+  color: var(--Gray-Gray-400, #858ea6);
+  padding: 0 4px;
+  font-size: var(--font-size-s, 12px);
+  display: flex;
+  align-items: center;
+}
+
+.paginator-size {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+}
+
+.paginator-size-label {
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-500, #69738c);
+}
+
+.paginator-size-select {
+  height: 32px;
+  padding: 0 var(--Size-2, 8px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-1, 4px);
+  background: var(--Neutral-White, #fff);
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+}