@dropi/ui 0.1.19 → 0.1.21

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

@@ -6,16 +6,35 @@ import { h } from "@stencil/core";
  */
 export class DropiModal {
     visible = false;
-    header = '';
+    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';
-    dropiShow;
-    dropiHide;
+    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`) */
+    draggable = false;
+    /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
+    resizable = false;
+    onShow;
+    onHide;
     visibleChange;
     isOpen = false;
     isClosing = false;
@@ -55,11 +74,12 @@ export class DropiModal {
         this.isOpen = false;
         requestAnimationFrame(() => requestAnimationFrame(() => {
             this.isOpen = true;
-            this.dropiShow.emit();
+            this.onShow.emit();
         }));
         this.addKeyHandler();
-        if (this.modal)
-            document.body.style.overflow = 'hidden';
+        if (this.modal && document.body && document.body.style) {
+            document.body.style.setProperty('overflow', 'hidden');
+        }
     }
     startClose() {
         if (this.isClosing)
@@ -72,8 +92,10 @@ export class DropiModal {
         this.closeTimer = setTimeout(() => {
             this.mounted = false;
             this.isClosing = false;
-            document.body.style.overflow = '';
-            this.dropiHide.emit();
+            if (document.body && document.body.style) {
+                document.body.style.setProperty('overflow', '');
+            }
+            this.onHide.emit();
         }, 200);
     }
     addKeyHandler() {
@@ -94,7 +116,7 @@ export class DropiModal {
     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" })))));
+        return (h("div", { class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, this.modal && h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { class: `modal-panel size-${this.size || 'm'}`, 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" }, "\u00D7")))), h("div", { class: "modal-content" }, h("slot", null)), this.showFooter && h("div", { class: "modal-footer" }, h("slot", { name: "footer" })))));
     }
     static get is() { return "dropi-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -134,7 +156,7 @@ export class DropiModal {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
+                    "original": "string | null",
                     "resolved": "string",
                     "references": {}
                 },
@@ -148,7 +170,7 @@ export class DropiModal {
                 "setter": false,
                 "reflect": false,
                 "attribute": "header",
-                "defaultValue": "''"
+                "defaultValue": "null"
             },
             "showCloseIcon": {
                 "type": "boolean",
@@ -190,6 +212,46 @@ export class DropiModal {
                 "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,
@@ -230,6 +292,46 @@ export class DropiModal {
                 "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,
@@ -250,6 +352,26 @@ export class DropiModal {
                 "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,
@@ -301,6 +423,166 @@ export class DropiModal {
                 "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"
+            },
+            "draggable": {
+                "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": "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"
             }
         };
     }
@@ -313,11 +595,11 @@ export class DropiModal {
     }
     static get events() {
         return [{
-                "method": "dropiShow",
-                "name": "dropiShow",
+                "method": "onShow",
+                "name": "onShow",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -328,11 +610,11 @@ export class DropiModal {
                     "references": {}
                 }
             }, {
-                "method": "dropiHide",
-                "name": "dropiHide",
+                "method": "onHide",
+                "name": "onHide",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -347,7 +629,7 @@ export class DropiModal {
                 "name": "visibleChange",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": ""

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

@@ -0,0 +1,166 @@
+:host { display: block; width: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.navbar {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 0 var(--Size-4, 16px);
+  background: var(--Neutral-White, #ffffff);
+  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+  gap: var(--Size-4, 16px);
+  position: relative;
+}
+
+/* Left */
+.navbar__left {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  flex-shrink: 0;
+}
+
+.navbar__menu-btn {
+  background: none;
+  border: none;
+  padding: 6px;
+  cursor: pointer;
+  border-radius: var(--Border-1, 4px);
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.navbar__menu-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.navbar__logo {
+  height: 28px;
+  object-fit: contain;
+}
+
+/* Center nav items */
+.navbar__items {
+  flex: 1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+}
+
+.navbar__item {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+  padding: 6px var(--Size-3, 12px);
+  background: none;
+  border: none;
+  border-radius: var(--Border-1, 4px);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-600, #475066);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+.navbar__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.navbar__item--active {
+  background: var(--Primary-Primary-50, #fff5eb);
+  color: var(--Primary-Primary-500, #f49a3d);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.navbar__badge {
+  background: var(--Error-Error-500, #f46a6b);
+  color: var(--Neutral-White, #ffffff);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-bold);
+  min-width: 16px;
+  height: 16px;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}
+
+/* Right */
+.navbar__right {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  flex-shrink: 0;
+}
+
+.navbar__icon-btn {
+  position: relative;
+  background: none;
+  border: none;
+  padding: 6px;
+  cursor: pointer;
+  border-radius: var(--Border-1, 4px);
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.navbar__icon-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.navbar__notif-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: var(--Error-Error-500, #f46a6b);
+  color: var(--Neutral-White, #ffffff);
+  font-size: 9px;
+  font-weight: var(--font-weight-bold);
+  min-width: 14px;
+  height: 14px;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 3px;
+}
+
+.navbar__user-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  border-radius: var(--Border-1, 4px);
+  cursor: pointer;
+  transition: background 0.15s;
+  font-family: inherit;
+}
+.navbar__user-btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.navbar__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.navbar__avatar-placeholder {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #ffffff);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs, 10px);
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.navbar__user-name {
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}