web-mojo 2.2.69 → 2.2.71

package/dist/mojo-auth.es.js

@@ -1,9 +1,9 @@
-var v = (f, s) => () => (s || f((s = { exports: {} }).exports, s), s.exports);
-var y = v((S, d) => {
-  (function(f, s) {
-    typeof define == "function" && define.amd ? define([], s) : typeof d < "u" && d.exports ? d.exports = s() : f.MojoAuth = s();
+var k = (g, u) => () => (u || g((u = { exports: {} }).exports, u), u.exports);
+var y = k((S, p) => {
+  (function(g, u) {
+    typeof define == "function" && define.amd ? define([], u) : typeof p < "u" && p.exports ? p.exports = u() : g.MojoAuth = u();
   })(typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : void 0, function() {
-    var f = "", s = {}, c = {
+    var g = "", u = {}, c = {
       access: "access_token",
       refresh: "refresh_token"
     }, w = {
@@ -20,12 +20,12 @@ var y = v((S, d) => {
       refreshToken: "/api/refresh_token"
     };
     function i(e, r) {
-      var t = s[e] || w[e] || "";
+      var t = u[e] || w[e] || "";
       return r && Object.keys(r).forEach(function(n) {
         t = t.replace("{" + n + "}", r[n]);
-      }), f.replace(/\/$/, "") + t;
+      }), g.replace(/\/$/, "") + t;
     }
-    function u(e, r, t) {
+    function s(e, r, t) {
       var n = Object.assign({ "Content-Type": "application/json" }, {});
       return fetch(e, {
         method: "POST",
@@ -49,25 +49,25 @@ var y = v((S, d) => {
         });
       });
     }
-    function l(e) {
+    function h(e) {
       var r = e && e.data ? e.data : e;
       if (!r || !r.access_token) throw new Error("No access_token in response");
       return localStorage.setItem(c.access, r.access_token), r.refresh_token && localStorage.setItem(c.refresh, r.refresh_token), r;
     }
-    function k(e) {
+    function v(e) {
       return e ? typeof e == "string" ? e : e.message || e.error || Array.isArray(e.errors) && e.errors[0] && e.errors[0].message || "An error occurred" : "An error occurred";
     }
-    function p(e) {
+    function d(e) {
       for (var r = e.replace(/-/g, "+").replace(/_/g, "/"), t = atob(r), n = new Uint8Array(t.length), o = 0; o < t.length; o++)
         n[o] = t.charCodeAt(o);
       return n.buffer;
     }
-    function h(e) {
+    function l(e) {
       for (var r = new Uint8Array(e), t = "", n = 0; n < r.byteLength; n++)
         t += String.fromCharCode(r[n]);
       return btoa(t).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
     }
-    var g = {
+    var f = {
       /**
        * Initialize the library. Must be called before any auth method.
        * @param {object} config
@@ -76,7 +76,7 @@ var y = v((S, d) => {
        */
       init: function(e) {
         if (!e || !e.baseURL) throw new Error("MojoAuth.init: baseURL is required");
-        f = e.baseURL, s = Object.assign({}, e.endpoints || {});
+        g = e.baseURL, u = Object.assign({}, e.endpoints || {});
       },
       // -----------------------------------------------------------------------
       // JWT Login
@@ -92,9 +92,9 @@ var y = v((S, d) => {
        * instead of tokens. Check result.mfa_required before assuming login is complete.
        */
       login: function(e, r) {
-        return u(i("login"), { username: e, password: r }).then(function(t) {
+        return s(i("login"), { username: e, password: r }).then(function(t) {
           var n = t.data || t;
-          return n.mfa_required ? n : l(t);
+          return n.mfa_required ? n : h(t);
         });
       },
       // -----------------------------------------------------------------------
@@ -106,7 +106,7 @@ var y = v((S, d) => {
        * @returns {Promise<object>}
        */
       forgotPasswordCode: function(e) {
-        return u(i("forgotPassword"), { email: e, method: "code" });
+        return s(i("forgotPassword"), { email: e, method: "code" });
       },
       /**
        * Complete password reset using the emailed code.
@@ -117,11 +117,11 @@ var y = v((S, d) => {
        * @returns {Promise<object>}
        */
       resetWithCode: function(e, r, t) {
-        return u(i("resetWithCode"), {
+        return s(i("resetWithCode"), {
           email: e,
           code: r,
           new_password: t
-        }).then(l);
+        }).then(h);
       },
       // -----------------------------------------------------------------------
       // Password Reset — Link / Token method
@@ -132,7 +132,7 @@ var y = v((S, d) => {
        * @returns {Promise<object>}
        */
       forgotPasswordLink: function(e) {
-        return u(i("forgotPassword"), { email: e, method: "link" });
+        return s(i("forgotPassword"), { email: e, method: "link" });
       },
       /**
        * Complete password reset using the token from the reset link email.
@@ -142,10 +142,10 @@ var y = v((S, d) => {
        * @returns {Promise<object>}
        */
       resetWithToken: function(e, r) {
-        return u(i("resetWithToken"), {
+        return s(i("resetWithToken"), {
           token: e,
           new_password: r
-        }).then(l);
+        }).then(h);
       },
       // -----------------------------------------------------------------------
       // Magic Login (passwordless email link)
@@ -156,7 +156,7 @@ var y = v((S, d) => {
        * @returns {Promise<object>}
        */
       sendMagicLink: function(e) {
-        return u(i("magicSend"), { email: e });
+        return s(i("magicSend"), { email: e });
       },
       /**
        * Complete login using the ml: token from the magic link URL.
@@ -165,7 +165,7 @@ var y = v((S, d) => {
        * @returns {Promise<object>}
        */
       loginWithMagicToken: function(e) {
-        return u(i("magicLogin"), { token: e }).then(l);
+        return s(i("magicLogin"), { token: e }).then(h);
       },
       /**
        * Convenience: read ?token= from current URL and login if it's a magic link token.
@@ -177,7 +177,7 @@ var y = v((S, d) => {
         if (!r || r.indexOf("ml:") !== 0) return Promise.resolve(null);
         e.delete("token");
         var t = e.toString() ? window.location.pathname + "?" + e.toString() : window.location.pathname;
-        return window.history.replaceState({}, "", t), g.loginWithMagicToken(r);
+        return window.history.replaceState({}, "", t), f.loginWithMagicToken(r);
       },
       // -----------------------------------------------------------------------
       // Passkey Login (WebAuthn)
@@ -189,6 +189,37 @@ var y = v((S, d) => {
       isPasskeySupported: function() {
         return typeof window < "u" && typeof window.PublicKeyCredential < "u" && typeof navigator.credentials < "u" && typeof navigator.credentials.get == "function";
       },
+      /**
+       * Login with a passkey (WebAuthn) without requiring a username.
+       * Uses discoverable credentials — browser shows all passkeys for this domain.
+       * Handles the full begin → browser prompt → complete flow.
+       * Stores tokens on success.
+       * @returns {Promise<object>}
+       */
+      loginWithPasskeyDiscoverable: function() {
+        return f.isPasskeySupported() ? s(i("passkeyLoginBegin"), {}).then(function(e) {
+          var r = e.data || e, t = r.challenge_id, n = r.publicKey;
+          return n.challenge = d(n.challenge), n.allowCredentials && (n.allowCredentials = n.allowCredentials.map(function(o) {
+            return Object.assign({}, o, { id: d(o.id) });
+          })), navigator.credentials.get({ publicKey: n }).then(function(o) {
+            if (!o) throw new Error("No credential received from authenticator");
+            return s(i("passkeyLoginComplete"), {
+              challenge_id: t,
+              credential: {
+                id: o.id,
+                rawId: l(o.rawId),
+                type: o.type,
+                response: {
+                  clientDataJSON: l(o.response.clientDataJSON),
+                  authenticatorData: l(o.response.authenticatorData),
+                  signature: l(o.response.signature),
+                  userHandle: o.response.userHandle ? l(o.response.userHandle) : null
+                }
+              }
+            });
+          });
+        }).then(h) : Promise.reject(new Error("Passkeys are not supported in this browser"));
+      },
       /**
        * Login with a passkey (WebAuthn).
        * Handles the full begin → browser prompt → complete flow.
@@ -197,28 +228,28 @@ var y = v((S, d) => {
        * @returns {Promise<object>}
        */
       loginWithPasskey: function(e) {
-        return g.isPasskeySupported() ? u(i("passkeyLoginBegin"), { username: e }).then(function(r) {
+        return f.isPasskeySupported() ? s(i("passkeyLoginBegin"), { username: e }).then(function(r) {
           var t = r.data || r, n = t.challenge_id, o = t.publicKey;
-          return o.challenge = p(o.challenge), o.allowCredentials && (o.allowCredentials = o.allowCredentials.map(function(a) {
-            return Object.assign({}, a, { id: p(a.id) });
+          return o.challenge = d(o.challenge), o.allowCredentials && (o.allowCredentials = o.allowCredentials.map(function(a) {
+            return Object.assign({}, a, { id: d(a.id) });
           })), navigator.credentials.get({ publicKey: o }).then(function(a) {
             if (!a) throw new Error("No credential received from authenticator");
-            return u(i("passkeyLoginComplete"), {
+            return s(i("passkeyLoginComplete"), {
               challenge_id: n,
               credential: {
                 id: a.id,
-                rawId: h(a.rawId),
+                rawId: l(a.rawId),
                 type: a.type,
                 response: {
-                  clientDataJSON: h(a.response.clientDataJSON),
-                  authenticatorData: h(a.response.authenticatorData),
-                  signature: h(a.response.signature),
-                  userHandle: a.response.userHandle ? h(a.response.userHandle) : null
+                  clientDataJSON: l(a.response.clientDataJSON),
+                  authenticatorData: l(a.response.authenticatorData),
+                  signature: l(a.response.signature),
+                  userHandle: a.response.userHandle ? l(a.response.userHandle) : null
                 }
               }
             });
           });
-        }).then(l) : Promise.reject(new Error("Passkeys are not supported in this browser"));
+        }).then(h) : Promise.reject(new Error("Passkeys are not supported in this browser"));
       },
       // -----------------------------------------------------------------------
       // Google OAuth
@@ -228,25 +259,45 @@ var y = v((S, d) => {
        * Fetches the authorization URL from the backend and redirects the browser.
        * @returns {Promise<void>}
        */
-      startGoogleLogin: function() {
-        return m(i("oauthBegin", { provider: "google" })).then(function(e) {
-          var r = e.data || e;
-          if (!r.auth_url) throw new Error("No auth_url in OAuth begin response");
-          window.location.href = r.auth_url;
+      /**
+       * Start an OAuth login flow for any provider.
+       * Stores the provider in sessionStorage so the callback page knows which provider to complete.
+       * @param {string} provider     - e.g. 'google', 'apple'
+       * @param {string} [callbackUrl] - URL Google/Apple should redirect back to.
+       *                                 Defaults to the current page URL (strip query/hash).
+       *                                 Must be registered in the provider's console AND
+       *                                 allowed by the backend (ALLOWED_REDIRECT_URLS or per-group).
+       * @returns {Promise<void>}
+       */
+      startOAuthLogin: function(e, r) {
+        sessionStorage.setItem("oauth_provider", e);
+        var t = r || window.location.origin + window.location.pathname, n = i("oauthBegin", { provider: e }) + "?redirect_uri=" + encodeURIComponent(t);
+        return m(n).then(function(o) {
+          var a = o.data || o;
+          if (!a.auth_url) throw new Error("No auth_url in OAuth begin response");
+          window.location.href = a.auth_url;
         });
       },
+      startGoogleLogin: function(e) {
+        return f.startOAuthLogin("google", e);
+      },
       /**
-       * Complete Google OAuth login — call this on your OAuth callback page.
+       * Complete OAuth login for any provider — call this on your OAuth callback page.
        * Reads ?code and ?state from the current URL automatically.
        * Stores tokens on success.
+       * @param {string} provider  - e.g. 'google'
        * @returns {Promise<object>}
        */
+      completeOAuthLogin: function(e) {
+        var r = new URLSearchParams(window.location.search), t = r.get("code"), n = r.get("state");
+        return t ? s(i("oauthComplete", { provider: e }), {
+          code: t,
+          state: n
+        }).then(h) : Promise.reject(new Error("No OAuth code in URL"));
+      },
+      /** @deprecated use completeOAuthLogin('google') */
       completeGoogleLogin: function() {
-        var e = new URLSearchParams(window.location.search), r = e.get("code"), t = e.get("state");
-        return r ? u(i("oauthComplete", { provider: "google" }), {
-          code: r,
-          state: t
-        }).then(l) : Promise.reject(new Error("No OAuth code in URL"));
+        return f.completeOAuthLogin("google");
       },
       // -----------------------------------------------------------------------
       // Session helpers
@@ -309,7 +360,7 @@ var y = v((S, d) => {
        * @returns {boolean}
        */
       isTokenExpired: function() {
-        var e = g.getTokenPayload();
+        var e = f.getTokenPayload();
         return !e || !e.exp ? !0 : Math.floor(Date.now() / 1e3) >= e.exp;
       },
       /**
@@ -319,7 +370,7 @@ var y = v((S, d) => {
        */
       refreshToken: function() {
         var e = localStorage.getItem(c.refresh);
-        return e ? u(i("refreshToken"), { refresh_token: e }).then(l) : Promise.reject(new Error("No refresh token stored"));
+        return e ? s(i("refreshToken"), { refresh_token: e }).then(h) : Promise.reject(new Error("No refresh token stored"));
       },
       // -----------------------------------------------------------------------
       // Error helper
@@ -330,9 +381,9 @@ var y = v((S, d) => {
        * @param {any} err  - the caught error (object, string, etc.)
        * @returns {string}
        */
-      getError: k
+      getError: v
     };
-    return g;
+    return f;
   });
 });
 export default y();

package/dist/mojo-auth.umd.js

@@ -1 +1 @@
-(function(c){typeof define=="function"&&define.amd?define(c):c()})((function(){"use strict";(function(c,f){typeof define=="function"&&define.amd?define([],f):typeof module<"u"&&module.exports?module.exports=f():c.MojoAuth=f()})(typeof globalThis<"u"?globalThis:typeof window<"u"?window:void 0,function(){var c="",f={},u={access:"access_token",refresh:"refresh_token"},p={login:"/api/login",forgotPassword:"/api/auth/forgot",resetWithCode:"/api/auth/password/reset/code",resetWithToken:"/api/auth/password/reset/token",magicSend:"/api/auth/magic/send",magicLogin:"/api/auth/magic/login",passkeyLoginBegin:"/api/auth/passkeys/login/begin",passkeyLoginComplete:"/api/auth/passkeys/login/complete",oauthBegin:"/api/auth/oauth/{provider}/begin",oauthComplete:"/api/auth/oauth/{provider}/complete",refreshToken:"/api/refresh_token"};function i(e,r){var t=f[e]||p[e]||"";return r&&Object.keys(r).forEach(function(n){t=t.replace("{"+n+"}",r[n])}),c.replace(/\/$/,"")+t}function s(e,r,t){var n=Object.assign({"Content-Type":"application/json"},{});return fetch(e,{method:"POST",headers:n,body:JSON.stringify(r||{})}).then(function(o){return o.json().then(function(a){if(!o.ok)throw a;return a})})}function w(e,r){return fetch(e,{method:"GET",headers:Object.assign({"Content-Type":"application/json"},{})}).then(function(t){return t.json().then(function(n){if(!t.ok)throw n;return n})})}function l(e){var r=e&&e.data?e.data:e;if(!r||!r.access_token)throw new Error("No access_token in response");return localStorage.setItem(u.access,r.access_token),r.refresh_token&&localStorage.setItem(u.refresh,r.refresh_token),r}function m(e){return e?typeof e=="string"?e:e.message||e.error||Array.isArray(e.errors)&&e.errors[0]&&e.errors[0].message||"An error occurred":"An error occurred"}function g(e){for(var r=e.replace(/-/g,"+").replace(/_/g,"/"),t=atob(r),n=new Uint8Array(t.length),o=0;o<t.length;o++)n[o]=t.charCodeAt(o);return n.buffer}function d(e){for(var r=new Uint8Array(e),t="",n=0;n<r.byteLength;n++)t+=String.fromCharCode(r[n]);return btoa(t).replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,"")}var h={init:function(e){if(!e||!e.baseURL)throw new Error("MojoAuth.init: baseURL is required");c=e.baseURL,f=Object.assign({},e.endpoints||{})},login:function(e,r){return s(i("login"),{username:e,password:r}).then(function(t){var n=t.data||t;return n.mfa_required?n:l(t)})},forgotPasswordCode:function(e){return s(i("forgotPassword"),{email:e,method:"code"})},resetWithCode:function(e,r,t){return s(i("resetWithCode"),{email:e,code:r,new_password:t}).then(l)},forgotPasswordLink:function(e){return s(i("forgotPassword"),{email:e,method:"link"})},resetWithToken:function(e,r){return s(i("resetWithToken"),{token:e,new_password:r}).then(l)},sendMagicLink:function(e){return s(i("magicSend"),{email:e})},loginWithMagicToken:function(e){return s(i("magicLogin"),{token:e}).then(l)},handleMagicTokenFromURL:function(){var e=new URLSearchParams(window.location.search),r=e.get("token");if(!r||r.indexOf("ml:")!==0)return Promise.resolve(null);e.delete("token");var t=e.toString()?window.location.pathname+"?"+e.toString():window.location.pathname;return window.history.replaceState({},"",t),h.loginWithMagicToken(r)},isPasskeySupported:function(){return typeof window<"u"&&typeof window.PublicKeyCredential<"u"&&typeof navigator.credentials<"u"&&typeof navigator.credentials.get=="function"},loginWithPasskey:function(e){return h.isPasskeySupported()?s(i("passkeyLoginBegin"),{username:e}).then(function(r){var t=r.data||r,n=t.challenge_id,o=t.publicKey;return o.challenge=g(o.challenge),o.allowCredentials&&(o.allowCredentials=o.allowCredentials.map(function(a){return Object.assign({},a,{id:g(a.id)})})),navigator.credentials.get({publicKey:o}).then(function(a){if(!a)throw new Error("No credential received from authenticator");return s(i("passkeyLoginComplete"),{challenge_id:n,credential:{id:a.id,rawId:d(a.rawId),type:a.type,response:{clientDataJSON:d(a.response.clientDataJSON),authenticatorData:d(a.response.authenticatorData),signature:d(a.response.signature),userHandle:a.response.userHandle?d(a.response.userHandle):null}}})})}).then(l):Promise.reject(new Error("Passkeys are not supported in this browser"))},startGoogleLogin:function(){return w(i("oauthBegin",{provider:"google"})).then(function(e){var r=e.data||e;if(!r.auth_url)throw new Error("No auth_url in OAuth begin response");window.location.href=r.auth_url})},completeGoogleLogin:function(){var e=new URLSearchParams(window.location.search),r=e.get("code"),t=e.get("state");return r?s(i("oauthComplete",{provider:"google"}),{code:r,state:t}).then(l):Promise.reject(new Error("No OAuth code in URL"))},logout:function(){localStorage.removeItem(u.access),localStorage.removeItem(u.refresh)},isAuthenticated:function(){return!!localStorage.getItem(u.access)},getToken:function(){return localStorage.getItem(u.access)},getRefreshToken:function(){return localStorage.getItem(u.refresh)},getAuthHeader:function(){var e=localStorage.getItem(u.access);return e?"Bearer "+e:null},getTokenPayload:function(){var e=localStorage.getItem(u.access);if(!e)return null;try{var r=e.split(".");if(r.length!==3)return null;var t=r[1].replace(/-/g,"+").replace(/_/g,"/"),n=4-t.length%4;return n!==4&&(t+="====".slice(0,n)),JSON.parse(atob(t))}catch{return null}},isTokenExpired:function(){var e=h.getTokenPayload();return!e||!e.exp?!0:Math.floor(Date.now()/1e3)>=e.exp},refreshToken:function(){var e=localStorage.getItem(u.refresh);return e?s(i("refreshToken"),{refresh_token:e}).then(l):Promise.reject(new Error("No refresh token stored"))},getError:m};return h})}));
+(function(f){typeof define=="function"&&define.amd?define(f):f()})((function(){"use strict";(function(f,h){typeof define=="function"&&define.amd?define([],h):typeof module<"u"&&module.exports?module.exports=h():f.MojoAuth=h()})(typeof globalThis<"u"?globalThis:typeof window<"u"?window:void 0,function(){var f="",h={},u={access:"access_token",refresh:"refresh_token"},p={login:"/api/login",forgotPassword:"/api/auth/forgot",resetWithCode:"/api/auth/password/reset/code",resetWithToken:"/api/auth/password/reset/token",magicSend:"/api/auth/magic/send",magicLogin:"/api/auth/magic/login",passkeyLoginBegin:"/api/auth/passkeys/login/begin",passkeyLoginComplete:"/api/auth/passkeys/login/complete",oauthBegin:"/api/auth/oauth/{provider}/begin",oauthComplete:"/api/auth/oauth/{provider}/complete",refreshToken:"/api/refresh_token"};function i(e,n){var t=h[e]||p[e]||"";return n&&Object.keys(n).forEach(function(r){t=t.replace("{"+r+"}",n[r])}),f.replace(/\/$/,"")+t}function s(e,n,t){var r=Object.assign({"Content-Type":"application/json"},{});return fetch(e,{method:"POST",headers:r,body:JSON.stringify(n||{})}).then(function(o){return o.json().then(function(a){if(!o.ok)throw a;return a})})}function w(e,n){return fetch(e,{method:"GET",headers:Object.assign({"Content-Type":"application/json"},{})}).then(function(t){return t.json().then(function(r){if(!t.ok)throw r;return r})})}function l(e){var n=e&&e.data?e.data:e;if(!n||!n.access_token)throw new Error("No access_token in response");return localStorage.setItem(u.access,n.access_token),n.refresh_token&&localStorage.setItem(u.refresh,n.refresh_token),n}function m(e){return e?typeof e=="string"?e:e.message||e.error||Array.isArray(e.errors)&&e.errors[0]&&e.errors[0].message||"An error occurred":"An error occurred"}function g(e){for(var n=e.replace(/-/g,"+").replace(/_/g,"/"),t=atob(n),r=new Uint8Array(t.length),o=0;o<t.length;o++)r[o]=t.charCodeAt(o);return r.buffer}function c(e){for(var n=new Uint8Array(e),t="",r=0;r<n.byteLength;r++)t+=String.fromCharCode(n[r]);return btoa(t).replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,"")}var d={init:function(e){if(!e||!e.baseURL)throw new Error("MojoAuth.init: baseURL is required");f=e.baseURL,h=Object.assign({},e.endpoints||{})},login:function(e,n){return s(i("login"),{username:e,password:n}).then(function(t){var r=t.data||t;return r.mfa_required?r:l(t)})},forgotPasswordCode:function(e){return s(i("forgotPassword"),{email:e,method:"code"})},resetWithCode:function(e,n,t){return s(i("resetWithCode"),{email:e,code:n,new_password:t}).then(l)},forgotPasswordLink:function(e){return s(i("forgotPassword"),{email:e,method:"link"})},resetWithToken:function(e,n){return s(i("resetWithToken"),{token:e,new_password:n}).then(l)},sendMagicLink:function(e){return s(i("magicSend"),{email:e})},loginWithMagicToken:function(e){return s(i("magicLogin"),{token:e}).then(l)},handleMagicTokenFromURL:function(){var e=new URLSearchParams(window.location.search),n=e.get("token");if(!n||n.indexOf("ml:")!==0)return Promise.resolve(null);e.delete("token");var t=e.toString()?window.location.pathname+"?"+e.toString():window.location.pathname;return window.history.replaceState({},"",t),d.loginWithMagicToken(n)},isPasskeySupported:function(){return typeof window<"u"&&typeof window.PublicKeyCredential<"u"&&typeof navigator.credentials<"u"&&typeof navigator.credentials.get=="function"},loginWithPasskeyDiscoverable:function(){return d.isPasskeySupported()?s(i("passkeyLoginBegin"),{}).then(function(e){var n=e.data||e,t=n.challenge_id,r=n.publicKey;return r.challenge=g(r.challenge),r.allowCredentials&&(r.allowCredentials=r.allowCredentials.map(function(o){return Object.assign({},o,{id:g(o.id)})})),navigator.credentials.get({publicKey:r}).then(function(o){if(!o)throw new Error("No credential received from authenticator");return s(i("passkeyLoginComplete"),{challenge_id:t,credential:{id:o.id,rawId:c(o.rawId),type:o.type,response:{clientDataJSON:c(o.response.clientDataJSON),authenticatorData:c(o.response.authenticatorData),signature:c(o.response.signature),userHandle:o.response.userHandle?c(o.response.userHandle):null}}})})}).then(l):Promise.reject(new Error("Passkeys are not supported in this browser"))},loginWithPasskey:function(e){return d.isPasskeySupported()?s(i("passkeyLoginBegin"),{username:e}).then(function(n){var t=n.data||n,r=t.challenge_id,o=t.publicKey;return o.challenge=g(o.challenge),o.allowCredentials&&(o.allowCredentials=o.allowCredentials.map(function(a){return Object.assign({},a,{id:g(a.id)})})),navigator.credentials.get({publicKey:o}).then(function(a){if(!a)throw new Error("No credential received from authenticator");return s(i("passkeyLoginComplete"),{challenge_id:r,credential:{id:a.id,rawId:c(a.rawId),type:a.type,response:{clientDataJSON:c(a.response.clientDataJSON),authenticatorData:c(a.response.authenticatorData),signature:c(a.response.signature),userHandle:a.response.userHandle?c(a.response.userHandle):null}}})})}).then(l):Promise.reject(new Error("Passkeys are not supported in this browser"))},startOAuthLogin:function(e,n){sessionStorage.setItem("oauth_provider",e);var t=n||window.location.origin+window.location.pathname,r=i("oauthBegin",{provider:e})+"?redirect_uri="+encodeURIComponent(t);return w(r).then(function(o){var a=o.data||o;if(!a.auth_url)throw new Error("No auth_url in OAuth begin response");window.location.href=a.auth_url})},startGoogleLogin:function(e){return d.startOAuthLogin("google",e)},completeOAuthLogin:function(e){var n=new URLSearchParams(window.location.search),t=n.get("code"),r=n.get("state");return t?s(i("oauthComplete",{provider:e}),{code:t,state:r}).then(l):Promise.reject(new Error("No OAuth code in URL"))},completeGoogleLogin:function(){return d.completeOAuthLogin("google")},logout:function(){localStorage.removeItem(u.access),localStorage.removeItem(u.refresh)},isAuthenticated:function(){return!!localStorage.getItem(u.access)},getToken:function(){return localStorage.getItem(u.access)},getRefreshToken:function(){return localStorage.getItem(u.refresh)},getAuthHeader:function(){var e=localStorage.getItem(u.access);return e?"Bearer "+e:null},getTokenPayload:function(){var e=localStorage.getItem(u.access);if(!e)return null;try{var n=e.split(".");if(n.length!==3)return null;var t=n[1].replace(/-/g,"+").replace(/_/g,"/"),r=4-t.length%4;return r!==4&&(t+="====".slice(0,r)),JSON.parse(atob(t))}catch{return null}},isTokenExpired:function(){var e=d.getTokenPayload();return!e||!e.exp?!0:Math.floor(Date.now()/1e3)>=e.exp},refreshToken:function(){var e=localStorage.getItem(u.refresh);return e?s(i("refreshToken"),{refresh_token:e}).then(l):Promise.reject(new Error("No refresh token stored"))},getError:m};return d})}));

package/dist/timeline.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./chunks/ListView-CMZpwyyC.js"),e=require("./chunks/Rest-B1eUyLX5.js"),i=require("./chunks/Collection-CmjTsmrP.js");class TimelineViewItem extends t.ListViewItem{constructor(t={}){super({className:"timeline-item",...t}),this.dateFormat=t.dateFormat||"date",this.dotStyle=t.dotStyle||"solid",this.showDate=!1!==t.showDate,this.theme=t.theme||"primary",this.template||(this.template='\n                <div class="timeline-marker timeline-marker-{{markerType}}">\n                    {{#hasIcon}}\n                    <i class="bi {{model.icon}} text-{{displayColor}}"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class="timeline-dot bg-{{displayColor}}"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class="timeline-content">\n                    {{#showDate}}\n                    <div class="timeline-date text-muted small">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class="timeline-card">\n                        {{#model.title}}\n                        <h6 class="timeline-title mb-1">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class="timeline-description mb-0">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class="timeline-meta mt-2 text-muted small">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            ')}async onInit(){await super.onInit(),this.processItemData()}processItemData(){this.displayColor=this.model?.get?.("color")||this.model?.color||this.theme;const t=!(!this.model?.get?.("icon")&&!this.model?.icon)&&"icon"===this.dotStyle;this.hasIcon=t,this.markerType=t?"icon":this.dotStyle;const e=this.model?.get?.("date")||this.model?.date;this.formattedDate=this.formatDate(e)}formatDate(t){if(!t)return"";switch(this.dateFormat){case"datetime":return e.dataFormatter.pipe(t,"datetime");case"relative":return e.dataFormatter.pipe(t,"timeago");default:return e.dataFormatter.pipe(t,"date")}}async onActionSelect(t,e){t.stopPropagation(),this.emit("item:click",{item:this,model:this.model,index:this.index,data:this.model?.toJSON?this.model.toJSON():this.model}),this.listView&&this.listView.emit("item:click",{item:this,model:this.model,index:this.index,data:this.model?.toJSON?this.model.toJSON():this.model})}}class TimelineView extends t.ListView{constructor(t={}){super({className:"timeline-view",itemClass:t.itemClass||TimelineViewItem,selectionMode:"none",emptyMessage:t.emptyMessage||"No timeline events to display",template:'\n                <div class="timeline-container timeline-{{position}}">\n                    {{#loading}}\n                        <div class="timeline-loading text-center py-4">\n                            <div class="spinner-border spinner-border-sm" role="status">\n                                <span class="visually-hidden">Loading...</span>\n                            </div>\n                            <span class="ms-2 text-muted">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class="timeline-empty text-center text-muted py-4">\n                                <i class="bi bi-clock-history fs-1 d-block mb-2"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class="timeline" data-container="items"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            ',...t}),this.position=t.position||"left",this.dateFormat=t.dateFormat||"date",this.dotStyle=t.dotStyle||"solid",this.showDate=!1!==t.showDate,this.theme=t.theme||"primary",this.groupBy=t.groupBy||"none"}_createItemView(t,e){if(this.itemViews.has(t.id))return;const i=new this.itemClass({model:t,index:e,listView:this,template:this.itemTemplate,dateFormat:this.dateFormat,dotStyle:this.dotStyle,showDate:this.showDate,theme:this.theme});return this.itemViews.set(t.id,i),i.on("item:click",this._onItemClick.bind(this)),i}_onItemClick(t){this.emit("item:click",t)}setPosition(t){return"left"!==t&&"center"!==t?(console.warn('Invalid position. Use "left" or "center"'),this):(this.position=t,this.isMounted()&&this.render(),this)}setDateFormat(t){return this.dateFormat=t,this.forEachItem(e=>{e.dateFormat=t,e.processItemData(),e.isMounted()&&e.render()}),this}setDotStyle(t){return this.dotStyle=t,this.forEachItem(e=>{e.dotStyle=t,e.processItemData(),e.isMounted()&&e.render()}),this}toggleDates(t=null){return this.showDate=null!==t?t:!this.showDate,this.forEachItem(t=>{t.showDate=this.showDate,t.isMounted()&&t.render()}),this}}exports.ListView=t.ListView,exports.ListViewItem=t.ListViewItem,exports.View=e.View,exports.Collection=i.Collection,exports.Model=i.Model,exports.TimelineView=TimelineView,exports.TimelineViewItem=TimelineViewItem;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./chunks/ListView-2M4I8KHF.js"),e=require("./chunks/Collection-BUv4E9op.js");class TimelineViewItem extends t.ListViewItem{constructor(t={}){super({className:"timeline-item",...t}),this.dateFormat=t.dateFormat||"date",this.dotStyle=t.dotStyle||"solid",this.showDate=!1!==t.showDate,this.theme=t.theme||"primary",this.template||(this.template='\n                <div class="timeline-marker timeline-marker-{{markerType}}">\n                    {{#hasIcon}}\n                    <i class="bi {{model.icon}} text-{{displayColor}}"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class="timeline-dot bg-{{displayColor}}"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class="timeline-content">\n                    {{#showDate}}\n                    <div class="timeline-date text-muted small">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class="timeline-card">\n                        {{#model.title}}\n                        <h6 class="timeline-title mb-1">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class="timeline-description mb-0">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class="timeline-meta mt-2 text-muted small">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            ')}async onInit(){await super.onInit(),this.processItemData()}processItemData(){this.displayColor=this.model?.get?.("color")||this.model?.color||this.theme;const t=!(!this.model?.get?.("icon")&&!this.model?.icon)&&"icon"===this.dotStyle;this.hasIcon=t,this.markerType=t?"icon":this.dotStyle;const e=this.model?.get?.("date")||this.model?.date;this.formattedDate=this.formatDate(e)}formatDate(t){if(!t)return"";switch(this.dateFormat){case"datetime":return e.dataFormatter.pipe(t,"datetime");case"relative":return e.dataFormatter.pipe(t,"timeago");default:return e.dataFormatter.pipe(t,"date")}}async onActionSelect(t,e){t.stopPropagation(),this.emit("item:click",{item:this,model:this.model,index:this.index,data:this.model?.toJSON?this.model.toJSON():this.model}),this.listView&&this.listView.emit("item:click",{item:this,model:this.model,index:this.index,data:this.model?.toJSON?this.model.toJSON():this.model})}}class TimelineView extends t.ListView{constructor(t={}){super({className:"timeline-view",itemClass:t.itemClass||TimelineViewItem,selectionMode:"none",emptyMessage:t.emptyMessage||"No timeline events to display",template:'\n                <div class="timeline-container timeline-{{position}}">\n                    {{#loading}}\n                        <div class="timeline-loading text-center py-4">\n                            <div class="spinner-border spinner-border-sm" role="status">\n                                <span class="visually-hidden">Loading...</span>\n                            </div>\n                            <span class="ms-2 text-muted">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class="timeline-empty text-center text-muted py-4">\n                                <i class="bi bi-clock-history fs-1 d-block mb-2"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class="timeline" data-container="items"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            ',...t}),this.position=t.position||"left",this.dateFormat=t.dateFormat||"date",this.dotStyle=t.dotStyle||"solid",this.showDate=!1!==t.showDate,this.theme=t.theme||"primary",this.groupBy=t.groupBy||"none"}_createItemView(t,e){if(this.itemViews.has(t.id))return;const i=new this.itemClass({model:t,index:e,listView:this,template:this.itemTemplate,dateFormat:this.dateFormat,dotStyle:this.dotStyle,showDate:this.showDate,theme:this.theme});return this.itemViews.set(t.id,i),i.on("item:click",this._onItemClick.bind(this)),i}_onItemClick(t){this.emit("item:click",t)}setPosition(t){return"left"!==t&&"center"!==t?(console.warn('Invalid position. Use "left" or "center"'),this):(this.position=t,this.isMounted()&&this.render(),this)}setDateFormat(t){return this.dateFormat=t,this.forEachItem(e=>{e.dateFormat=t,e.processItemData(),e.isMounted()&&e.render()}),this}setDotStyle(t){return this.dotStyle=t,this.forEachItem(e=>{e.dotStyle=t,e.processItemData(),e.isMounted()&&e.render()}),this}toggleDates(t=null){return this.showDate=null!==t?t:!this.showDate,this.forEachItem(t=>{t.showDate=this.showDate,t.isMounted()&&t.render()}),this}}exports.ListView=t.ListView,exports.ListViewItem=t.ListViewItem,exports.Collection=e.Collection,exports.Model=e.Model,exports.View=e.View,exports.TimelineView=TimelineView,exports.TimelineViewItem=TimelineViewItem;
 //# sourceMappingURL=timeline.cjs.js.map

package/dist/timeline.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.cjs.js","sources":["../src/extensions/timeline/TimelineViewItem.js","../src/extensions/timeline/TimelineView.js"],"sourcesContent":["/**\n * TimelineViewItem - Individual timeline item view\n * \n * Extends ListViewItem to provide timeline-specific rendering.\n * Each item is its own View with its own model, allowing for\n * independent re-rendering when the model changes.\n * \n * Expected model attributes:\n *   - date: Date string or Date object\n *   - title: Main heading (optional)\n *   - description: Body text (optional)\n *   - icon: Bootstrap icon class (optional)\n *   - color: Bootstrap color variant (optional)\n *   - meta: Additional metadata (optional)\n * \n * @example\n * const item = new TimelineViewItem({\n *   model: eventModel,\n *   dateFormat: 'relative',\n *   dotStyle: 'icon'\n * });\n */\n\nimport ListViewItem from '@core/views/list/ListViewItem.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass TimelineViewItem extends ListViewItem {\n    constructor(options = {}) {\n        super({\n            className: 'timeline-item',\n            ...options\n        });\n\n        // Timeline-specific options\n        this.dateFormat = options.dateFormat || 'date';\n        this.dotStyle = options.dotStyle || 'solid';\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n\n        // Default timeline item template\n        if (!this.template) {\n            this.template = `\n                <div class=\"timeline-marker timeline-marker-{{markerType}}\">\n                    {{#hasIcon}}\n                    <i class=\"bi {{model.icon}} text-{{displayColor}}\"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class=\"timeline-dot bg-{{displayColor}}\"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class=\"timeline-content\">\n                    {{#showDate}}\n                    <div class=\"timeline-date text-muted small\">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class=\"timeline-card\">\n                        {{#model.title}}\n                        <h6 class=\"timeline-title mb-1\">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class=\"timeline-description mb-0\">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class=\"timeline-meta mt-2 text-muted small\">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            `;\n        }\n    }\n\n    async onInit() {\n        await super.onInit();\n        this.processItemData();\n    }\n\n    processItemData() {\n        // Get color from model or use theme default\n        this.displayColor = this.model?.get?.('color') || this.model?.color || this.theme;\n        \n        // Determine marker type\n        const hasIcon = !!(this.model?.get?.('icon') || this.model?.icon) && this.dotStyle === 'icon';\n        this.hasIcon = hasIcon;\n        this.markerType = hasIcon ? 'icon' : this.dotStyle;\n        \n        // Format date\n        const dateValue = this.model?.get?.('date') || this.model?.date;\n        this.formattedDate = this.formatDate(dateValue);\n    }\n\n    formatDate(date) {\n        if (!date) return '';\n        \n        switch (this.dateFormat) {\n            case 'datetime':\n                return dataFormatter.pipe(date, 'datetime');\n            case 'relative':\n                return dataFormatter.pipe(date, 'timeago');\n            default:\n                return dataFormatter.pipe(date, 'date');\n        }\n    }\n\n    // Override to disable selection behavior in timeline\n    async onActionSelect(event, _element) {\n        event.stopPropagation();\n        \n        // Emit click event instead of selection\n        this.emit('item:click', {\n            item: this,\n            model: this.model,\n            index: this.index,\n            data: this.model?.toJSON ? this.model.toJSON() : this.model\n        });\n\n        if (this.listView) {\n            this.listView.emit('item:click', {\n                item: this,\n                model: this.model,\n                index: this.index,\n                data: this.model?.toJSON ? this.model.toJSON() : this.model\n            });\n        }\n    }\n}\n\nexport default TimelineViewItem;\n","/**\n * TimelineView - Timeline component extending ListView\n * \n * Displays chronological events from a Collection with clean, modern styling.\n * Each timeline item is managed as a separate view that updates independently\n * when its model changes.\n * \n * Features:\n * - Collection-based data management\n * - Left-aligned or center-aligned layout\n * - Customizable markers (dots, icons)\n * - Date formatting and grouping\n * - Individual item re-rendering\n * - Responsive Bootstrap 5 styling\n * \n * @example\n * const timeline = new TimelineView({\n *   collection: eventCollection,\n *   position: 'left',\n *   dotStyle: 'icon',\n *   dateFormat: 'relative'\n * });\n * \n * @example\n * // Custom item template\n * const timeline = new TimelineView({\n *   collection: historyCollection,\n *   itemTemplate: `\n *     <div class=\"custom-timeline-item\">\n *       <strong>{{model.title}}</strong>\n *       <p>{{model.description}}</p>\n *     </div>\n *   `\n * });\n */\n\nimport ListView from '@core/views/list/ListView.js';\nimport TimelineViewItem from './TimelineViewItem.js';\n\nclass TimelineView extends ListView {\n    constructor(options = {}) {\n        // Override ListView defaults with timeline-specific settings\n        super({\n            className: 'timeline-view',\n            itemClass: options.itemClass || TimelineViewItem,\n            selectionMode: 'none', // Timelines typically don't use selection\n            emptyMessage: options.emptyMessage || 'No timeline events to display',\n            template: `\n                <div class=\"timeline-container timeline-{{position}}\">\n                    {{#loading}}\n                        <div class=\"timeline-loading text-center py-4\">\n                            <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                                <span class=\"visually-hidden\">Loading...</span>\n                            </div>\n                            <span class=\"ms-2 text-muted\">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class=\"timeline-empty text-center text-muted py-4\">\n                                <i class=\"bi bi-clock-history fs-1 d-block mb-2\"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class=\"timeline\" data-container=\"items\"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            `,\n            ...options\n        });\n\n        // Timeline-specific options\n        this.position = options.position || 'left'; // 'left' or 'center'\n        this.dateFormat = options.dateFormat || 'date'; // 'date', 'datetime', 'relative'\n        this.dotStyle = options.dotStyle || 'solid'; // 'solid', 'hollow', 'icon'\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n        this.groupBy = options.groupBy || 'none'; // Future: 'none', 'day', 'month', 'year'\n    }\n\n    /**\n     * Override _createItemView to pass timeline-specific options\n     */\n    _createItemView(model, index) {\n        // Don't create duplicate views\n        if (this.itemViews.has(model.id)) return;\n\n        const itemView = new this.itemClass({\n            model: model,\n            index: index,\n            listView: this,\n            template: this.itemTemplate,\n            // Pass timeline-specific options to items\n            dateFormat: this.dateFormat,\n            dotStyle: this.dotStyle,\n            showDate: this.showDate,\n            theme: this.theme\n        });\n\n        // Store the item view\n        this.itemViews.set(model.id, itemView);\n\n        // Set up item event listeners\n        itemView.on('item:click', this._onItemClick.bind(this));\n\n        return itemView;\n    }\n\n    /**\n     * Handle item clicks (replaces selection behavior)\n     */\n    _onItemClick(event) {\n        this.emit('item:click', event);\n    }\n\n    /**\n     * Update timeline position\n     */\n    setPosition(position) {\n        if (position !== 'left' && position !== 'center') {\n            console.warn('Invalid position. Use \"left\" or \"center\"');\n            return this;\n        }\n        \n        this.position = position;\n        if (this.isMounted()) {\n            this.render();\n        }\n        return this;\n    }\n\n    /**\n     * Update date format for all items\n     */\n    setDateFormat(format) {\n        this.dateFormat = format;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dateFormat = format;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Update dot style for all items\n     */\n    setDotStyle(style) {\n        this.dotStyle = style;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dotStyle = style;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Toggle date display\n     */\n    toggleDates(show = null) {\n        this.showDate = show !== null ? show : !this.showDate;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.showDate = this.showDate;\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n}\n\nexport default TimelineView;\n"],"names":["TimelineViewItem","ListViewItem","constructor","options","super","className","this","dateFormat","dotStyle","showDate","theme","template","onInit","processItemData","displayColor","model","get","color","hasIcon","icon","markerType","dateValue","date","formattedDate","formatDate","dataFormatter","pipe","onActionSelect","event","_element","stopPropagation","emit","item","index","data","toJSON","listView","TimelineView","ListView","itemClass","selectionMode","emptyMessage","position","groupBy","_createItemView","itemViews","has","id","itemView","itemTemplate","set","on","_onItemClick","bind","setPosition","console","warn","isMounted","render","setDateFormat","format","forEachItem","setDotStyle","style","toggleDates","show"],"mappings":"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"}
+{"version":3,"file":"timeline.cjs.js","sources":["../src/extensions/timeline/TimelineViewItem.js","../src/extensions/timeline/TimelineView.js"],"sourcesContent":["/**\n * TimelineViewItem - Individual timeline item view\n * \n * Extends ListViewItem to provide timeline-specific rendering.\n * Each item is its own View with its own model, allowing for\n * independent re-rendering when the model changes.\n * \n * Expected model attributes:\n *   - date: Date string or Date object\n *   - title: Main heading (optional)\n *   - description: Body text (optional)\n *   - icon: Bootstrap icon class (optional)\n *   - color: Bootstrap color variant (optional)\n *   - meta: Additional metadata (optional)\n * \n * @example\n * const item = new TimelineViewItem({\n *   model: eventModel,\n *   dateFormat: 'relative',\n *   dotStyle: 'icon'\n * });\n */\n\nimport ListViewItem from '@core/views/list/ListViewItem.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass TimelineViewItem extends ListViewItem {\n    constructor(options = {}) {\n        super({\n            className: 'timeline-item',\n            ...options\n        });\n\n        // Timeline-specific options\n        this.dateFormat = options.dateFormat || 'date';\n        this.dotStyle = options.dotStyle || 'solid';\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n\n        // Default timeline item template\n        if (!this.template) {\n            this.template = `\n                <div class=\"timeline-marker timeline-marker-{{markerType}}\">\n                    {{#hasIcon}}\n                    <i class=\"bi {{model.icon}} text-{{displayColor}}\"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class=\"timeline-dot bg-{{displayColor}}\"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class=\"timeline-content\">\n                    {{#showDate}}\n                    <div class=\"timeline-date text-muted small\">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class=\"timeline-card\">\n                        {{#model.title}}\n                        <h6 class=\"timeline-title mb-1\">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class=\"timeline-description mb-0\">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class=\"timeline-meta mt-2 text-muted small\">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            `;\n        }\n    }\n\n    async onInit() {\n        await super.onInit();\n        this.processItemData();\n    }\n\n    processItemData() {\n        // Get color from model or use theme default\n        this.displayColor = this.model?.get?.('color') || this.model?.color || this.theme;\n        \n        // Determine marker type\n        const hasIcon = !!(this.model?.get?.('icon') || this.model?.icon) && this.dotStyle === 'icon';\n        this.hasIcon = hasIcon;\n        this.markerType = hasIcon ? 'icon' : this.dotStyle;\n        \n        // Format date\n        const dateValue = this.model?.get?.('date') || this.model?.date;\n        this.formattedDate = this.formatDate(dateValue);\n    }\n\n    formatDate(date) {\n        if (!date) return '';\n        \n        switch (this.dateFormat) {\n            case 'datetime':\n                return dataFormatter.pipe(date, 'datetime');\n            case 'relative':\n                return dataFormatter.pipe(date, 'timeago');\n            default:\n                return dataFormatter.pipe(date, 'date');\n        }\n    }\n\n    // Override to disable selection behavior in timeline\n    async onActionSelect(event, _element) {\n        event.stopPropagation();\n        \n        // Emit click event instead of selection\n        this.emit('item:click', {\n            item: this,\n            model: this.model,\n            index: this.index,\n            data: this.model?.toJSON ? this.model.toJSON() : this.model\n        });\n\n        if (this.listView) {\n            this.listView.emit('item:click', {\n                item: this,\n                model: this.model,\n                index: this.index,\n                data: this.model?.toJSON ? this.model.toJSON() : this.model\n            });\n        }\n    }\n}\n\nexport default TimelineViewItem;\n","/**\n * TimelineView - Timeline component extending ListView\n * \n * Displays chronological events from a Collection with clean, modern styling.\n * Each timeline item is managed as a separate view that updates independently\n * when its model changes.\n * \n * Features:\n * - Collection-based data management\n * - Left-aligned or center-aligned layout\n * - Customizable markers (dots, icons)\n * - Date formatting and grouping\n * - Individual item re-rendering\n * - Responsive Bootstrap 5 styling\n * \n * @example\n * const timeline = new TimelineView({\n *   collection: eventCollection,\n *   position: 'left',\n *   dotStyle: 'icon',\n *   dateFormat: 'relative'\n * });\n * \n * @example\n * // Custom item template\n * const timeline = new TimelineView({\n *   collection: historyCollection,\n *   itemTemplate: `\n *     <div class=\"custom-timeline-item\">\n *       <strong>{{model.title}}</strong>\n *       <p>{{model.description}}</p>\n *     </div>\n *   `\n * });\n */\n\nimport ListView from '@core/views/list/ListView.js';\nimport TimelineViewItem from './TimelineViewItem.js';\n\nclass TimelineView extends ListView {\n    constructor(options = {}) {\n        // Override ListView defaults with timeline-specific settings\n        super({\n            className: 'timeline-view',\n            itemClass: options.itemClass || TimelineViewItem,\n            selectionMode: 'none', // Timelines typically don't use selection\n            emptyMessage: options.emptyMessage || 'No timeline events to display',\n            template: `\n                <div class=\"timeline-container timeline-{{position}}\">\n                    {{#loading}}\n                        <div class=\"timeline-loading text-center py-4\">\n                            <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                                <span class=\"visually-hidden\">Loading...</span>\n                            </div>\n                            <span class=\"ms-2 text-muted\">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class=\"timeline-empty text-center text-muted py-4\">\n                                <i class=\"bi bi-clock-history fs-1 d-block mb-2\"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class=\"timeline\" data-container=\"items\"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            `,\n            ...options\n        });\n\n        // Timeline-specific options\n        this.position = options.position || 'left'; // 'left' or 'center'\n        this.dateFormat = options.dateFormat || 'date'; // 'date', 'datetime', 'relative'\n        this.dotStyle = options.dotStyle || 'solid'; // 'solid', 'hollow', 'icon'\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n        this.groupBy = options.groupBy || 'none'; // Future: 'none', 'day', 'month', 'year'\n    }\n\n    /**\n     * Override _createItemView to pass timeline-specific options\n     */\n    _createItemView(model, index) {\n        // Don't create duplicate views\n        if (this.itemViews.has(model.id)) return;\n\n        const itemView = new this.itemClass({\n            model: model,\n            index: index,\n            listView: this,\n            template: this.itemTemplate,\n            // Pass timeline-specific options to items\n            dateFormat: this.dateFormat,\n            dotStyle: this.dotStyle,\n            showDate: this.showDate,\n            theme: this.theme\n        });\n\n        // Store the item view\n        this.itemViews.set(model.id, itemView);\n\n        // Set up item event listeners\n        itemView.on('item:click', this._onItemClick.bind(this));\n\n        return itemView;\n    }\n\n    /**\n     * Handle item clicks (replaces selection behavior)\n     */\n    _onItemClick(event) {\n        this.emit('item:click', event);\n    }\n\n    /**\n     * Update timeline position\n     */\n    setPosition(position) {\n        if (position !== 'left' && position !== 'center') {\n            console.warn('Invalid position. Use \"left\" or \"center\"');\n            return this;\n        }\n        \n        this.position = position;\n        if (this.isMounted()) {\n            this.render();\n        }\n        return this;\n    }\n\n    /**\n     * Update date format for all items\n     */\n    setDateFormat(format) {\n        this.dateFormat = format;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dateFormat = format;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Update dot style for all items\n     */\n    setDotStyle(style) {\n        this.dotStyle = style;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dotStyle = style;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Toggle date display\n     */\n    toggleDates(show = null) {\n        this.showDate = show !== null ? show : !this.showDate;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.showDate = this.showDate;\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n}\n\nexport default TimelineView;\n"],"names":["TimelineViewItem","ListViewItem","constructor","options","super","className","this","dateFormat","dotStyle","showDate","theme","template","onInit","processItemData","displayColor","model","get","color","hasIcon","icon","markerType","dateValue","date","formattedDate","formatDate","dataFormatter","pipe","onActionSelect","event","_element","stopPropagation","emit","item","index","data","toJSON","listView","TimelineView","ListView","itemClass","selectionMode","emptyMessage","position","groupBy","_createItemView","itemViews","has","id","itemView","itemTemplate","set","on","_onItemClick","bind","setPosition","console","warn","isMounted","render","setDateFormat","format","forEachItem","setDotStyle","style","toggleDates","show"],"mappings":"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"}

package/dist/timeline.es.js

@@ -1,2 +1,2 @@
-import{L as t,a as e}from"./chunks/ListView-BLFFK_Ir.js";import{d as i}from"./chunks/Rest-BJ3Mvx1L.js";import{V as s}from"./chunks/Rest-BJ3Mvx1L.js";import{C as n,M as o}from"./chunks/Collection-BWKmydl5.js";class TimelineViewItem extends t{constructor(t={}){super({className:"timeline-item",...t}),this.dateFormat=t.dateFormat||"date",this.dotStyle=t.dotStyle||"solid",this.showDate=!1!==t.showDate,this.theme=t.theme||"primary",this.template||(this.template='\n                <div class="timeline-marker timeline-marker-{{markerType}}">\n                    {{#hasIcon}}\n                    <i class="bi {{model.icon}} text-{{displayColor}}"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class="timeline-dot bg-{{displayColor}}"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class="timeline-content">\n                    {{#showDate}}\n                    <div class="timeline-date text-muted small">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class="timeline-card">\n                        {{#model.title}}\n                        <h6 class="timeline-title mb-1">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class="timeline-description mb-0">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class="timeline-meta mt-2 text-muted small">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            ')}async onInit(){await super.onInit(),this.processItemData()}processItemData(){this.displayColor=this.model?.get?.("color")||this.model?.color||this.theme;const t=!(!this.model?.get?.("icon")&&!this.model?.icon)&&"icon"===this.dotStyle;this.hasIcon=t,this.markerType=t?"icon":this.dotStyle;const e=this.model?.get?.("date")||this.model?.date;this.formattedDate=this.formatDate(e)}formatDate(t){if(!t)return"";switch(this.dateFormat){case"datetime":return i.pipe(t,"datetime");case"relative":return i.pipe(t,"timeago");default:return i.pipe(t,"date")}}async onActionSelect(t,e){t.stopPropagation(),this.emit("item:click",{item:this,model:this.model,index:this.index,data:this.model?.toJSON?this.model.toJSON():this.model}),this.listView&&this.listView.emit("item:click",{item:this,model:this.model,index:this.index,data:this.model?.toJSON?this.model.toJSON():this.model})}}class TimelineView extends e{constructor(t={}){super({className:"timeline-view",itemClass:t.itemClass||TimelineViewItem,selectionMode:"none",emptyMessage:t.emptyMessage||"No timeline events to display",template:'\n                <div class="timeline-container timeline-{{position}}">\n                    {{#loading}}\n                        <div class="timeline-loading text-center py-4">\n                            <div class="spinner-border spinner-border-sm" role="status">\n                                <span class="visually-hidden">Loading...</span>\n                            </div>\n                            <span class="ms-2 text-muted">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class="timeline-empty text-center text-muted py-4">\n                                <i class="bi bi-clock-history fs-1 d-block mb-2"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class="timeline" data-container="items"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            ',...t}),this.position=t.position||"left",this.dateFormat=t.dateFormat||"date",this.dotStyle=t.dotStyle||"solid",this.showDate=!1!==t.showDate,this.theme=t.theme||"primary",this.groupBy=t.groupBy||"none"}_createItemView(t,e){if(this.itemViews.has(t.id))return;const i=new this.itemClass({model:t,index:e,listView:this,template:this.itemTemplate,dateFormat:this.dateFormat,dotStyle:this.dotStyle,showDate:this.showDate,theme:this.theme});return this.itemViews.set(t.id,i),i.on("item:click",this._onItemClick.bind(this)),i}_onItemClick(t){this.emit("item:click",t)}setPosition(t){return"left"!==t&&"center"!==t?(console.warn('Invalid position. Use "left" or "center"'),this):(this.position=t,this.isMounted()&&this.render(),this)}setDateFormat(t){return this.dateFormat=t,this.forEachItem(e=>{e.dateFormat=t,e.processItemData(),e.isMounted()&&e.render()}),this}setDotStyle(t){return this.dotStyle=t,this.forEachItem(e=>{e.dotStyle=t,e.processItemData(),e.isMounted()&&e.render()}),this}toggleDates(t=null){return this.showDate=null!==t?t:!this.showDate,this.forEachItem(t=>{t.showDate=this.showDate,t.isMounted()&&t.render()}),this}}export{n as Collection,e as ListView,t as ListViewItem,o as Model,TimelineView,TimelineViewItem,s as View};
+import{L as t,a as e}from"./chunks/ListView-B0QbqSPv.js";import{d as i}from"./chunks/Collection-r1ACzUeh.js";import{C as s,M as n,V as o}from"./chunks/Collection-r1ACzUeh.js";class TimelineViewItem extends t{constructor(t={}){super({className:"timeline-item",...t}),this.dateFormat=t.dateFormat||"date",this.dotStyle=t.dotStyle||"solid",this.showDate=!1!==t.showDate,this.theme=t.theme||"primary",this.template||(this.template='\n                <div class="timeline-marker timeline-marker-{{markerType}}">\n                    {{#hasIcon}}\n                    <i class="bi {{model.icon}} text-{{displayColor}}"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class="timeline-dot bg-{{displayColor}}"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class="timeline-content">\n                    {{#showDate}}\n                    <div class="timeline-date text-muted small">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class="timeline-card">\n                        {{#model.title}}\n                        <h6 class="timeline-title mb-1">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class="timeline-description mb-0">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class="timeline-meta mt-2 text-muted small">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            ')}async onInit(){await super.onInit(),this.processItemData()}processItemData(){this.displayColor=this.model?.get?.("color")||this.model?.color||this.theme;const t=!(!this.model?.get?.("icon")&&!this.model?.icon)&&"icon"===this.dotStyle;this.hasIcon=t,this.markerType=t?"icon":this.dotStyle;const e=this.model?.get?.("date")||this.model?.date;this.formattedDate=this.formatDate(e)}formatDate(t){if(!t)return"";switch(this.dateFormat){case"datetime":return i.pipe(t,"datetime");case"relative":return i.pipe(t,"timeago");default:return i.pipe(t,"date")}}async onActionSelect(t,e){t.stopPropagation(),this.emit("item:click",{item:this,model:this.model,index:this.index,data:this.model?.toJSON?this.model.toJSON():this.model}),this.listView&&this.listView.emit("item:click",{item:this,model:this.model,index:this.index,data:this.model?.toJSON?this.model.toJSON():this.model})}}class TimelineView extends e{constructor(t={}){super({className:"timeline-view",itemClass:t.itemClass||TimelineViewItem,selectionMode:"none",emptyMessage:t.emptyMessage||"No timeline events to display",template:'\n                <div class="timeline-container timeline-{{position}}">\n                    {{#loading}}\n                        <div class="timeline-loading text-center py-4">\n                            <div class="spinner-border spinner-border-sm" role="status">\n                                <span class="visually-hidden">Loading...</span>\n                            </div>\n                            <span class="ms-2 text-muted">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class="timeline-empty text-center text-muted py-4">\n                                <i class="bi bi-clock-history fs-1 d-block mb-2"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class="timeline" data-container="items"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            ',...t}),this.position=t.position||"left",this.dateFormat=t.dateFormat||"date",this.dotStyle=t.dotStyle||"solid",this.showDate=!1!==t.showDate,this.theme=t.theme||"primary",this.groupBy=t.groupBy||"none"}_createItemView(t,e){if(this.itemViews.has(t.id))return;const i=new this.itemClass({model:t,index:e,listView:this,template:this.itemTemplate,dateFormat:this.dateFormat,dotStyle:this.dotStyle,showDate:this.showDate,theme:this.theme});return this.itemViews.set(t.id,i),i.on("item:click",this._onItemClick.bind(this)),i}_onItemClick(t){this.emit("item:click",t)}setPosition(t){return"left"!==t&&"center"!==t?(console.warn('Invalid position. Use "left" or "center"'),this):(this.position=t,this.isMounted()&&this.render(),this)}setDateFormat(t){return this.dateFormat=t,this.forEachItem(e=>{e.dateFormat=t,e.processItemData(),e.isMounted()&&e.render()}),this}setDotStyle(t){return this.dotStyle=t,this.forEachItem(e=>{e.dotStyle=t,e.processItemData(),e.isMounted()&&e.render()}),this}toggleDates(t=null){return this.showDate=null!==t?t:!this.showDate,this.forEachItem(t=>{t.showDate=this.showDate,t.isMounted()&&t.render()}),this}}export{s as Collection,e as ListView,t as ListViewItem,n as Model,TimelineView,TimelineViewItem,o as View};
 //# sourceMappingURL=timeline.es.js.map

package/dist/timeline.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.es.js","sources":["../src/extensions/timeline/TimelineViewItem.js","../src/extensions/timeline/TimelineView.js"],"sourcesContent":["/**\n * TimelineViewItem - Individual timeline item view\n * \n * Extends ListViewItem to provide timeline-specific rendering.\n * Each item is its own View with its own model, allowing for\n * independent re-rendering when the model changes.\n * \n * Expected model attributes:\n *   - date: Date string or Date object\n *   - title: Main heading (optional)\n *   - description: Body text (optional)\n *   - icon: Bootstrap icon class (optional)\n *   - color: Bootstrap color variant (optional)\n *   - meta: Additional metadata (optional)\n * \n * @example\n * const item = new TimelineViewItem({\n *   model: eventModel,\n *   dateFormat: 'relative',\n *   dotStyle: 'icon'\n * });\n */\n\nimport ListViewItem from '@core/views/list/ListViewItem.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass TimelineViewItem extends ListViewItem {\n    constructor(options = {}) {\n        super({\n            className: 'timeline-item',\n            ...options\n        });\n\n        // Timeline-specific options\n        this.dateFormat = options.dateFormat || 'date';\n        this.dotStyle = options.dotStyle || 'solid';\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n\n        // Default timeline item template\n        if (!this.template) {\n            this.template = `\n                <div class=\"timeline-marker timeline-marker-{{markerType}}\">\n                    {{#hasIcon}}\n                    <i class=\"bi {{model.icon}} text-{{displayColor}}\"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class=\"timeline-dot bg-{{displayColor}}\"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class=\"timeline-content\">\n                    {{#showDate}}\n                    <div class=\"timeline-date text-muted small\">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class=\"timeline-card\">\n                        {{#model.title}}\n                        <h6 class=\"timeline-title mb-1\">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class=\"timeline-description mb-0\">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class=\"timeline-meta mt-2 text-muted small\">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            `;\n        }\n    }\n\n    async onInit() {\n        await super.onInit();\n        this.processItemData();\n    }\n\n    processItemData() {\n        // Get color from model or use theme default\n        this.displayColor = this.model?.get?.('color') || this.model?.color || this.theme;\n        \n        // Determine marker type\n        const hasIcon = !!(this.model?.get?.('icon') || this.model?.icon) && this.dotStyle === 'icon';\n        this.hasIcon = hasIcon;\n        this.markerType = hasIcon ? 'icon' : this.dotStyle;\n        \n        // Format date\n        const dateValue = this.model?.get?.('date') || this.model?.date;\n        this.formattedDate = this.formatDate(dateValue);\n    }\n\n    formatDate(date) {\n        if (!date) return '';\n        \n        switch (this.dateFormat) {\n            case 'datetime':\n                return dataFormatter.pipe(date, 'datetime');\n            case 'relative':\n                return dataFormatter.pipe(date, 'timeago');\n            default:\n                return dataFormatter.pipe(date, 'date');\n        }\n    }\n\n    // Override to disable selection behavior in timeline\n    async onActionSelect(event, _element) {\n        event.stopPropagation();\n        \n        // Emit click event instead of selection\n        this.emit('item:click', {\n            item: this,\n            model: this.model,\n            index: this.index,\n            data: this.model?.toJSON ? this.model.toJSON() : this.model\n        });\n\n        if (this.listView) {\n            this.listView.emit('item:click', {\n                item: this,\n                model: this.model,\n                index: this.index,\n                data: this.model?.toJSON ? this.model.toJSON() : this.model\n            });\n        }\n    }\n}\n\nexport default TimelineViewItem;\n","/**\n * TimelineView - Timeline component extending ListView\n * \n * Displays chronological events from a Collection with clean, modern styling.\n * Each timeline item is managed as a separate view that updates independently\n * when its model changes.\n * \n * Features:\n * - Collection-based data management\n * - Left-aligned or center-aligned layout\n * - Customizable markers (dots, icons)\n * - Date formatting and grouping\n * - Individual item re-rendering\n * - Responsive Bootstrap 5 styling\n * \n * @example\n * const timeline = new TimelineView({\n *   collection: eventCollection,\n *   position: 'left',\n *   dotStyle: 'icon',\n *   dateFormat: 'relative'\n * });\n * \n * @example\n * // Custom item template\n * const timeline = new TimelineView({\n *   collection: historyCollection,\n *   itemTemplate: `\n *     <div class=\"custom-timeline-item\">\n *       <strong>{{model.title}}</strong>\n *       <p>{{model.description}}</p>\n *     </div>\n *   `\n * });\n */\n\nimport ListView from '@core/views/list/ListView.js';\nimport TimelineViewItem from './TimelineViewItem.js';\n\nclass TimelineView extends ListView {\n    constructor(options = {}) {\n        // Override ListView defaults with timeline-specific settings\n        super({\n            className: 'timeline-view',\n            itemClass: options.itemClass || TimelineViewItem,\n            selectionMode: 'none', // Timelines typically don't use selection\n            emptyMessage: options.emptyMessage || 'No timeline events to display',\n            template: `\n                <div class=\"timeline-container timeline-{{position}}\">\n                    {{#loading}}\n                        <div class=\"timeline-loading text-center py-4\">\n                            <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                                <span class=\"visually-hidden\">Loading...</span>\n                            </div>\n                            <span class=\"ms-2 text-muted\">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class=\"timeline-empty text-center text-muted py-4\">\n                                <i class=\"bi bi-clock-history fs-1 d-block mb-2\"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class=\"timeline\" data-container=\"items\"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            `,\n            ...options\n        });\n\n        // Timeline-specific options\n        this.position = options.position || 'left'; // 'left' or 'center'\n        this.dateFormat = options.dateFormat || 'date'; // 'date', 'datetime', 'relative'\n        this.dotStyle = options.dotStyle || 'solid'; // 'solid', 'hollow', 'icon'\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n        this.groupBy = options.groupBy || 'none'; // Future: 'none', 'day', 'month', 'year'\n    }\n\n    /**\n     * Override _createItemView to pass timeline-specific options\n     */\n    _createItemView(model, index) {\n        // Don't create duplicate views\n        if (this.itemViews.has(model.id)) return;\n\n        const itemView = new this.itemClass({\n            model: model,\n            index: index,\n            listView: this,\n            template: this.itemTemplate,\n            // Pass timeline-specific options to items\n            dateFormat: this.dateFormat,\n            dotStyle: this.dotStyle,\n            showDate: this.showDate,\n            theme: this.theme\n        });\n\n        // Store the item view\n        this.itemViews.set(model.id, itemView);\n\n        // Set up item event listeners\n        itemView.on('item:click', this._onItemClick.bind(this));\n\n        return itemView;\n    }\n\n    /**\n     * Handle item clicks (replaces selection behavior)\n     */\n    _onItemClick(event) {\n        this.emit('item:click', event);\n    }\n\n    /**\n     * Update timeline position\n     */\n    setPosition(position) {\n        if (position !== 'left' && position !== 'center') {\n            console.warn('Invalid position. Use \"left\" or \"center\"');\n            return this;\n        }\n        \n        this.position = position;\n        if (this.isMounted()) {\n            this.render();\n        }\n        return this;\n    }\n\n    /**\n     * Update date format for all items\n     */\n    setDateFormat(format) {\n        this.dateFormat = format;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dateFormat = format;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Update dot style for all items\n     */\n    setDotStyle(style) {\n        this.dotStyle = style;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dotStyle = style;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Toggle date display\n     */\n    toggleDates(show = null) {\n        this.showDate = show !== null ? show : !this.showDate;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.showDate = this.showDate;\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n}\n\nexport default TimelineView;\n"],"names":["TimelineViewItem","ListViewItem","constructor","options","super","className","this","dateFormat","dotStyle","showDate","theme","template","onInit","processItemData","displayColor","model","get","color","hasIcon","icon","markerType","dateValue","date","formattedDate","formatDate","dataFormatter","pipe","onActionSelect","event","_element","stopPropagation","emit","item","index","data","toJSON","listView","TimelineView","ListView","itemClass","selectionMode","emptyMessage","position","groupBy","_createItemView","itemViews","has","id","itemView","itemTemplate","set","on","_onItemClick","bind","setPosition","console","warn","isMounted","render","setDateFormat","format","forEachItem","setDotStyle","style","toggleDates","show"],"mappings":"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"}
+{"version":3,"file":"timeline.es.js","sources":["../src/extensions/timeline/TimelineViewItem.js","../src/extensions/timeline/TimelineView.js"],"sourcesContent":["/**\n * TimelineViewItem - Individual timeline item view\n * \n * Extends ListViewItem to provide timeline-specific rendering.\n * Each item is its own View with its own model, allowing for\n * independent re-rendering when the model changes.\n * \n * Expected model attributes:\n *   - date: Date string or Date object\n *   - title: Main heading (optional)\n *   - description: Body text (optional)\n *   - icon: Bootstrap icon class (optional)\n *   - color: Bootstrap color variant (optional)\n *   - meta: Additional metadata (optional)\n * \n * @example\n * const item = new TimelineViewItem({\n *   model: eventModel,\n *   dateFormat: 'relative',\n *   dotStyle: 'icon'\n * });\n */\n\nimport ListViewItem from '@core/views/list/ListViewItem.js';\nimport dataFormatter from '@core/utils/DataFormatter.js';\n\nclass TimelineViewItem extends ListViewItem {\n    constructor(options = {}) {\n        super({\n            className: 'timeline-item',\n            ...options\n        });\n\n        // Timeline-specific options\n        this.dateFormat = options.dateFormat || 'date';\n        this.dotStyle = options.dotStyle || 'solid';\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n\n        // Default timeline item template\n        if (!this.template) {\n            this.template = `\n                <div class=\"timeline-marker timeline-marker-{{markerType}}\">\n                    {{#hasIcon}}\n                    <i class=\"bi {{model.icon}} text-{{displayColor}}\"></i>\n                    {{/hasIcon}}\n                    {{^hasIcon}}\n                    <div class=\"timeline-dot bg-{{displayColor}}\"></div>\n                    {{/hasIcon}}\n                </div>\n                \n                <div class=\"timeline-content\">\n                    {{#showDate}}\n                    <div class=\"timeline-date text-muted small\">\n                        {{formattedDate}}\n                    </div>\n                    {{/showDate}}\n                    \n                    <div class=\"timeline-card\">\n                        {{#model.title}}\n                        <h6 class=\"timeline-title mb-1\">{{model.title}}</h6>\n                        {{/model.title}}\n                        \n                        {{#model.description}}\n                        <p class=\"timeline-description mb-0\">{{model.description}}</p>\n                        {{/model.description}}\n                        \n                        {{#model.meta}}\n                        <div class=\"timeline-meta mt-2 text-muted small\">\n                            {{model.meta}}\n                        </div>\n                        {{/model.meta}}\n                    </div>\n                </div>\n            `;\n        }\n    }\n\n    async onInit() {\n        await super.onInit();\n        this.processItemData();\n    }\n\n    processItemData() {\n        // Get color from model or use theme default\n        this.displayColor = this.model?.get?.('color') || this.model?.color || this.theme;\n        \n        // Determine marker type\n        const hasIcon = !!(this.model?.get?.('icon') || this.model?.icon) && this.dotStyle === 'icon';\n        this.hasIcon = hasIcon;\n        this.markerType = hasIcon ? 'icon' : this.dotStyle;\n        \n        // Format date\n        const dateValue = this.model?.get?.('date') || this.model?.date;\n        this.formattedDate = this.formatDate(dateValue);\n    }\n\n    formatDate(date) {\n        if (!date) return '';\n        \n        switch (this.dateFormat) {\n            case 'datetime':\n                return dataFormatter.pipe(date, 'datetime');\n            case 'relative':\n                return dataFormatter.pipe(date, 'timeago');\n            default:\n                return dataFormatter.pipe(date, 'date');\n        }\n    }\n\n    // Override to disable selection behavior in timeline\n    async onActionSelect(event, _element) {\n        event.stopPropagation();\n        \n        // Emit click event instead of selection\n        this.emit('item:click', {\n            item: this,\n            model: this.model,\n            index: this.index,\n            data: this.model?.toJSON ? this.model.toJSON() : this.model\n        });\n\n        if (this.listView) {\n            this.listView.emit('item:click', {\n                item: this,\n                model: this.model,\n                index: this.index,\n                data: this.model?.toJSON ? this.model.toJSON() : this.model\n            });\n        }\n    }\n}\n\nexport default TimelineViewItem;\n","/**\n * TimelineView - Timeline component extending ListView\n * \n * Displays chronological events from a Collection with clean, modern styling.\n * Each timeline item is managed as a separate view that updates independently\n * when its model changes.\n * \n * Features:\n * - Collection-based data management\n * - Left-aligned or center-aligned layout\n * - Customizable markers (dots, icons)\n * - Date formatting and grouping\n * - Individual item re-rendering\n * - Responsive Bootstrap 5 styling\n * \n * @example\n * const timeline = new TimelineView({\n *   collection: eventCollection,\n *   position: 'left',\n *   dotStyle: 'icon',\n *   dateFormat: 'relative'\n * });\n * \n * @example\n * // Custom item template\n * const timeline = new TimelineView({\n *   collection: historyCollection,\n *   itemTemplate: `\n *     <div class=\"custom-timeline-item\">\n *       <strong>{{model.title}}</strong>\n *       <p>{{model.description}}</p>\n *     </div>\n *   `\n * });\n */\n\nimport ListView from '@core/views/list/ListView.js';\nimport TimelineViewItem from './TimelineViewItem.js';\n\nclass TimelineView extends ListView {\n    constructor(options = {}) {\n        // Override ListView defaults with timeline-specific settings\n        super({\n            className: 'timeline-view',\n            itemClass: options.itemClass || TimelineViewItem,\n            selectionMode: 'none', // Timelines typically don't use selection\n            emptyMessage: options.emptyMessage || 'No timeline events to display',\n            template: `\n                <div class=\"timeline-container timeline-{{position}}\">\n                    {{#loading}}\n                        <div class=\"timeline-loading text-center py-4\">\n                            <div class=\"spinner-border spinner-border-sm\" role=\"status\">\n                                <span class=\"visually-hidden\">Loading...</span>\n                            </div>\n                            <span class=\"ms-2 text-muted\">Loading timeline...</span>\n                        </div>\n                    {{/loading}}\n                    {{^loading}}\n                        {{#isEmpty}}\n                            <div class=\"timeline-empty text-center text-muted py-4\">\n                                <i class=\"bi bi-clock-history fs-1 d-block mb-2\"></i>\n                                <p>{{emptyMessage}}</p>\n                            </div>\n                        {{/isEmpty}}\n                        {{^isEmpty}}\n                            <div class=\"timeline\" data-container=\"items\"></div>\n                        {{/isEmpty}}\n                    {{/loading}}\n                </div>\n            `,\n            ...options\n        });\n\n        // Timeline-specific options\n        this.position = options.position || 'left'; // 'left' or 'center'\n        this.dateFormat = options.dateFormat || 'date'; // 'date', 'datetime', 'relative'\n        this.dotStyle = options.dotStyle || 'solid'; // 'solid', 'hollow', 'icon'\n        this.showDate = options.showDate !== false;\n        this.theme = options.theme || 'primary';\n        this.groupBy = options.groupBy || 'none'; // Future: 'none', 'day', 'month', 'year'\n    }\n\n    /**\n     * Override _createItemView to pass timeline-specific options\n     */\n    _createItemView(model, index) {\n        // Don't create duplicate views\n        if (this.itemViews.has(model.id)) return;\n\n        const itemView = new this.itemClass({\n            model: model,\n            index: index,\n            listView: this,\n            template: this.itemTemplate,\n            // Pass timeline-specific options to items\n            dateFormat: this.dateFormat,\n            dotStyle: this.dotStyle,\n            showDate: this.showDate,\n            theme: this.theme\n        });\n\n        // Store the item view\n        this.itemViews.set(model.id, itemView);\n\n        // Set up item event listeners\n        itemView.on('item:click', this._onItemClick.bind(this));\n\n        return itemView;\n    }\n\n    /**\n     * Handle item clicks (replaces selection behavior)\n     */\n    _onItemClick(event) {\n        this.emit('item:click', event);\n    }\n\n    /**\n     * Update timeline position\n     */\n    setPosition(position) {\n        if (position !== 'left' && position !== 'center') {\n            console.warn('Invalid position. Use \"left\" or \"center\"');\n            return this;\n        }\n        \n        this.position = position;\n        if (this.isMounted()) {\n            this.render();\n        }\n        return this;\n    }\n\n    /**\n     * Update date format for all items\n     */\n    setDateFormat(format) {\n        this.dateFormat = format;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dateFormat = format;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Update dot style for all items\n     */\n    setDotStyle(style) {\n        this.dotStyle = style;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.dotStyle = style;\n            itemView.processItemData();\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n\n    /**\n     * Toggle date display\n     */\n    toggleDates(show = null) {\n        this.showDate = show !== null ? show : !this.showDate;\n        \n        // Update all items\n        this.forEachItem(itemView => {\n            itemView.showDate = this.showDate;\n            if (itemView.isMounted()) {\n                itemView.render();\n            }\n        });\n        \n        return this;\n    }\n}\n\nexport default TimelineView;\n"],"names":["TimelineViewItem","ListViewItem","constructor","options","super","className","this","dateFormat","dotStyle","showDate","theme","template","onInit","processItemData","displayColor","model","get","color","hasIcon","icon","markerType","dateValue","date","formattedDate","formatDate","dataFormatter","pipe","onActionSelect","event","_element","stopPropagation","emit","item","index","data","toJSON","listView","TimelineView","ListView","itemClass","selectionMode","emptyMessage","position","groupBy","_createItemView","itemViews","has","id","itemView","itemTemplate","set","on","_onItemClick","bind","setPosition","console","warn","isMounted","render","setDateFormat","format","forEachItem","setDotStyle","style","toggleDates","show"],"mappings":"+KA0BA,MAAMA,yBAAyBC,EAC3B,WAAAC,CAAYC,EAAU,IAClBC,MAAM,CACFC,UAAW,mBACRF,IAIPG,KAAKC,WAAaJ,EAAQI,YAAc,OACxCD,KAAKE,SAAWL,EAAQK,UAAY,QACpCF,KAAKG,UAAgC,IAArBN,EAAQM,SACxBH,KAAKI,MAAQP,EAAQO,OAAS,UAGzBJ,KAAKK,WACNL,KAAKK,SAAW,y5CAmCxB,CAEA,YAAMC,SACIR,MAAMQ,SACZN,KAAKO,iBACT,CAEA,eAAAA,GAEIP,KAAKQ,aAAeR,KAAKS,OAAOC,MAAM,UAAYV,KAAKS,OAAOE,OAASX,KAAKI,MAG5E,MAAMQ,KAAaZ,KAAKS,OAAOC,MAAM,UAAWV,KAAKS,OAAOI,OAA2B,SAAlBb,KAAKE,SAC1EF,KAAKY,QAAUA,EACfZ,KAAKc,WAAaF,EAAU,OAASZ,KAAKE,SAG1C,MAAMa,EAAYf,KAAKS,OAAOC,MAAM,SAAWV,KAAKS,OAAOO,KAC3DhB,KAAKiB,cAAgBjB,KAAKkB,WAAWH,EACzC,CAEA,UAAAG,CAAWF,GACP,IAAKA,EAAM,MAAO,GAElB,OAAQhB,KAAKC,YACT,IAAK,WACD,OAAOkB,EAAcC,KAAKJ,EAAM,YACpC,IAAK,WACD,OAAOG,EAAcC,KAAKJ,EAAM,WACpC,QACI,OAAOG,EAAcC,KAAKJ,EAAM,QAE5C,CAGA,oBAAMK,CAAeC,EAAOC,GACxBD,EAAME,kBAGNxB,KAAKyB,KAAK,aAAc,CACpBC,KAAM1B,KACNS,MAAOT,KAAKS,MACZkB,MAAO3B,KAAK2B,MACZC,KAAM5B,KAAKS,OAAOoB,OAAS7B,KAAKS,MAAMoB,SAAW7B,KAAKS,QAGtDT,KAAK8B,UACL9B,KAAK8B,SAASL,KAAK,aAAc,CAC7BC,KAAM1B,KACNS,MAAOT,KAAKS,MACZkB,MAAO3B,KAAK2B,MACZC,KAAM5B,KAAKS,OAAOoB,OAAS7B,KAAKS,MAAMoB,SAAW7B,KAAKS,OAGlE,EC3FJ,MAAMsB,qBAAqBC,EACvB,WAAApC,CAAYC,EAAU,IAElBC,MAAM,CACFC,UAAW,gBACXkC,UAAWpC,EAAQoC,WAAavC,iBAChCwC,cAAe,OACfC,aAActC,EAAQsC,cAAgB,gCACtC9B,SAAU,6nCAuBPR,IAIPG,KAAKoC,SAAWvC,EAAQuC,UAAY,OACpCpC,KAAKC,WAAaJ,EAAQI,YAAc,OACxCD,KAAKE,SAAWL,EAAQK,UAAY,QACpCF,KAAKG,UAAgC,IAArBN,EAAQM,SACxBH,KAAKI,MAAQP,EAAQO,OAAS,UAC9BJ,KAAKqC,QAAUxC,EAAQwC,SAAW,MACtC,CAKA,eAAAC,CAAgB7B,EAAOkB,GAEnB,GAAI3B,KAAKuC,UAAUC,IAAI/B,EAAMgC,IAAK,OAElC,MAAMC,EAAW,IAAI1C,KAAKiC,UAAU,CAChCxB,QACAkB,QACAG,SAAU9B,KACVK,SAAUL,KAAK2C,aAEf1C,WAAYD,KAAKC,WACjBC,SAAUF,KAAKE,SACfC,SAAUH,KAAKG,SACfC,MAAOJ,KAAKI,QAShB,OALAJ,KAAKuC,UAAUK,IAAInC,EAAMgC,GAAIC,GAG7BA,EAASG,GAAG,aAAc7C,KAAK8C,aAAaC,KAAK/C,OAE1C0C,CACX,CAKA,YAAAI,CAAaxB,GACTtB,KAAKyB,KAAK,aAAcH,EAC5B,CAKA,WAAA0B,CAAYZ,GACR,MAAiB,SAAbA,GAAoC,WAAbA,GACvBa,QAAQC,KAAK,4CACNlD,OAGXA,KAAKoC,SAAWA,EACZpC,KAAKmD,aACLnD,KAAKoD,SAEFpD,KACX,CAKA,aAAAqD,CAAcC,GAYV,OAXAtD,KAAKC,WAAaqD,EAGlBtD,KAAKuD,YAAYb,IACbA,EAASzC,WAAaqD,EACtBZ,EAASnC,kBACLmC,EAASS,aACTT,EAASU,WAIVpD,IACX,CAKA,WAAAwD,CAAYC,GAYR,OAXAzD,KAAKE,SAAWuD,EAGhBzD,KAAKuD,YAAYb,IACbA,EAASxC,SAAWuD,EACpBf,EAASnC,kBACLmC,EAASS,aACTT,EAASU,WAIVpD,IACX,CAKA,WAAA0D,CAAYC,EAAO,MAWf,OAVA3D,KAAKG,SAAoB,OAATwD,EAAgBA,GAAQ3D,KAAKG,SAG7CH,KAAKuD,YAAYb,IACbA,EAASvC,SAAWH,KAAKG,SACrBuC,EAASS,aACTT,EAASU,WAIVpD,IACX"}