@dropi/ui 0.1.49 → 0.1.50

package/dist/cjs/dropi-alert-modal.cjs.entry.js

@@ -24,20 +24,45 @@ const DropiAlertModal = class {
         this.dropiHide = index.createEvent(this, "dropiHide");
     }
     get el() { return index.getElement(this); }
+    /** Controls visibility */
     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)
@@ -61,9 +86,13 @@ const DropiAlertModal = class {
         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;
     componentWillLoad() {
         if (this.params)
@@ -96,7 +125,7 @@ const DropiAlertModal = class {
         const lottieKey = this.loading ? 'loading' : this.type;
         const isLottieLoading = lottieKey === 'loading';
         const lottieSrc = LOTTIE_MAP[lottieKey];
-        return (index.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() }, index.h("div", { key: 'abe4496cbcd52f257b713a5bdfd9f44d0de106f0', class: "body-alert" }, lottieSrc && (index.h("div", { key: 'b1ad0a1816dd8cdc6efb203090215837c8be8bdb', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, index.h("lottie-player", { key: lottieKey, src: lottieSrc, background: "transparent", speed: "1", loop: true, autoplay: true }))), index.h("div", { key: '6749aebfaf51f42c8cb6e8b70c474ba691adf1f6', class: "content-alert" }, index.h("h2", { key: '575c3c8db1175610bcfa6455063fa427b8cfed5b' }, this.loading ? this.loadingTitle : this.tittle), index.h("p", { key: '0f542e5944cabe7fe06c0898fccf6d1076742fec' }, this.loading ? this.loadingMessage : this.message)), index.h("div", { key: 'a891be75965672b1e4e83ee441c0043e5da39580', class: "custom-content" }, index.h("slot", { key: '1a2124b8f8682be02b231b806e57fd62b8dcdf45' })), !this.loading && this.displayButtons && (index.h("div", { key: 'f6d1b5a105f185c9127a005642d4630a7f1897c5', class: "actions" }, this.secondaryButton && index.h("dropi-button", { key: '008d2b52b1510a3d9283d05acbf2bfd2f3e7fb08', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), index.h("dropi-button", { key: 'ea004b1b9698a5e05450fe366bf62cda44a4f352', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
+        return (index.h("dropi-modal", { key: '9e44e3e2336cea618ad493257a9057f6ed05b3b9', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, index.h("div", { key: '2c83ef5ed1bce3821221404572e08ff83e5788a7', class: "body-alert" }, lottieSrc && (index.h("div", { key: 'aef9b32ed8f6a9eed2d49b78a579efca7c30de35', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, index.h("lottie-player", { key: lottieKey, src: lottieSrc, background: "transparent", speed: "1", loop: true, autoplay: true }))), index.h("div", { key: '5c5161f34e04e783120cda34cbfda41da0061b40', class: "content-alert" }, index.h("h2", { key: 'ea451c2f1d424a4ca9453eee500055929a4ee0cd' }, this.loading ? this.loadingTitle : this.tittle), index.h("p", { key: '6fc476e3b79305a8542a9e3254a648df46e612c2' }, this.loading ? this.loadingMessage : this.message)), index.h("div", { key: 'c6b62bd577696a2f474c05f6a91030f3caa17c9e', class: "custom-content" }, index.h("slot", { key: '42957aad93193457111a074bad254c6209c5fb12' })), !this.loading && this.displayButtons && (index.h("div", { key: 'f6bec3425de91611537bc418c7896b7dc510ace6', class: "actions" }, this.secondaryButton && index.h("dropi-button", { key: 'e169fb4dbd9d6d5548095d59ddde524b6540b7a8', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), index.h("dropi-button", { key: 'f892a5d0fce7eae2d24fedc71a925c5c2cf767dd', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
     }
     static get watchers() { return {
         "params": [{