@customviews-js/customviews 1.1.6 → 1.1.7

package/dist/custom-views.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.1.6
+ * @customviews-js/customviews v1.1.7
  * (c) 2025 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -273,102 +273,6 @@
         }
     }
 
-    /** --- Icon utilities --- */
-    function ensureFontAwesomeInjected() {
-        const isFontAwesomeLoaded = Array.from(document.styleSheets).some(sheet => sheet.href && (sheet.href.includes('font-awesome') || sheet.href.includes('fontawesome')));
-        if (isFontAwesomeLoaded)
-            return;
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
-        link.setAttribute('data-customviews-fontawesome', 'true');
-        document.head.appendChild(link);
-    }
-    function replaceIconShortcodes(text) {
-        // Matches :fa-*, :fas-*, :fab-* etc.
-        return text.replace(/:(fa[b|s|r]?)-([\w-]+):/g, (_, style, icon) => {
-            // style = fa, fas, fab, far, etc.
-            // Default to "fa" if only "fa-" is given
-            return `<i class="${style} fa-${icon}"></i>`;
-        });
-    }
-    /** --- Basic renderers --- */
-    function renderImage(el, asset) {
-        if (!asset.src)
-            return;
-        el.innerHTML = '';
-        const img = document.createElement('img');
-        img.src = asset.src;
-        img.alt = asset.alt || '';
-        // Apply custom styling if provided
-        if (asset.className) {
-            img.className = asset.className;
-        }
-        if (asset.style) {
-            img.setAttribute('style', asset.style);
-        }
-        // Default styles (can be overridden by asset.style)
-        img.style.maxWidth = img.style.maxWidth || '100%';
-        img.style.height = img.style.height || 'auto';
-        img.style.display = img.style.display || 'block';
-        el.appendChild(img);
-    }
-    function renderText(el, asset) {
-        if (asset.content != null) {
-            el.textContent = asset.content;
-        }
-        // Apply custom styling if provided
-        if (asset.className) {
-            el.className = asset.className;
-        }
-        if (asset.style) {
-            el.setAttribute('style', asset.style);
-        }
-    }
-    function renderHtml(el, asset) {
-        if (asset.content != null) {
-            el.innerHTML = asset.content;
-        }
-        // Apply custom styling if provided
-        if (asset.className) {
-            el.className = asset.className;
-        }
-        if (asset.style) {
-            el.setAttribute('style', asset.style);
-        }
-    }
-    /** --- Unified asset renderer --- */
-    function detectAssetType(asset) {
-        // If src exists, it's an image
-        if (asset.src)
-            return 'image';
-        // If content contains HTML tags, it's HTML
-        if (asset.content && /<[^>]+>/.test(asset.content)) {
-            return 'html';
-        }
-        return 'text';
-    }
-    function renderAssetInto(el, assetId, assetsManager) {
-        const asset = assetsManager.get(assetId);
-        if (!asset)
-            return;
-        const type = asset.type || detectAssetType(asset);
-        switch (type) {
-            case 'image':
-                renderImage(el, asset);
-                break;
-            case 'text':
-                renderText(el, asset);
-                break;
-            case 'html':
-                renderHtml(el, asset);
-                break;
-            default:
-                el.innerHTML = asset.content || String(asset);
-                console.warn('[CustomViews] Unknown asset type:', type);
-        }
-    }
-
     // Constants for selectors
     const TABGROUP_SELECTOR = 'cv-tabgroup';
     const TAB_SELECTOR = 'cv-tab';
@@ -455,37 +359,35 @@
                 tabEl.classList.remove('cv-visible');
             }
         }
+        /**
+         * Extract header and body content from header component syntax: <cv-tab-header> and <cv-tab-body>
+         * Returns null if using old attribute-based syntax.
+         *
+         * @param tabEl The <cv-tab> element to inspect
+         * @returns Object with extracted content, or null if new syntax not used
+         */
+        static extractTabContent(tabEl) {
+            // Look for direct children 
+            let headerEl = tabEl.querySelector(':scope > cv-tab-header');
+            if (!headerEl) {
+                return null;
+            }
+            const headerHTML = headerEl.innerHTML.trim();
+            // Find body element
+            let bodyEl = tabEl.querySelector(':scope > cv-tab-body');
+            // Fallback: try finding both header and body
+            // without :scope (in case of DOM manipulation) by iterating through tabEl.children if needed
+            return {
+                headerHTML,
+                bodyEl
+            };
+        }
         /**
          * Build navigation for tab groups with nav="auto" (one-time setup)
          */
         static buildNavs(rootEl, cfgGroups, onTabClick, onTabDoubleClick) {
             // Find all cv-tabgroup elements with nav="auto" or no nav attribute
             const tabGroups = rootEl.querySelectorAll(NAV_AUTO_SELECTOR);
-            // Check if any tab headers contain Font Awesome shortcodes
-            // Inject Font Awesome CSS only if needed
-            let hasFontAwesomeShortcodes = false;
-            tabGroups.forEach((groupEl) => {
-                const groupId = groupEl.getAttribute('id');
-                if (!groupId)
-                    return;
-                const tabElements = Array.from(groupEl.children).filter((child) => child.tagName.toLowerCase() === 'cv-tab');
-                // Check for Font Awesome shortcodes in tab headers
-                tabElements.forEach((tabEl) => {
-                    const rawTabId = tabEl.getAttribute('id');
-                    if (!rawTabId)
-                        return;
-                    const splitIds = this.splitTabIds(rawTabId);
-                    const tabId = splitIds[0] || rawTabId;
-                    const header = tabEl.getAttribute('header') || this.getTabLabel(tabId, groupId, cfgGroups) || tabId || '';
-                    if (/:fa-[\w-]+:/.test(header)) {
-                        hasFontAwesomeShortcodes = true;
-                    }
-                });
-            });
-            // Inject Font Awesome only if shortcodes are found
-            if (hasFontAwesomeShortcodes) {
-                ensureFontAwesomeInjected();
-            }
             tabGroups.forEach((groupEl) => {
                 const groupId = groupEl.getAttribute('id');
                 if (!groupId)
@@ -520,23 +422,30 @@
                     const splitIds = this.splitTabIds(rawTabId);
                     // If multiple IDs, use the first as primary
                     const tabId = splitIds[0] || rawTabId;
-                    // Get header for this tab (single header, not multiple)
-                    const headerAttr = tabEl.getAttribute('header') || '';
+                    // Get header for this tab - prefer new syntax over old attribute syntax
+                    const extractedHeaderAndBody = this.extractTabContent(tabEl);
                     let header = '';
-                    if (headerAttr) {
-                        // Single header provided on the element
-                        header = headerAttr;
+                    // use <cv-tab-header> content if available
+                    if (extractedHeaderAndBody && extractedHeaderAndBody.headerHTML) {
+                        header = extractedHeaderAndBody.headerHTML;
                     }
                     else {
-                        // Use config label or id as fallback
-                        header = this.getTabLabel(tabId, groupId, cfgGroups) || tabId || '';
+                        // use header attribute if available
+                        const headerAttr = tabEl.getAttribute('header') || '';
+                        if (headerAttr) {
+                            header = headerAttr;
+                        }
+                        else {
+                            // Use config label or id as fallback
+                            header = this.getTabLabel(tabId, groupId, cfgGroups) || tabId || '';
+                        }
                     }
                     // Create a single nav link for this tab element
                     const listItem = document.createElement('li');
                     listItem.className = 'nav-item';
                     const navLink = document.createElement('a');
                     navLink.className = 'nav-link';
-                    navLink.innerHTML = replaceIconShortcodes(header);
+                    navLink.innerHTML = header;
                     navLink.href = '#';
                     navLink.setAttribute('data-tab-id', tabId);
                     navLink.setAttribute('data-raw-tab-id', rawTabId);
@@ -773,6 +682,83 @@
         }
     }
 
+    /** --- Basic renderers --- */
+    function renderImage(el, asset) {
+        if (!asset.src)
+            return;
+        el.innerHTML = '';
+        const img = document.createElement('img');
+        img.src = asset.src;
+        img.alt = asset.alt || '';
+        // Apply custom styling if provided
+        if (asset.className) {
+            img.className = asset.className;
+        }
+        if (asset.style) {
+            img.setAttribute('style', asset.style);
+        }
+        // Default styles (can be overridden by asset.style)
+        img.style.maxWidth = img.style.maxWidth || '100%';
+        img.style.height = img.style.height || 'auto';
+        img.style.display = img.style.display || 'block';
+        el.appendChild(img);
+    }
+    function renderText(el, asset) {
+        if (asset.content != null) {
+            el.textContent = asset.content;
+        }
+        // Apply custom styling if provided
+        if (asset.className) {
+            el.className = asset.className;
+        }
+        if (asset.style) {
+            el.setAttribute('style', asset.style);
+        }
+    }
+    function renderHtml(el, asset) {
+        if (asset.content != null) {
+            el.innerHTML = asset.content;
+        }
+        // Apply custom styling if provided
+        if (asset.className) {
+            el.className = asset.className;
+        }
+        if (asset.style) {
+            el.setAttribute('style', asset.style);
+        }
+    }
+    /** --- Unified asset renderer --- */
+    function detectAssetType(asset) {
+        // If src exists, it's an image
+        if (asset.src)
+            return 'image';
+        // If content contains HTML tags, it's HTML
+        if (asset.content && /<[^>]+>/.test(asset.content)) {
+            return 'html';
+        }
+        return 'text';
+    }
+    function renderAssetInto(el, assetId, assetsManager) {
+        const asset = assetsManager.get(assetId);
+        if (!asset)
+            return;
+        const type = asset.type || detectAssetType(asset);
+        switch (type) {
+            case 'image':
+                renderImage(el, asset);
+                break;
+            case 'text':
+                renderText(el, asset);
+                break;
+            case 'html':
+                renderHtml(el, asset);
+                break;
+            default:
+                el.innerHTML = asset.content || String(asset);
+                console.warn('[CustomViews] Unknown asset type:', type);
+        }
+    }
+
     // Constants for selectors
     const TOGGLE_DATA_SELECTOR = "[data-cv-toggle], [data-customviews-toggle]";
     const TOGGLE_ELEMENT_SELECTOR = "cv-toggle";
@@ -884,16 +870,21 @@
   margin-bottom: 1rem;
   list-style: none;
   border-bottom: 1px solid #dee2e6;
+
+  align-items: stretch;
 }
 
 .cv-tabs-nav .nav-item {
   margin-bottom: -1px;
   list-style: none;
-  display: inline-block;
+  display: flex;              /* was inline-block → make flex to stretch height */
+  align-items: stretch;       /* stretch link to full height */
 }
 
 .cv-tabs-nav .nav-link {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 0.5rem 1rem;
   color: #495057;
   text-decoration: none;
@@ -903,6 +894,13 @@
   border-top-right-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
   cursor: pointer;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+}
+
+.cv-tabs-nav .nav-link p {
+  margin: 0; /* remove default margins */
+  display: inline; /* or inline-block */
 }
 
 .cv-tabs-nav .nav-link:hover,
@@ -955,6 +953,16 @@ cv-tab {
   display: block;
 }
 
+/* Hide cv-tab-header source element; content is extracted to nav link */
+cv-tab-header {
+  display: none !important;
+}
+
+/* Allow cv-tab-body to flow naturally */
+cv-tab-body {
+  display: block;
+}
+
 /* Override visibility for tab panels - use display instead of collapse animation */
 cv-tab.cv-hidden {
   display: none !important;
@@ -1317,6 +1325,24 @@ ${TAB_STYLES}
             // Element is managed by Core
         }
     }
+    /**
+     * <cv-tab-header> element - represents tab header with rich HTML formatting
+     * Content is extracted and used in the navigation link
+     */
+    class CVTabHeader extends HTMLElement {
+        connectedCallback() {
+            // Element is a semantic container; TabManager extracts its content
+        }
+    }
+    /**
+     * <cv-tab-body> element - represents tab body content
+     * Semantic container for tab panel content
+     */
+    class CVTabBody extends HTMLElement {
+        connectedCallback() {
+            // Element is a semantic container; visibility managed by TabManager
+        }
+    }
     /**
      * Register custom elements
      */
@@ -1331,6 +1357,12 @@ ${TAB_STYLES}
         if (!customElements.get('cv-toggle')) {
             customElements.define('cv-toggle', CVToggle);
         }
+        if (!customElements.get('cv-tab-header')) {
+            customElements.define('cv-tab-header', CVTabHeader);
+        }
+        if (!customElements.get('cv-tab-body')) {
+            customElements.define('cv-tab-body', CVTabBody);
+        }
     }
 
     /**
@@ -2551,28 +2583,6 @@ ${TAB_STYLES}
             // Get tab groups
             const tabGroups = this.core.getTabGroups();
             let tabGroupControlsHTML = '';
-            // Check if any tab group or tab labels contain Font Awesome shortcodes
-            let hasFontAwesomeShortcodes = false;
-            if (this.options.showTabGroups && tabGroups && tabGroups.length > 0) {
-                for (const group of tabGroups) {
-                    if (group.label && /:fa-[\w-]+:/.test(group.label)) {
-                        hasFontAwesomeShortcodes = true;
-                        break;
-                    }
-                    for (const tab of group.tabs) {
-                        if (tab.label && /:fa-[\w-]+:/.test(tab.label)) {
-                            hasFontAwesomeShortcodes = true;
-                            break;
-                        }
-                    }
-                    if (hasFontAwesomeShortcodes)
-                        break;
-                }
-            }
-            // Inject Font Awesome only if shortcodes are found
-            if (hasFontAwesomeShortcodes) {
-                ensureFontAwesomeInjected();
-            }
             if (this.options.showTabGroups && tabGroups && tabGroups.length > 0) {
                 tabGroupControlsHTML = `
         <div class="cv-tabgroup-card cv-tabgroup-header">
@@ -2592,10 +2602,10 @@ ${TAB_STYLES}
           ${tabGroups.map(group => `
             <div class="cv-tabgroup-card cv-tabgroup-item">
               <label class="cv-tabgroup-label" for="tab-group-${group.id}">
-                ${replaceIconShortcodes(group.label || group.id)}
+                ${group.label || group.id}
               </label>
               <select id="tab-group-${group.id}" class="cv-tabgroup-select" data-group-id="${group.id}">
-                ${group.tabs.map(tab => `<option value="${tab.id}">${replaceIconShortcodes(tab.label || tab.id)}</option>`).join('')}
+                ${group.tabs.map(tab => `<option value="${tab.id}">${tab.label || tab.id}</option>`).join('')}
               </select>
             </div>
           `).join('')}
@@ -2973,22 +2983,13 @@ ${TAB_STYLES}
                 let scriptTag = document.currentScript;
                 // Fallback if currentScript is not available (executed after page load)
                 if (!scriptTag) {
-                    // Try to find the script tag by looking for our script
-                    const scripts = document.querySelectorAll('script[src*="@customviews-js"]');
-                    if (scripts.length > 0) {
-                        // Find the most specific match (to avoid matching other custom-views scripts)
-                        for (let i = 0; i < scripts.length; i++) {
-                            const script = scripts[i];
-                            const src = script.getAttribute('src') || '';
-                            // Look for .min.js or .js at the end, or the package root
-                            if (src.match(/@customviews-js\/customviews(\.min)?\.js($|\?)/) || src.includes('@customviews-js/customviews')) {
-                                scriptTag = script;
-                                break;
-                            }
-                        }
-                        // If no specific match found, use the first one
-                        if (!scriptTag) {
-                            scriptTag = scripts[0];
+                    // Match the actual CustomViews bundle files (e.g., custom-views.min.js, custom-views.js)
+                    for (const script of document.scripts) {
+                        const src = script.src || '';
+                        // Match filenames like: custom-views.min.js, custom-views.js, custom-views.esm.js
+                        if (/custom-views(?:\.min)?\.(?:esm\.)?js($|\?)/i.test(src)) {
+                            scriptTag = script;
+                            break;
                         }
                     }
                 }