@customviews-js/customviews 1.1.7 → 1.1.9

package/dist/custom-views.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.1.7
+ * @customviews-js/customviews v1.1.8
  * (c) 2025 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -15,7 +15,8 @@
     class PersistenceManager {
         // Storage keys for localStorage
         static STORAGE_KEYS = {
-            STATE: 'customviews-state'
+            STATE: 'customviews-state',
+            TAB_NAV_VISIBILITY: 'cv-tab-navs-visible'
         };
         /**
          * Check if localStorage is available in the current environment
@@ -52,6 +53,35 @@
             if (!this.isStorageAvailable())
                 return;
             localStorage.removeItem(PersistenceManager.STORAGE_KEYS.STATE);
+            localStorage.removeItem(PersistenceManager.STORAGE_KEYS.TAB_NAV_VISIBILITY);
+        }
+        /**
+         * Persist tab nav visibility preference
+         */
+        persistTabNavVisibility(visible) {
+            if (!this.isStorageAvailable())
+                return;
+            try {
+                localStorage.setItem(PersistenceManager.STORAGE_KEYS.TAB_NAV_VISIBILITY, visible ? 'true' : 'false');
+            }
+            catch (error) {
+                console.warn('Failed to persist tab nav visibility:', error);
+            }
+        }
+        /**
+         * Get persisted tab nav visibility preference
+         */
+        getPersistedTabNavVisibility() {
+            if (!this.isStorageAvailable())
+                return null;
+            try {
+                const raw = localStorage.getItem(PersistenceManager.STORAGE_KEYS.TAB_NAV_VISIBILITY);
+                return raw === null ? null : raw === 'true';
+            }
+            catch (error) {
+                console.warn('Failed to get persisted tab nav visibility:', error);
+                return null;
+            }
         }
         /**
          * Check if any persistence data exists
@@ -1103,14 +1133,10 @@ ${TAB_STYLES}
                 this.applyState(newState);
             });
             // Apply stored nav visibility preference on page load
-            try {
-                const navPref = localStorage.getItem('cv-tab-navs-visible');
-                if (navPref !== null) {
-                    const visible = navPref === 'true';
-                    TabManager.setNavsVisibility(this.rootEl, visible);
-                }
+            const navPref = this.persistenceManager.getPersistedTabNavVisibility();
+            if (navPref !== null) {
+                TabManager.setNavsVisibility(this.rootEl, navPref);
             }
-            catch (e) { /* ignore */ }
             // For session history, clicks on back/forward button
             window.addEventListener("popstate", () => {
                 this.loadAndCallApplyState();
@@ -1177,6 +1203,8 @@ ${TAB_STYLES}
             else {
                 console.warn("No configuration loaded, cannot reset to default state");
             }
+            // Reset tab nav visibility to default (visible)
+            TabManager.setNavsVisibility(this.rootEl, true);
             // Clear URL
             URLStateManager.clearURL();
         }
@@ -1255,6 +1283,18 @@ ${TAB_STYLES}
                 }
             });
         }
+        /**
+         * Persist tab nav visibility preference
+         */
+        persistTabNavVisibility(visible) {
+            this.persistenceManager.persistTabNavVisibility(visible);
+        }
+        /**
+         * Get persisted tab nav visibility preference
+         */
+        getPersistedTabNavVisibility() {
+            return this.persistenceManager.getPersistedTabNavVisibility();
+        }
         cloneState(state) {
             if (!state)
                 return {};
@@ -2073,6 +2113,57 @@ ${TAB_STYLES}
   gap: 1rem;
 }
 
+/* Navigation toggle icon container */
+.cv-nav-toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cv-nav-icon {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+/* Logo box - centered grey box on its own row */
+.cv-tabgroup-logo-box {
+  width: 3.5rem;
+  height: 3.5rem;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-bottom: 0.5rem;
+}
+
+/* Title container for title alignment (without icon) */
+.cv-tabgroup-title-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Hover state for icon - apply to the entire tabgroup-row */
+.cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {
+  color: #3e84f4;
+}
+
+.cv-widget-theme-dark .cv-nav-icon {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {
+  color: #60a5fa;
+}
+
 /* Tab Group Card - Items */
 .cv-tabgroup-card.cv-tabgroup-item {
   display: flex;
@@ -2090,13 +2181,16 @@ ${TAB_STYLES}
 /* Tab Group Info */
 .cv-tabgroup-info {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .cv-tabgroup-title {
   font-weight: 500;
   font-size: 0.875rem;
   color: rgba(0, 0, 0, 0.9);
-  margin: 0 0 0.25rem 0;
+  margin: 0 0 0 0;
 }
 
 .cv-tabgroup-description {
@@ -2287,6 +2381,10 @@ ${TAB_STYLES}
 .cv-btn-icon {
   width: 1rem;
   height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
 }
 
 /* Dark theme custom state styles */
@@ -2412,6 +2510,32 @@ ${TAB_STYLES}
 .cv-widget-theme-dark .cv-welcome-widget-label {
   color: #e2e8f0;
 }
+
+/* Dark theme logo box */
+.cv-widget-theme-dark .cv-tabgroup-logo-box {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Spinning animation for reset button icon */
+@keyframes cv-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.cv-spinning {
+  animation: cv-spin 0.6s ease-in-out;
+}
+
+/* Hide widget icon in print view */
+@media print {
+  .cv-widget-icon {
+    display: none !important;
+  }
+}
 `;
     /**
      * Inject widget styles into the document head
@@ -2456,13 +2580,80 @@ ${TAB_STYLES}
   </svg>`;
     }
     /**
-     * Share icon for share button
+     * Copy icon for sharing URL button
      */
-    function getShareIcon() {
-        return `<svg class="cv-btn-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path xmlns="http://www.w3.org/2000/svg" d="M6 11C6 8.17157 6 6.75736 6.87868 5.87868C7.75736 5 9.17157 5 12 5H15C17.8284 5 19.2426 5 20.1213 5.87868C21 6.75736 21 8.17157 21 11V16C21 18.8284 21 20.2426 20.1213 21.1213C19.2426 22 17.8284 22 15 22H12C9.17157 22 7.75736 22 6.87868 21.1213C6 20.2426 6 18.8284 6 16V11Z" stroke="#1C274C" stroke-width="1.5"/>
-  <path xmlns="http://www.w3.org/2000/svg" opacity="0.5" d="M6 19C4.34315 19 3 17.6569 3 16V10C3 6.22876 3 4.34315 4.17157 3.17157C5.34315 2 7.22876 2 11 2H15C16.6569 2 18 3.34315 18 5" stroke="#1C274C" stroke-width="1.5"/>
-</svg>`;
+    function getCopyIcon() {
+        return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18" version="1.1" fill="currentColor">
+              <g id="surface1">
+                <path d="M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844
+                1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438
+                1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4
+                4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906
+                15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844
+                14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L
+                5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "></path>
+              </g>
+          </svg>`;
+    }
+    function getTickIcon() {
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="2 2 22 22" fill="currentColor">
+            <path d="M 19.28125 5.28125 L 9 15.5625 L 4.71875 11.28125 L 3.28125 12.71875 L 8.28125 17.71875 
+            L 9 18.40625 L 9.71875 17.71875 L 20.71875 6.71875 Z"></path>
+          </svg>`;
+    }
+    function getNavHeadingOnIcon() {
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="250" height="181" viewBox="0 0 250 181">
+            <rect y="34.5001" width="250" height="146" rx="4" stroke="currentColor" stroke-width="10" fill="none"/>
+            <line x1="27" y1="62.0001" x2="77" y2="62.0001" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="77.8888" x2="77" y2="77.8888" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="97.4454" x2="221" y2="97.4454" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="114.555" x2="221" y2="114.555" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="132.889" x2="221" y2="132.889" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="150" x2="221" y2="150" stroke="currentColor" stroke-width="5"/>
+            <line x1="247.5" y1="43.0001" x2="247.5" y2="13.0001" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+            <path d="M185 12.5001L247 12.5001" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+            <line x1="204.09" y1="36.6095" x2="181.698" y2="10.0228" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+            <path d="M125 9.50012L181 9.50012" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+            <path d="M144.305 35.2579L120.095 6.56679" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+            <path d="M120 6.50037L64 6.50037" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+            <path d="M87.1957 36.1024L59 2.50008" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+            <path d="M59 2.50037L3 2.50037" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+            <path d="M2.5 38.5001L2.5 3.00012" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
+          </svg>`;
+    }
+    function getNavHeadingOffIcon() {
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="250" height="181" viewBox="0 0 250 181" fill="currentColor">
+            <rect y="34.5001" width="250" height="146" rx="4" stroke="currentColor" stroke-width="10" fill="none"/>
+            <line x1="27" y1="62" x2="77" y2="62" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="77.8887" x2="77" y2="77.8887" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="97.4453" x2="221" y2="97.4453" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="114.555" x2="221" y2="114.555" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="132.889" x2="221" y2="132.889" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="150" x2="221" y2="150" stroke="currentColor" stroke-width="5"/>
+          </svg>`;
+    }
+    /**
+     * Transition Icon for Navigation Headings
+     */
+    function getNavDashed() {
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="250" height="181" viewBox="0 0 250 181">
+            <rect y="34.5001" width="250" height="146" rx="4" stroke="currentColor" stroke-width="10" fill="none"/>
+            <line x1="27" y1="62.0001" x2="77" y2="62.0001" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="77.8888" x2="77" y2="77.8888" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="97.4454" x2="221" y2="97.4454" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="114.555" x2="221" y2="114.555" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="132.889" x2="221" y2="132.889" stroke="currentColor" stroke-width="5"/>
+            <line x1="27" y1="150" x2="221" y2="150" stroke="currentColor" stroke-width="5"/>
+            <path d="M245 37.0001V39.5001H250V37.0001H247.5H245ZM250 13.0001C250 11.6194 248.881 10.5001 247.5 10.5001C246.119 10.5001 245 11.6194 245 13.0001H247.5H250ZM250 31.0001C250 29.6194 248.881 28.5001 247.5 28.5001C246.119 28.5001 245 29.6194 245 31.0001H247.5H250ZM245 19.0001C245 20.3808 246.119 21.5001 247.5 21.5001C248.881 21.5001 250 20.3808 250 19.0001H247.5H245ZM247.5 37.0001H250V31.0001H247.5H245V37.0001H247.5ZM247.5 19.0001H250V13.0001H247.5H245V19.0001H247.5Z" fill="currentColor"/>
+            <line x1="204.09" y1="36.6095" x2="181.698" y2="10.0228" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
+            <path d="M125 9.50012L181 9.50012" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
+            <path d="M144.305 35.2579L120.095 6.56679" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
+            <path d="M120 6.50037L64 6.50037" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
+            <path d="M87.1957 36.1024L59 2.50008" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
+            <path d="M59 2.50037L3 2.50037" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
+            <path d="M2.5 38.5001L2.5 3.00012" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
+            <path d="M185 12.5001L247 12.5001" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="10 10"/>
+          </svg>`;
     }
 
     class CustomViewsWidget {
@@ -2584,15 +2775,22 @@ ${TAB_STYLES}
             const tabGroups = this.core.getTabGroups();
             let tabGroupControlsHTML = '';
             if (this.options.showTabGroups && tabGroups && tabGroups.length > 0) {
+                // Determine initial nav visibility state
+                const initialNavsVisible = TabManager.areNavsVisible(document.body);
                 tabGroupControlsHTML = `
         <div class="cv-tabgroup-card cv-tabgroup-header">
           <div class="cv-tabgroup-row">
+            <div class="cv-tabgroup-logo-box" id="cv-nav-icon-box">
+              <div class="cv-nav-icon" id="cv-nav-icon">${initialNavsVisible ? getNavHeadingOnIcon() : getNavHeadingOffIcon()}</div>
+            </div>
             <div class="cv-tabgroup-info">
-              <p class="cv-tabgroup-title">Navigation Headers</p>
+              <div class="cv-tabgroup-title-container">
+                <p class="cv-tabgroup-title">Navigation Headers</p>
+              </div>
               <p class="cv-tabgroup-description">Show or hide navigation headers</p>
             </div>
             <label class="cv-toggle-switch cv-nav-toggle">
-              <input class="cv-nav-pref-input" type="checkbox" aria-label="Show or hide navigation headers" />
+              <input class="cv-nav-pref-input" type="checkbox" ${initialNavsVisible ? 'checked' : ''} aria-label="Show or hide navigation headers" />
               <span class="cv-switch-bg"></span>
               <span class="cv-switch-knob"></span>
             </label>
@@ -2650,13 +2848,13 @@ ${TAB_STYLES}
         <footer class="cv-modal-footer">
           ${this.options.showReset ? `
           <button class="cv-reset-btn">
-            ${getResetIcon()}
+            <span class="cv-reset-btn-icon">${getResetIcon()}</span>
             <span>Reset to Default</span>
           </button>
           ` : ''}
           <button class="cv-share-btn">
-            ${getShareIcon()}
             <span>Copy Shareable URL</span>
+            <span class="cv-share-btn-icon">${getCopyIcon()}</span>
           </button>
         </footer>
       </div>
@@ -2684,14 +2882,35 @@ ${TAB_STYLES}
             if (copyUrlBtn) {
                 copyUrlBtn.addEventListener('click', () => {
                     this.copyShareableURL();
+                    // Visual feedback: change icon to tick for 3 seconds
+                    const iconContainer = copyUrlBtn.querySelector('.cv-share-btn-icon');
+                    if (iconContainer) {
+                        const originalIcon = iconContainer.innerHTML;
+                        iconContainer.innerHTML = getTickIcon();
+                        // Revert after 3 seconds
+                        setTimeout(() => {
+                            iconContainer.innerHTML = originalIcon;
+                        }, 3000);
+                    }
                 });
             }
             // Reset to default button
             const resetBtn = this.modal.querySelector('.cv-reset-btn');
             if (resetBtn) {
                 resetBtn.addEventListener('click', () => {
+                    // Add spinning animation to icon
+                    const resetIcon = resetBtn.querySelector('.cv-reset-btn-icon');
+                    if (resetIcon) {
+                        resetIcon.classList.add('cv-spinning');
+                    }
                     this.core.resetToDefault();
                     this.loadCurrentStateIntoForm();
+                    // Remove spinning animation after it completes
+                    setTimeout(() => {
+                        if (resetIcon) {
+                            resetIcon.classList.remove('cv-spinning');
+                        }
+                    }, 600); // 600ms matches the animation duration
                 });
             }
             // Listen to toggle switches
@@ -2725,14 +2944,34 @@ ${TAB_STYLES}
             });
             // Listener for show/hide tab navs
             const tabNavToggle = this.modal.querySelector('.cv-nav-pref-input');
-            if (tabNavToggle) {
+            const navIcon = this.modal?.querySelector('#cv-nav-icon');
+            const navHeaderCard = this.modal?.querySelector('.cv-tabgroup-card.cv-tabgroup-header');
+            if (tabNavToggle && navIcon && navHeaderCard) {
+                // Helper to update icon based on state
+                const updateIcon = (isVisible, isHovering = false) => {
+                    if (isHovering) {
+                        // On hover, show the transition icon
+                        navIcon.innerHTML = getNavDashed();
+                    }
+                    else {
+                        // Normal state, show the status icon (on if visible, off if hidden)
+                        navIcon.innerHTML = isVisible ? getNavHeadingOnIcon() : getNavHeadingOffIcon();
+                    }
+                };
+                // Add hover listeners to entire header card
+                navHeaderCard.addEventListener('mouseenter', () => {
+                    updateIcon(tabNavToggle.checked, true);
+                });
+                navHeaderCard.addEventListener('mouseleave', () => {
+                    updateIcon(tabNavToggle.checked, false);
+                });
+                // Add change listener
                 tabNavToggle.addEventListener('change', () => {
                     const visible = tabNavToggle.checked;
-                    // Persist preference
-                    try {
-                        localStorage.setItem('cv-tab-navs-visible', visible ? 'true' : 'false');
-                    }
-                    catch (e) { /* ignore */ }
+                    // Update the icon based on new state (not hovering)
+                    updateIcon(visible, false);
+                    // Persist preference via core
+                    this.core.persistTabNavVisibility(visible);
                     // Apply to DOM using TabManager via core
                     try {
                         const rootEl = document.body;
@@ -2844,21 +3083,22 @@ ${TAB_STYLES}
             });
             // Load tab nav visibility preference
             const navPref = (() => {
-                try {
-                    const raw = localStorage.getItem('cv-tab-navs-visible');
-                    if (raw === null)
-                        return TabManager.areNavsVisible(document.body);
-                    return raw === 'true';
-                }
-                catch (e) {
-                    return TabManager.areNavsVisible(document.body);
+                const persisted = this.core.getPersistedTabNavVisibility();
+                if (persisted !== null) {
+                    return persisted;
                 }
+                return TabManager.areNavsVisible(document.body);
             })();
             const tabNavToggle = this.modal.querySelector('.cv-nav-pref-input');
+            const navIcon = this.modal?.querySelector('#cv-nav-icon');
             if (tabNavToggle) {
                 tabNavToggle.checked = navPref;
                 // Ensure UI matches actual visibility
                 TabManager.setNavsVisibility(document.body, navPref);
+                // Update the nav icon to reflect the current state
+                if (navIcon) {
+                    navIcon.innerHTML = navPref ? getNavHeadingOnIcon() : getNavHeadingOffIcon();
+                }
             }
         }
         /**
@@ -2875,12 +3115,19 @@ ${TAB_STYLES}
             // Check if welcome has been shown before
             const hasSeenWelcome = localStorage.getItem(STORAGE_KEY);
             if (!hasSeenWelcome) {
-                // Show welcome modal after a short delay to let the page settle
-                setTimeout(() => {
-                    this.createWelcomeModal();
-                }, 500);
-                // Mark as shown
-                localStorage.setItem(STORAGE_KEY, 'true');
+                // Check if this page has any custom views elements
+                const hasCustomViewElements = document.querySelector('cv-tabgroup') !== null ||
+                    document.querySelector('cv-tab') !== null ||
+                    document.querySelector('cv-toggle') !== null ||
+                    document.querySelector('[data-cv-toggle]') !== null;
+                if (hasCustomViewElements) {
+                    // Show welcome modal after a short delay to let the page settle
+                    setTimeout(() => {
+                        this.createWelcomeModal();
+                    }, 500);
+                    // Mark as shown
+                    localStorage.setItem(STORAGE_KEY, 'true');
+                }
             }
         }
         /**
@@ -2979,17 +3226,20 @@ ${TAB_STYLES}
             }
             window.__customViewsInitInProgress = true;
             try {
-                // Find the script tag
+                // Find the script tag that loaded this script
                 let scriptTag = document.currentScript;
-                // Fallback if currentScript is not available (executed after page load)
-                if (!scriptTag) {
-                    // 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;
+                if (!scriptTag || !scriptTag.hasAttribute('data-base-url')) {
+                    const dataAttrMatch = document.querySelector('script[data-base-url]');
+                    if (dataAttrMatch) {
+                        scriptTag = dataAttrMatch;
+                    }
+                    else {
+                        for (const script of document.scripts) {
+                            const src = script.src || '';
+                            if (/(?:custom[-_]views|@customviews-js\/customviews)(?:\.min)?\.(?:esm\.)?js($|\?)/i.test(src)) {
+                                scriptTag = script;
+                                break;
+                            }
                         }
                     }
                 }