@dropi/ui 0.1.48 → 0.1.49

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

@@ -1,53 +1,21 @@
 import { h } from "@stencil/core";
-/**
- * @component dropi-alert-modal
- * Confirmation/alert modal with Lottie animation, title, message and action buttons.
- * Uses dropi-modal internally.
- *
- * @example
- * const el = document.querySelector('dropi-alert-modal');
- * el.visible = true;
- */
+import { LOTTIE_MAP } from "../../utils/lottie-map.generated";
 export class DropiAlertModal {
-    /** Controls visibility */
+    el;
     visible = false;
-    /** Modal type — determines Lottie animation */
     type = 'question';
-    /** Bold title */
     tittle = '';
-    /** Body message */
     message = '';
-    /** Primary button label */
     primaryButton = 'Accept';
-    /** Secondary button label (hidden if empty) */
     secondaryButton = '';
-    /** Show loading state with loading.json Lottie */
     loading = false;
-    /** Show close icon in header */
     closable = false;
-    /** Hide action buttons */
     displayButtons = true;
-    /** Loading title */
     loadingTitle = 'Loading';
-    /** Loading message */
     loadingMessage = 'Please wait a moment';
-    /**
-     * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).
-     * Useful for step-by-step flows.
-     */
     isStep = false;
-    /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
     baseZIndex = 0;
-    /**
-     * Use White Label (MB) illustration style instead of Lottie animation.
-     */
     isWhiteLabel = false;
-    /**
-     * Convenience object prop — matches Angular `params: ModalParams`.
-     * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
-     * loadingMessage, closable, displayButtons.
-     * When provided, its values override the corresponding individual props.
-     */
     params = null;
     paramsChanged(val) {
         if (!val)
@@ -71,21 +39,10 @@ export class DropiAlertModal {
         if (val.displayButtons !== undefined)
             this.displayButtons = val.displayButtons;
     }
-    /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
     dropiPrimaryClick;
-    /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
     dropiSecondaryClick;
-    /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
     dropiVisibleChange;
-    /** Emitted when modal is hidden — matches Angular 'onHide' */
     dropiHide;
-    lottieMap = {
-        question: '/assets/lottie-files/question.json',
-        warning: '/assets/lottie-files/warning.json',
-        success: '/assets/lottie-files/success.json',
-        error: '/assets/lottie-files/failure.json',
-        loading: '/assets/lottie-files/loading.json',
-    };
     componentWillLoad() {
         if (this.params)
             this.paramsChanged(this.params);
@@ -116,7 +73,8 @@ export class DropiAlertModal {
     render() {
         const lottieKey = this.loading ? 'loading' : this.type;
         const isLottieLoading = lottieKey === 'loading';
-        return (h("dropi-modal", { key: '322c59ea0a067a4c0cb28a5ffbe9cbc0c642eee6', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, h("div", { key: '06530f3da45738d1ed75a4e8b5b8b0b80dfd2647', class: "body-alert" }, this.lottieMap[lottieKey] && (h("div", { key: '7a4ab4fbbdf3cbbacfa22f918d212b788f4392a4', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), h("div", { key: '0e72f42d10c59047e82df8b2842affd38ab60fc7', class: "content-alert" }, h("h2", { key: '8262de8fbcf5b87fbac34740d34d99d0b6ff921d' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: 'ca9c734e0b9686bff7e2616ae98224446ac0ca33' }, this.loading ? this.loadingMessage : this.message)), h("div", { key: '1b5edb3af1044cb0dd0b57a425517b1d824672be', class: "custom-content" }, h("slot", { key: '57f4a8acdbcf8a11445f7c8233355bb4ac46c9ab' })), !this.loading && this.displayButtons && (h("div", { key: '32580f42d98f628b4c1d1f300b5a3aaaa1be2486', class: "actions" }, this.secondaryButton && h("dropi-button", { key: 'dcf8707a7f4d8b80126a10022dd6de1c0ea44dc7', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: '3ed494fc7a83021174c4d006ae4327348d400e93', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
+        const lottieSrc = LOTTIE_MAP[lottieKey];
+        return (h("dropi-modal", { key: 'db5113694460c0cc84715a713389470ac7f6b9b1', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, h("div", { key: 'abe4496cbcd52f257b713a5bdfd9f44d0de106f0', class: "body-alert" }, lottieSrc && (h("div", { key: 'b1ad0a1816dd8cdc6efb203090215837c8be8bdb', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, h("lottie-player", { key: lottieKey, src: lottieSrc, background: "transparent", speed: "1", loop: true, autoplay: true }))), h("div", { key: '6749aebfaf51f42c8cb6e8b70c474ba691adf1f6', class: "content-alert" }, h("h2", { key: '575c3c8db1175610bcfa6455063fa427b8cfed5b' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: '0f542e5944cabe7fe06c0898fccf6d1076742fec' }, this.loading ? this.loadingMessage : this.message)), h("div", { key: 'a891be75965672b1e4e83ee441c0043e5da39580', class: "custom-content" }, h("slot", { key: '1a2124b8f8682be02b231b806e57fd62b8dcdf45' })), !this.loading && this.displayButtons && (h("div", { key: 'f6d1b5a105f185c9127a005642d4630a7f1897c5', class: "actions" }, this.secondaryButton && h("dropi-button", { key: '008d2b52b1510a3d9283d05acbf2bfd2f3e7fb08', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: 'ea004b1b9698a5e05450fe366bf62cda44a4f352', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
     }
     static get is() { return "dropi-alert-modal"; }
     static get originalStyleUrls() {
@@ -143,7 +101,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls visibility"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -169,7 +127,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Modal type \u2014 determines Lottie animation"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -189,7 +147,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Bold title"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -209,7 +167,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Body message"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -229,7 +187,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Primary button label"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -249,7 +207,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Secondary button label (hidden if empty)"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -269,7 +227,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show loading state with loading.json Lottie"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -289,7 +247,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show close icon in header"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -309,7 +267,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Hide action buttons"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -329,7 +287,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Loading title"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -349,7 +307,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Loading message"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -369,7 +327,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When true, primary button does NOT auto-close the modal (matches Angular `isStep`).\nUseful for step-by-step flows."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -389,7 +347,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Base z-index for the internal modal overlay (matches Angular `baseZIndex`)"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -409,7 +367,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Use White Label (MB) illustration style instead of Lottie animation."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -429,7 +387,7 @@ export class DropiAlertModal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Convenience object prop \u2014 matches Angular `params: ModalParams`.\nFields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,\nloadingMessage, closable, displayButtons.\nWhen provided, its values override the corresponding individual props."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -448,7 +406,7 @@ export class DropiAlertModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when primary button is clicked \u2014 matches Angular 'primaryButtonEvent'"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "boolean",
@@ -463,7 +421,7 @@ export class DropiAlertModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when secondary button is clicked \u2014 matches Angular 'secondaryButtonEvent'"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "boolean",
@@ -478,7 +436,7 @@ export class DropiAlertModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when modal open state changes \u2014 matches Angular 'modalOpenChange'"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "boolean",
@@ -493,7 +451,7 @@ export class DropiAlertModal {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when modal is hidden \u2014 matches Angular 'onHide'"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "void",
@@ -540,6 +498,7 @@ export class DropiAlertModal {
             }
         };
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "params",

package/dist/collection/components/dropi-empty-state/dropi-empty-state.js

@@ -1,29 +1,29 @@
 import { h } from "@stencil/core";
-/**
- * @component dropi-empty-state
- * Empty state illustration with title, description and optional action button.
- */
+import { ILLUSTRATION_MAP } from "../../utils/illustration-map.generated";
 export class DropiEmptyState {
-    /** Title text (matches Angular 'title') */
+    el;
     title = '';
-    /** Description text */
     description = '';
-    /** URL of the illustration image */
+    /** URL of an external illustration image (overrides dropiIcon) */
     imageUrl = '';
-    /** Alt text for the image */
     imageAlt = 'Sin resultados';
-    /** Primary action button label (empty = hidden) — matches Angular 'buttonText' */
+    /** Primary action button label (empty = hidden) */
     buttonText = '';
-    /** Icon name for button — matches Angular 'buttonIcon' */
+    /** Icon name for the action button */
     buttonIcon = '';
-    /** State of the illustration (default, loading, sorry, love, success, error) — matches Angular 'dropiIcon' */
+    /** Built-in illustration state */
     dropiIcon = 'default';
-    /** Severity for the action button — matches Angular 'buttonSeverity' */
     buttonSeverity = 'tertiary';
-    /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
     buttonClickEvent;
+    illustrationRef;
+    componentDidRender() {
+        if (this.illustrationRef && !this.imageUrl) {
+            const key = this.dropiIcon && ILLUSTRATION_MAP[this.dropiIcon] ? this.dropiIcon : 'default';
+            this.illustrationRef.innerHTML = ILLUSTRATION_MAP[key];
+        }
+    }
     render() {
-        return (h("div", { key: '50a720a8b293a19dbabccce8f7aa0fa996e5fd63', class: "empty-state" }, h("div", { key: 'd13894b011225337234301bd514891d89caac3d7', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && h("h3", { key: 'eb40395b4bd3c623f27bc3290bb37427420c5e94', class: "empty-state-title" }, this.title), this.description && h("p", { key: 'f942c17f7a8d320bbe81dfcd45d13e56d7ea8eba', class: "empty-state-description" }, this.description), h("slot", { key: '513f49ffeeb77e2be1318d6d251a1bcabff2689a' }), this.buttonText && (h("div", { key: 'f6d9c391feee26eac44a8904e1768678bbb1604c', class: "empty-state-actions" }, h("dropi-button", { key: 'f9ea9563a76a80bd29b6e6aaf8405092046a62a8', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
+        return (h("div", { key: '0d8767fe7139adbcc9ba962cfc554ac532678684', class: "empty-state" }, h("div", { key: '3a250c2aab247e465a8b122420748c5ed6bb0e8a', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-img", ref: (el) => { this.illustrationRef = el; } }))), this.title && h("h3", { key: 'eb1717c48091ff1a05defc703a6a581e4cc2691b', class: "empty-state-title" }, this.title), this.description && h("p", { key: '049ec39cffbc935a44ee8ade7832c80790ae086e', class: "empty-state-description" }, this.description), h("slot", { key: 'e4498968e7f0cb0d505e55d9fe3d4b1bb3a51dc1' }), this.buttonText && (h("div", { key: '1a1263395d6e20dfa89f9702557c064ea0255ef4', class: "empty-state-actions" }, h("dropi-button", { key: '176b76887376c0520398e30cd1006139a163edc7', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
     }
     static get is() { return "dropi-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -51,7 +51,7 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Title text (matches Angular 'title')"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -71,7 +71,7 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Description text"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -91,7 +91,7 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "URL of the illustration image"
+                    "text": "URL of an external illustration image (overrides dropiIcon)"
                 },
                 "getter": false,
                 "setter": false,
@@ -111,7 +111,7 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Alt text for the image"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -131,7 +131,7 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Primary action button label (empty = hidden) \u2014 matches Angular 'buttonText'"
+                    "text": "Primary action button label (empty = hidden)"
                 },
                 "getter": false,
                 "setter": false,
@@ -151,7 +151,7 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon name for button \u2014 matches Angular 'buttonIcon'"
+                    "text": "Icon name for the action button"
                 },
                 "getter": false,
                 "setter": false,
@@ -171,7 +171,7 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "State of the illustration (default, loading, sorry, love, success, error) \u2014 matches Angular 'dropiIcon'"
+                    "text": "Built-in illustration state"
                 },
                 "getter": false,
                 "setter": false,
@@ -191,7 +191,7 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Severity for the action button \u2014 matches Angular 'buttonSeverity'"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -210,7 +210,7 @@ export class DropiEmptyState {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when button is clicked \u2014 matches Angular 'buttonClickEvent'"
+                    "text": ""
                 },
                 "complexType": {
                     "original": "void",
@@ -219,4 +219,5 @@ export class DropiEmptyState {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }