@xlabs-store/core 0.0.1 → 0.0.2

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

@@ -25,6 +25,12 @@ export class XModal {
      * <x-modal modalTitle="Confirm"></x-modal>
      */
     modalTitle;
+    /**
+     * Help text displayed as a tooltip icon next to the modal title.
+     * @example
+     * <x-modal helpText="More information here"></x-modal>
+     */
+    helpText;
     /**
      * Width of the modal.
      * @example
@@ -91,6 +97,12 @@ export class XModal {
      * <x-modal okType="primary"></x-modal>
      */
     okType = 'primary';
+    /**
+     * Whether OK button is disabled.
+     * @example
+     * <x-modal okDisabled></x-modal>
+     */
+    okDisabled = false;
     /**
      * Modal type (info, success, error, warning, confirm).
      * @example
@@ -113,6 +125,10 @@ export class XModal {
      * Portal instance for modal content.
      */
     portalInstance = null;
+    /**
+     * Modal element reference.
+     */
+    modalElement = null;
     /**
      * Create portal on initial visible state.
      * @returns void
@@ -138,56 +154,34 @@ export class XModal {
         }
     }
     /**
-     * Get body content from slot.
-     * @returns string
+     * Get body nodes from slot.
+     * @returns Node[]
      */
-    getBodyContent() {
+    getBodyNodes() {
         const slot = this.el.shadowRoot?.querySelector('slot:not([name])');
         if (slot) {
-            const nodes = slot.assignedNodes({ flatten: true });
-            return nodes.map(node => {
-                if (node.nodeType === Node.ELEMENT_NODE) {
-                    return node.outerHTML;
-                }
-                return node.textContent || '';
-            }).join('');
+            return slot.assignedNodes({ flatten: true });
         }
-        return '';
+        return [];
     }
     /**
-     * Get footer content from slot.
-     * @returns string
+     * Get footer nodes from slot.
+     * @returns Node[]
      */
-    getFooterContent() {
+    getFooterNodes() {
         const slot = this.el.shadowRoot?.querySelector('slot[name="footer"]');
         if (slot) {
-            const nodes = slot.assignedNodes({ flatten: true });
-            if (nodes.length > 0) {
-                return nodes.map(node => {
-                    if (node.nodeType === Node.ELEMENT_NODE) {
-                        return node.outerHTML;
-                    }
-                    return node.textContent || '';
-                }).join('');
-            }
+            return slot.assignedNodes({ flatten: true });
         }
-        return '';
+        return [];
     }
     /**
-     * Build modal content element for portal.
-     *
-     * Flow:
-     * 1. Creates `x-modal-content` element.
-     * 2. Assigns all visual props (title, width, footer, etc.).
-     * 3. Injects body and footer content extracted from slots.
-     * 4. Attaches `xOk` and `xCancel` event listeners to forward events.
-     *
-     * @returns HTMLElement
+     * Apply properties to modal element.
+     * @param modalEl The modal element to update.
      */
-    buildModalElement() {
-        const modalEl = document.createElement('x-modal-content');
-        // Set properties
+    applyPropsToModalElement(modalEl) {
         modalEl.modalTitle = this.modalTitle;
+        modalEl.helpText = this.helpText;
         modalEl.width = this.width;
         modalEl.footer = this.footer;
         modalEl.closable = this.closable;
@@ -198,11 +192,28 @@ export class XModal {
         modalEl.cancelText = this.cancelText;
         modalEl.okLoading = this.okLoading;
         modalEl.cancelLoading = this.cancelLoading;
+        modalEl.okDisabled = this.okDisabled;
         modalEl.okType = this.okType;
         modalEl.type = this.type;
-        // Get slot content
-        modalEl.bodyContent = this.getBodyContent();
-        modalEl.footerContent = this.getFooterContent();
+    }
+    /**
+     * Build modal content element for portal.
+     *
+     * Flow:
+     * 1. Creates `x-modal-content` element.
+     * 2. Assigns all visual props (title, width, footer, etc.).
+     * 3. Injects body and footer content extracted from slots.
+     * 4. Attaches `xOk` and `xCancel` event listeners to forward events.
+     *
+     * @returns HTMLElement
+     */
+    buildModalElement() {
+        const modalEl = document.createElement('x-modal-content');
+        // Set properties
+        this.applyPropsToModalElement(modalEl);
+        // Get nodes
+        modalEl.bodyNodes = this.getBodyNodes();
+        modalEl.footerNodes = this.getFooterNodes();
         // Attach event listeners
         modalEl.addEventListener('xOk', () => {
             this.xOk.emit();
@@ -212,6 +223,29 @@ export class XModal {
         });
         return modalEl;
     }
+    /**
+     * Return nodes from modal element back to host light DOM.
+     */
+    returnNodesToHost() {
+        if (this.modalElement) {
+            const bodyNodes = this.modalElement.bodyNodes;
+            const footerNodes = this.modalElement.footerNodes;
+            if (bodyNodes) {
+                bodyNodes.forEach(node => {
+                    if (node.parentNode !== this.el) {
+                        this.el.appendChild(node);
+                    }
+                });
+            }
+            if (footerNodes) {
+                footerNodes.forEach(node => {
+                    if (node.parentNode !== this.el) {
+                        this.el.appendChild(node);
+                    }
+                });
+            }
+        }
+    }
     /**
      * Update portal with modal content.
      * @returns void
@@ -221,21 +255,34 @@ export class XModal {
             this.destroyPortal();
             return;
         }
-        // Build modal element
-        const modalElement = this.buildModalElement();
-        if (!this.portalInstance) {
-            // Create new portal instance
+        if (!this.modalElement) {
+            // First time opening: build and create
+            this.modalElement = this.buildModalElement();
             this.portalInstance = PortalController.create({
                 open: true,
                 zIndex: 1000,
-                content: modalElement,
+                content: this.modalElement,
             });
         }
         else {
+            // Already open: just update properties on existing modalElement
+            this.applyPropsToModalElement(this.modalElement);
+            // Check if host has new children that need to be moved to the portal (e.g. from Angular *ngIf)
+            const hasNewNodes = Array.from(this.el.childNodes).some(node => node.nodeType === 1 && !node.classList.contains('x-modal-slots-container'));
+            if (hasNewNodes) {
+                // We have new nodes in the host light DOM.
+                // We need to pick them up without losing state of existing nodes if possible.
+                // The safest way current architecture allows is to merge them.
+                // Return existing nodes to host to recombine with new ones
+                this.returnNodesToHost();
+                // Re-capture all nodes
+                this.modalElement.bodyNodes = this.getBodyNodes();
+                this.modalElement.footerNodes = this.getFooterNodes();
+            }
             // Update existing portal
             this.portalInstance.update({
                 open: true,
-                content: modalElement,
+                content: this.modalElement,
             });
         }
     }
@@ -245,8 +292,11 @@ export class XModal {
      */
     destroyPortal() {
         if (this.portalInstance) {
+            // Put nodes back to original host before destroying
+            this.returnNodesToHost();
             this.portalInstance.destroy();
             this.portalInstance = null;
+            this.modalElement = null;
         }
     }
     /**
@@ -254,10 +304,10 @@ export class XModal {
      * @returns JSX.Element
      */
     render() {
-        return (h(Host, { key: 'c3e46fc9b067f8d4700762b5bb0d284dc190c1e8', class: {
+        return (h(Host, { key: '2b88fc9289da724f6bec6113baa8fce911f53eba', class: {
                 'x-modal': true,
                 'x-modal-open': this.visible,
-            } }, h("div", { key: 'd620493f845e4b86b29fa46b868dbab2d632908a', style: { display: 'none' } }, h("slot", { key: '202a7875383dfb9f3c6b5fc9a5183a916d0b9563' }), h("slot", { key: '10e85c6d0994bf249c3974bdb881efda16385702', name: "footer" }))));
+            } }, h("div", { key: '3de3c352a26c22972861707ee4fa072f63153461', class: "x-modal-slots-container", style: { display: 'none' } }, h("slot", { key: '8345ed6c887064584ad38a0c49e5c119fecdec27' }), h("slot", { key: '761cd0a7d262166d354d58d487b5de8ea9edb23b', name: "footer" }))));
     }
     static get is() { return "x-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -318,6 +368,28 @@ export class XModal {
                 "reflect": false,
                 "attribute": "modal-title"
             },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal helpText=\"More information here\"></x-modal>"
+                        }],
+                    "text": "Help text displayed as a tooltip icon next to the modal title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-text"
+            },
             "width": {
                 "type": "any",
                 "mutable": false,
@@ -571,6 +643,29 @@ export class XModal {
                 "attribute": "ok-type",
                 "defaultValue": "'primary'"
             },
+            "okDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-modal okDisabled></x-modal>"
+                        }],
+                    "text": "Whether OK button is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ok-disabled",
+                "defaultValue": "false"
+            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -642,6 +737,9 @@ export class XModal {
             }, {
                 "propName": "modalTitle",
                 "methodName": "handlePropsChange"
+            }, {
+                "propName": "helpText",
+                "methodName": "handlePropsChange"
             }, {
                 "propName": "width",
                 "methodName": "handlePropsChange"
@@ -675,6 +773,9 @@ export class XModal {
             }, {
                 "propName": "okType",
                 "methodName": "handlePropsChange"
+            }, {
+                "propName": "okDisabled",
+                "methodName": "handlePropsChange"
             }, {
                 "propName": "type",
                 "methodName": "handlePropsChange"

package/dist/collection/components/x-modal-content/x-modal-content.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;
@@ -540,41 +543,41 @@
 
 /* Icon colors by type */
 .x-modal-method-icon-info {
-  background-color: var(--x-modal-method-info-bg, var(--x-color-info-bg, #E6F4FF));
-  color: var(--x-modal-method-info-color, var(--x-color-info, #1677FF));
+  background-color: var(--x-modal-method-info-bg, var(--x-color-info-bg, #e6f4ff));
+  color: var(--x-modal-method-info-color, var(--x-color-info, #1677ff));
 }
 .x-modal-method-icon-info::after {
-  background-color: var(--x-modal-method-info-color, var(--x-color-info, #1677FF));
+  background-color: var(--x-modal-method-info-color, var(--x-color-info, #1677ff));
 }
 
 .x-modal-method-icon-success {
-  background-color: var(--x-modal-method-success-bg, var(--x-color-success-bg, #F6FFED));
-  color: var(--x-modal-method-success-color, var(--x-color-success, #52C41A));
+  background-color: var(--x-modal-method-success-bg, var(--x-color-success-bg, #f6ffed));
+  color: var(--x-modal-method-success-color, var(--x-color-success, #52c41a));
 }
 .x-modal-method-icon-success::after {
-  background-color: var(--x-modal-method-success-color, var(--x-color-success, #52C41A));
+  background-color: var(--x-modal-method-success-color, var(--x-color-success, #52c41a));
 }
 
 .x-modal-method-icon-error {
-  background-color: var(--x-modal-method-error-bg, var(--x-color-error-bg, #FFF1F0));
-  color: var(--x-modal-method-error-color, var(--x-color-error, #FF4D4F));
+  background-color: var(--x-modal-method-error-bg, var(--x-color-error-bg, #fff1f0));
+  color: var(--x-modal-method-error-color, var(--x-color-error, #ff4d4f));
 }
 .x-modal-method-icon-error::after {
-  background-color: var(--x-modal-method-error-color, var(--x-color-error, #FF4D4F));
+  background-color: var(--x-modal-method-error-color, var(--x-color-error, #ff4d4f));
 }
 
 .x-modal-method-icon-warning,
 .x-modal-method-icon-confirm {
-  background-color: var(--x-modal-method-warning-bg, var(--x-color-warning-bg, #FFFBE6));
-  color: var(--x-modal-method-warning-color, var(--x-color-warning, #FAAD14));
+  background-color: var(--x-modal-method-warning-bg, var(--x-color-warning-bg, #fffbe6));
+  color: var(--x-modal-method-warning-color, var(--x-color-warning, #faad14));
 }
 .x-modal-method-icon-warning::after,
 .x-modal-method-icon-confirm::after {
-  background-color: var(--x-modal-method-warning-color, var(--x-color-warning, #FAAD14));
+  background-color: var(--x-modal-method-warning-color, var(--x-color-warning, #faad14));
 }
 
 .x-modal-method-title-centered {
-  color: var(--x-modal-method-title-color, var(--x-color-text-heading, #1A3353));
+  color: var(--x-modal-method-title-color, var(--x-color-text-heading, #1a3353));
   font-weight: 700;
   font-size: var(--x-modal-method-title-font-size, var(--x-font-size-xl, 20px));
   line-height: 1.4;
@@ -582,7 +585,7 @@
 }
 
 .x-modal-method-message-centered {
-  color: var(--x-modal-method-message-color, var(--x-color-text-secondary, #5E718D));
+  color: var(--x-modal-method-message-color, var(--x-color-text-secondary, #5e718d));
   font-size: var(--x-modal-method-message-font-size, var(--x-font-size-lg, 15px));
   line-height: 1.6;
   max-width: 90%;
@@ -683,6 +686,14 @@
 /* ========================================
  * TITLE
  * ======================================== */
+.x-modal-title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--x-modal-title-wrapper-gap, 6px);
+  flex: 1;
+  min-width: 0;
+}
+
 .x-modal-title {
   margin: 0;
   color: var(--x-modal-title-color, var(--x-color-text-heading, rgba(0, 0, 0, 0.88)));
@@ -690,6 +701,87 @@
   font-size: var(--x-modal-title-font-size, var(--x-font-size-lg, 16px));
   line-height: var(--x-modal-close-size, 22px);
   word-wrap: break-word;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--x-modal-title-gap, 8px);
+}
+
+.x-modal-help {
+  display: inline-flex;
+  align-items: center;
+  color: var(--x-modal-close-color, var(--x-color-icon, rgba(0, 0, 0, 0.45)));
+  cursor: help;
+  font-size: var(--x-modal-help-font-size, 14px);
+  margin-top: var(--x-modal-help-margin-top, 4px);
+  transition: color 0.3s;
+}
+.x-modal-help:hover {
+  color: var(--x-primary-color, #1890ff);
+}
+.x-modal-help x-icon {
+  font-size: var(--x-modal-help-icon-font-size, 16px);
+}
+
+/* ========================================
+ * HELP ICON
+ * ======================================== */
+.x-modal-help-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--x-modal-help-icon-size, 16px);
+  height: var(--x-modal-help-icon-size, 16px);
+  color: var(--x-modal-help-icon-color, rgba(0, 0, 0, 0.45));
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.x-modal-help-icon:hover {
+  color: var(--x-modal-help-icon-color-hover, #1677ff);
+}
+.x-modal-help-icon:hover .x-modal-help-tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+.x-modal-help-icon x-icon {
+  font-size: var(--x-modal-help-icon-inner-font-size, 14px);
+  line-height: 1;
+}
+
+.x-modal-help-tooltip {
+  position: absolute;
+  bottom: calc(100% + var(--x-modal-help-tooltip-offset, 8px));
+  left: 50%;
+  transform: translateX(-50%) translateY(var(--x-modal-help-tooltip-translate-y, 4px));
+  z-index: var(--x-modal-help-tooltip-z-index, 9999);
+  width: max-content;
+  max-width: var(--x-modal-help-tooltip-max-width, 280px);
+  padding: var(--x-modal-help-tooltip-padding, 6px 10px);
+  color: var(--x-modal-help-tooltip-color, #fff);
+  font-size: var(--x-modal-help-tooltip-font-size, var(--x-font-size-sm, 12px));
+  font-weight: var(--x-modal-help-tooltip-font-weight, var(--x-font-weight-normal, 400));
+  line-height: 1.5;
+  text-align: left;
+  white-space: normal;
+  word-break: break-word;
+  background-color: var(--x-modal-help-tooltip-bg, rgba(0, 0, 0, 0.85));
+  border-radius: var(--x-modal-help-tooltip-border-radius, 6px);
+  box-shadow: var(--x-modal-help-tooltip-box-shadow, 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12));
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+  pointer-events: none;
+}
+.x-modal-help-tooltip::before {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: var(--x-modal-help-tooltip-arrow-size, 5px) solid transparent;
+  border-top-color: var(--x-modal-help-tooltip-bg, rgba(0, 0, 0, 0.85));
 }
 
 /* ========================================
@@ -701,11 +793,11 @@
   justify-content: center;
   width: var(--x-modal-close-size, 22px);
   height: var(--x-modal-close-size, 22px);
-  margin-right: -12px;
+  margin-right: var(--x-modal-close-margin-inline-end, -12px);
   padding: 0;
   color: var(--x-modal-close-color, var(--x-color-icon, rgba(0, 0, 0, 0.45)));
   font-weight: 700;
-  font-size: 20px;
+  font-size: var(--x-modal-close-font-size, 20px);
   line-height: 1;
   text-decoration: none;
   background: transparent;