@customviews-js/customviews 1.1.3 → 1.1.4

package/dist/custom-views.esm.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.
  */
@@ -279,8 +279,12 @@ function ensureFontAwesomeInjected() {
     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) {
@@ -2036,12 +2040,34 @@ class CustomViewsWidget {
         // 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>