@customviews-js/customviews 1.1.6 → 1.1.7

package/dist/custom-views.core.esm.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.
  */
@@ -267,102 +267,6 @@ class VisibilityManager {
     }
 }
 
-/** --- 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';
@@ -449,37 +353,35 @@ class TabManager {
             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)
@@ -514,23 +416,30 @@ class TabManager {
                 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);
@@ -767,6 +676,83 @@ class AssetsManager {
     }
 }
 
+/** --- 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";
@@ -878,16 +864,21 @@ const TAB_STYLES = `
   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;
@@ -897,6 +888,13 @@ const TAB_STYLES = `
   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,
@@ -949,6 +947,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;
@@ -1311,6 +1319,24 @@ class CVToggle extends HTMLElement {
         // 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
  */
@@ -1325,6 +1351,12 @@ function registerCustomElements() {
     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);
+    }
 }
 
 /**
@@ -2545,28 +2577,6 @@ class CustomViewsWidget {
         // 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">
@@ -2586,10 +2596,10 @@ class CustomViewsWidget {
           ${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('')}
@@ -2967,22 +2977,13 @@ function initializeFromScript() {
             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;
                     }
                 }
             }