@customviews-js/customviews 1.1.3 → 1.1.4

package/dist/custom-views.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.1.3
+ * @customviews-js/customviews v1.1.4
  * (c) 2025 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -285,8 +285,12 @@
         document.head.appendChild(link);
     }
     function replaceIconShortcodes(text) {
-        // Handle Font Awesome shortcodes
-        return text.replace(/:fa-([\w-]+):/g, (_, icon) => `<i class="fa fa-${icon}"></i>`);
+        // 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) {
@@ -2042,12 +2046,34 @@ ${TAB_STYLES}
             // Get tab groups
             const tabGroups = this.core.getTabGroups();
             let tabGroupsHTML = '';
+            // 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) {
                 const tabGroupControls = tabGroups.map(group => {
-                    const options = group.tabs.map(tab => `<option value="${tab.id}">${tab.label || tab.id}</option>`).join('');
+                    const options = group.tabs.map(tab => `<option value="${tab.id}">${replaceIconShortcodes(tab.label || tab.id)}</option>`).join('');
                     return `
           <div class="cv-tab-group-control">
-            <label for="tab-group-${group.id}">${group.label || group.id}</label>
+            <label for="tab-group-${group.id}">${replaceIconShortcodes(group.label || group.id)}</label>
             <select id="tab-group-${group.id}" class="cv-tab-group-select" data-group-id="${group.id}">
               ${options}
             </select>