v14.5.3

Author: boehlerlukas

build/cjs/index.js

@@ -158,17 +158,16 @@
         <div class="sidebar-block" style="width: 67%"></div>
         <div class="sidebar-block" style="width: 55%"></div>
 
-        <div style="padding: 20px 25px 25px 30px;">
-          <gleap-checklist
-            floating="true"
-            checklistid="67f0ccc770eef2e4332c5237"
-          ></gleap-checklist>
-        </div>
+        <div style="padding: 20px 25px 25px 30px"></div>
       </aside>
 
       <!-- Main content wireframe blocks -->
       <main class="main-placeholder" id="main1">
         <div style="max-width: 600px; margin: auto">
+          <gleap-checklist
+            sharedKey="project_X1"
+            checklistid="67f0ccc770eef2e4332c5237"
+          ></gleap-checklist>
         </div>
       </main>
 

build/esm/index.mjs

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "14.5.2",
+  "version": "14.5.3",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.mjs",
   "exports": {

demo/index.html

@@ -126,15 +126,29 @@ class ChecklistNetworkManager {
     });
   }
 
+  /**
+   * @private
+   * Creates a cache key from outboundId and sharedKey
+   * @param {string} outboundId - The public/outbound checklist ID.
+   * @param {string|undefined} sharedKey - Optional shared key.
+   * @returns {string} Combined cache key.
+   */
+  _createCacheKey(outboundId, sharedKey) {
+    return sharedKey ? `${outboundId}::${sharedKey}` : outboundId;
+  }
+
   /**
    * Validates an outbound checklist ID, returning a Promise for the internal ID.
    * Manages caching and deduplicates requests.
    * @param {string} outboundId - The public/outbound checklist ID.
+   * @param {string} [sharedKey] - Optional shared key for the checklist.
    * @returns {Promise<string>} A promise that resolves with the internal checklist ID.
    */
-  validateChecklist(outboundId) {
+  validateChecklist(outboundId, sharedKey) {
+    const cacheKey = this._createCacheKey(outboundId, sharedKey);
+
     // 1. Check cache for final result (success or error)
-    const cachedResult = this.validationCache.get(outboundId);
+    const cachedResult = this.validationCache.get(cacheKey);
     if (cachedResult) {
       if (cachedResult.status === RequestStatus.SUCCESS) {
         return Promise.resolve(cachedResult.internalId);
@@ -144,35 +158,38 @@ class ChecklistNetworkManager {
     }
 
     // 2. Check for an ongoing request
-    if (this.validationRequests.has(outboundId)) {
-      return this.validationRequests.get(outboundId);
+    if (this.validationRequests.has(cacheKey)) {
+      return this.validationRequests.get(cacheKey);
     }
-    
+
     // 3. Start a new request
     const apiUrl = this._getApiUrl();
     if (!apiUrl) {
       const error = new Error(
         "ChecklistNetworkManager: Gleap API URL not configured."
       );
-      this.validationCache.set(outboundId, {
+      this.validationCache.set(cacheKey, {
         status: RequestStatus.ERROR,
         error,
       });
       return Promise.reject(error);
     }
 
     const url = `${apiUrl}/outbound/checklists?${this._getQueryParams()}`;
-    const requestPromise = this._makeRequest("POST", url, { outboundId })
+    const requestPromise = this._makeRequest("POST", url, {
+      outboundId,
+      sharedKey,
+    })
       .then((responseData) => {
         if (responseData && responseData.id) {
-          this.validationCache.set(outboundId, {
+          this.validationCache.set(cacheKey, {
             status: RequestStatus.SUCCESS,
             internalId: responseData.id,
           });
           return responseData.id;
         } else {
           const error = new Error("Validation response missing checklist ID.");
-          this.validationCache.set(outboundId, {
+          this.validationCache.set(cacheKey, {
             status: RequestStatus.ERROR,
             error: responseData || error,
           });
@@ -181,19 +198,19 @@ class ChecklistNetworkManager {
       })
       .catch((error) => {
         // Store the error object itself in the cache
-        this.validationCache.set(outboundId, {
+        this.validationCache.set(cacheKey, {
           status: RequestStatus.ERROR,
           error,
         });
         throw error; // Re-throw so callers can catch it
       })
       .finally(() => {
         // Remove from pending requests map once done (success or fail)
-        this.validationRequests.delete(outboundId);
+        this.validationRequests.delete(cacheKey);
       });
 
     // Store the promise for potential concurrent requests
-    this.validationRequests.set(outboundId, requestPromise);
+    this.validationRequests.set(cacheKey, requestPromise);
     return requestPromise;
   }
 

package.json

@@ -96,7 +96,14 @@ export const registerGleapChecklist = () => {
 
       // --- Observed Attributes ---
       static get observedAttributes() {
-        return ["checklistId", "info", "progressbar", "dark", "floating"];
+        return [
+          "checklistId",
+          "info",
+          "progressbar",
+          "dark",
+          "floating",
+          "sharedKey",
+        ];
       }
 
       // --- Lifecycle Callbacks ---
@@ -298,8 +305,10 @@ export const registerGleapChecklist = () => {
         this.checklistData = null;
         this._hasLoaded = false;
         this.renderResponse();
+        const sharedKey = this.getAttribute("sharedKey");
+        
         this._networkManager
-          .validateChecklist(outboundId)
+          .validateChecklist(outboundId, sharedKey)
           .then((internalId) => {
             if (!this.isConnected || !this._isSessionReady || !internalId) {
               return;
@@ -572,9 +581,7 @@ export const registerGleapChecklist = () => {
         return `
           <div part="${className}" class="${
           isHeader ? "checklist-floating-header" : "checklist-floating-launcher"
-        } ${
-          renderDoneState ? "checklist-floating-launcher--done" : ""
-        }">
+        } ${renderDoneState ? "checklist-floating-launcher--done" : ""}">
             <div class="floating-header">
               <div class="floating-circular-progress">
                 <svg viewBox="0 0 20 20">