@siteping/widget 0.9.15 → 0.9.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-NEX6ECQM.js → chunk-GRXZBZ42.js} +3 -3
- package/dist/chunk-GRXZBZ42.js.map +1 -0
- package/dist/index.global.js +1 -1
- package/dist/index.global.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/{panel-66LNZR5L.js → panel-4KOYCMDH.js} +2 -2
- package/dist/{panel-66LNZR5L.js.map → panel-4KOYCMDH.js.map} +1 -1
- package/dist/react.js +2 -2
- package/package.json +4 -4
- package/dist/chunk-NEX6ECQM.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {G as G$1,H,w,F,U as U$1,T,L,J as J$1,Y as Y$1,N,z as z$1,b,x,y,I,c,e,u,v,h,g,a,f,i,B as B$1,D,C,A,l,m,n,o,E}from'./chunk-
|
|
1
|
+
import {G as G$1,H,w,F,U as U$1,T,L,J as J$1,Y as Y$1,N,z as z$1,b,x,y,I,c,e,u,v,h,g,a,f,i,B as B$1,D,C,A,l,m,n,o,E}from'./chunk-GRXZBZ42.js';var Yt=new Set(["role","name","aria-label","rel","href"]);function Wt(t,e){let n=Yt.has(t);n||=t.startsWith("data-")&&X(t);let i=X(e)&&e.length<100;return i||=e.startsWith("#")&&X(e.slice(1)),n&&i}function Ut(t){return X(t)}function Gt(t){return X(t)}function Vt(t){return true}function ft(t,e){if(t.nodeType!==Node.ELEMENT_NODE)throw new Error("Can't generate CSS selector for non-element node type.");if(t.tagName.toLowerCase()==="html")return "html";let n={root:document.body,idName:Ut,className:Gt,tagName:Vt,attr:Wt,timeoutMs:1e3,seedMinLength:3,optimizedMinLength:2,maxNumberOfPathChecks:1/0},i=new Date,o={...n,...e},r=tn(o.root,n),s,a=0;for(let p of Jt(t,o,r)){if(new Date().getTime()-i.getTime()>o.timeoutMs||a>=o.maxNumberOfPathChecks){let u=Qt(t,r);if(!u)throw new Error(`Timeout: Can't find a unique selector after ${o.timeoutMs}ms`);return K(u)}if(a++,Re(p,r)){s=p;break}}if(!s)throw new Error("Selector was not found.");let l=[...gt(s,t,o,r,i)];return l.sort(Ae),l.length>0?K(l[0]):K(s)}function*Jt(t,e,n){let i=[],o=[],r=t,s=0;for(;r&&r!==n;){let a=Zt(r,e);for(let l of a)l.level=s;if(i.push(a),r=r.parentElement,s++,o.push(...bt(i)),s>=e.seedMinLength){o.sort(Ae);for(let l of o)yield l;o=[];}}o.sort(Ae);for(let a of o)yield a;}function X(t){if(/^[a-z\-]{3,}$/i.test(t)){let e=t.split(/-|[A-Z]/);for(let n of e)if(n.length<=2||/[^aeiou]{4,}/i.test(n))return false;return true}return false}function Zt(t,e){let n=[],i=t.getAttribute("id");i&&e.idName(i)&&n.push({name:"#"+CSS.escape(i),penalty:0});for(let s=0;s<t.classList.length;s++){let a=t.classList[s];e.className(a)&&n.push({name:"."+CSS.escape(a),penalty:1});}for(let s=0;s<t.attributes.length;s++){let a=t.attributes[s];e.attr(a.name,a.value)&&n.push({name:`[${CSS.escape(a.name)}="${CSS.escape(a.value)}"]`,penalty:2});}let o=t.tagName.toLowerCase();if(e.tagName(o)){n.push({name:o,penalty:5});let s=Le(t,o);s!==void 0&&n.push({name:mt(o,s),penalty:10});}let r=Le(t);return r!==void 0&&n.push({name:en(o,r),penalty:50}),n}function K(t){let e=t[0],n=e.name;for(let i=1;i<t.length;i++){let o=t[i].level||0;e.level===o-1?n=`${t[i].name} > ${n}`:n=`${t[i].name} ${n}`,e=t[i];}return n}function ht(t){return t.map(e=>e.penalty).reduce((e,n)=>e+n,0)}function Ae(t,e){return ht(t)-ht(e)}function Le(t,e){let n=t.parentNode;if(!n)return;let i=n.firstChild;if(!i)return;let o=0;for(;i&&(i.nodeType===Node.ELEMENT_NODE&&(e===void 0||i.tagName.toLowerCase()===e)&&o++,i!==t);)i=i.nextSibling;return o}function Qt(t,e){let n=0,i=t,o=[];for(;i&&i!==e;){let r=i.tagName.toLowerCase(),s=Le(i,r);if(s===void 0)return;o.push({name:mt(r,s),penalty:NaN,level:n}),i=i.parentElement,n++;}if(Re(o,e))return o}function en(t,e){return t==="html"?"html":`${t}:nth-child(${e})`}function mt(t,e){return t==="html"?"html":`${t}:nth-of-type(${e})`}function*bt(t,e=[]){if(t.length>0)for(let n of t[0])yield*bt(t.slice(1,t.length),e.concat(n));else yield e;}function tn(t,e){return t.nodeType===Node.DOCUMENT_NODE?t:t===e.root?t.ownerDocument:t}function Re(t,e){let n=K(t);switch(e.querySelectorAll(n).length){case 0:throw new Error(`Can't select any node with this selector: ${n}`);case 1:return true;default:return false}}function*gt(t,e,n,i,o){if(t.length>2&&t.length>n.optimizedMinLength)for(let r=1;r<t.length-1;r++){if(new Date().getTime()-o.getTime()>n.timeoutMs)return;let a=[...t];a.splice(r,1),Re(a,i)&&i.querySelector(K(a))===e&&(yield a,yield*gt(a,e,n,i,o));}}var nn=["role","aria-label","type","name","href","src","data-testid","data-id"];function on(t){let e=5381;for(let n=0;n<t.length;n++)e=(e<<5)+e+t.charCodeAt(n)|0;return (e>>>0).toString(36)}function Me(t){let e=t.children.length,n=0,i=t.parentElement;if(i)for(let s of i.children){if(s===t)break;s.tagName===t.tagName&&n++;}let o=[];for(let s of nn){let a=t.getAttribute(s);a&&o.push(`${s}=${a}`);}let r=o.length>0?on(o.join(",")):"0";return `${e}:${n}:${r}`}function yt(t,e){let n=e.split(":");if(n.length!==3)return 0;let[i,o,r]=n,s=Number(i),a=Number(o);if(Number.isNaN(s)||Number.isNaN(a))return 0;let l=Me(t),[p,d,u]=l.split(":"),c=0,b=Math.abs(Number(p)-s);b===0?c+=.2:b<=2?c+=.1:b<=5&&(c+=.03);let w=Math.abs(Number(d)-a);return w===0?c+=.4:w===1?c+=.2:w<=3&&(c+=.08),u===r&&(c+=.4),c}function B(t,e){let n=e==="before"?"previousElementSibling":"nextElementSibling",i=t[n],o=3;for(;i&&o>0;){let r=i.textContent?.trim();if(r)return e==="before"?r.slice(-32):r.slice(0,32);i=i[n],o--;}return ""}function oe(t){let e=t.previousElementSibling?.textContent?.trim().slice(0,40)??"",n=t.nextElementSibling?.textContent?.trim().slice(0,40)??"";return [e,n].filter(Boolean).join(" | ")}function vt(t){if(t.id){let i=t.id.includes("'")?`concat('${t.id.replace(/'/g,`',"'",'`)}')`:`'${t.id}'`;return `//${t.localName}[@id=${i}]`}let e=[],n=t;for(;n&&n!==document.body&&e.length<6;){let i=n.localName,o=n.parentElement;if(n.id){let s=n.id.includes("'")?`concat('${n.id.replace(/'/g,`',"'",'`)}')`:`'${n.id}'`;return e.unshift(`/${i}[@id=${s}]`),"/"+e.join("")}let r=1;if(o)for(let s of o.children){if(s===n)break;s.localName===i&&r++;}e.unshift(`/${i}[${r}]`),n=o;}return "/html/body"+e.join("")}var q="data-feedback-anchor";function Pe(t){let e=ft(t,{className:u=>!/^(css|sc|emotion|styled)-/.test(u)&&!/^[a-z]{1,3}[A-Za-z0-9]{4,8}$/.test(u),attr:u=>["data-testid","data-id","role","aria-label"].includes(u),idName:u=>!u.startsWith("radix-")&&!/^:r[0-9]+:$/.test(u),seedMinLength:3,optimizedMinLength:2}),n=vt(t),o=(t.textContent?.trim()??"").slice(0,120),r=B(t,"before"),s=B(t,"after"),a=Me(t),l=oe(t),d=t.closest(`[${q}]`)?.getAttribute(q)??null;return {cssSelector:e,xpath:n,textSnippet:o,textPrefix:r,textSuffix:s,fingerprint:a,neighborText:l,elementTag:t.tagName,elementId:t.id||void 0,anchorKey:d}}function xt(t,e){let n=t.getBoundingClientRect();return n.left<=e.x&&n.top<=e.y&&n.right>=e.x+e.width&&n.bottom>=e.y+e.height}function wt(t,e=document.documentElement){let n=t.x+t.width/2,i=t.y+t.height/2,o=document.elementFromPoint(n,i);if(!o||o===e)return document.body;let r=o;for(;r&&r!==document.body;){if(r.hasAttribute(q)&&xt(r,t))return r;r=r.parentElement;}for(r=o;r&&r!==document.body;){if(xt(r,t))return r;r=r.parentElement;}return document.body}function Et(t,e){return e.width<=0||e.height<=0?{xPct:0,yPct:0,wPct:1,hPct:1}:{xPct:(t.x-e.x)/e.width,yPct:(t.y-e.y)/e.height,wPct:t.width/e.width,hPct:t.height/e.height}}var sn={question:"type.question",change:"type.change",bug:"type.bug",other:"type.other"};function rn(){let t=navigator.userAgentData;return t?t.platform==="macOS":navigator.platform?.includes("Mac")??/Macintosh|Mac OS X/i.test(navigator.userAgent)}var se=class{constructor(e,n$1){this.colors=e;this.t=n$1;this.root=b("div",{style:`
|
|
2
2
|
position:fixed;
|
|
3
3
|
z-index:${2147483647};
|
|
4
4
|
width:300px;
|
|
@@ -1553,7 +1553,7 @@ ${t.stack}`:""}`;try{let e=new WeakSet;return JSON.stringify(t,(n,i)=>{if(typeof
|
|
|
1553
1553
|
pointer-events:none;
|
|
1554
1554
|
top:-6px;
|
|
1555
1555
|
left:${a}px;
|
|
1556
|
-
`;}contains(e){return this.root.contains(e)}destroy(){this.cancelShow(),this.cancelHide(),this.root.remove();}};var Z=null;function Fn(t){return t===void 0||t===false?{console:false,network:false,maxConsoleEntries:50,maxNetworkEntries:20}:t===true?{console:true,network:true,maxConsoleEntries:50,maxNetworkEntries:20}:{console:t.console!==false,network:t.network!==false,maxConsoleEntries:typeof t.maxConsoleEntries=="number"?t.maxConsoleEntries:50,maxNetworkEntries:typeof t.maxNetworkEntries=="number"?t.maxNetworkEntries:20}}function ye(){let t=()=>{};return {destroy:t,open:t,close:t,refresh:t,focusFeedback:()=>false,on:()=>t,off:t}}function In(t){return t===void 0||t===false?{enabled:false,param:"siteping"}:t===true?{enabled:true,param:"siteping"}:{enabled:true,param:t.param??"siteping"}}function Bt(t){let e=t.debug?(...h)=>console.debug("[siteping]",...h):()=>{};if(Z)return e("initSiteping() called more than once \u2014 returning existing instance"),Z;if(!t.forceShow)try{if(typeof process<"u")return t.onSkip?.("production"),ye()}catch{}let n=typeof t.minViewportWidth=="number"&&Number.isFinite(t.minViewportWidth)?t.minViewportWidth:768;if(!t.forceShow&&window.innerWidth<n){let h="mobile";return t.onSkip?.(h),ye()}if(!t.store&&(!t.endpoint||typeof t.endpoint!="string"))return console.error("[siteping] Missing 'endpoint' or 'store' in config. Provide an endpoint like '/api/siteping' or a SitepingStore instance."),ye();if(!t.projectName||typeof t.projectName!="string")return console.error("[siteping] Missing or invalid 'projectName' in config. Expected a non-empty string."),ye();let i=t.locale??"en",o=i==="en"?Promise.resolve():G$1(i).catch(()=>{}),r=H(i),s=t.scopeAnnotationsByUrl??true,a=()=>{try{let h=t.getPageScope?.();if(h)return h}catch(h){e("getPageScope() threw, falling back to pathname:",h);}return {url:window.location.pathname,urlPattern:null}};e("Initializing widget",{projectName:t.projectName,theme:t.theme??"light",locale:i,scopeAnnotationsByUrl:s});let l=Fn(t.captureDiagnostics),p=l.console?new pe(l.maxConsoleEntries):null,d=l.network?new ce(l.maxNetworkEntries):null,u=w(t.accentColor,t.theme),c=new V,b=new V,w$1=(()=>{if(t.store)return new be(t.store,t.projectName);let h=t.endpoint;if(typeof h!="string"||h.length===0)throw new Error("[siteping] internal invariant: endpoint must be a non-empty string in HTTP mode");return new le(h,t.projectName)})();t.onOpen&&c.on("open",t.onOpen),t.onClose&&c.on("close",t.onClose),t.onFeedbackSent&&c.on("feedback:sent",t.onFeedbackSent),t.onError&&c.on("feedback:error",t.onError),t.onAnnotationStart&&c.on("annotation:start",t.onAnnotationStart),t.onAnnotationEnd&&c.on("annotation:end",t.onAnnotationEnd),c.on("feedback:sent",h=>b.emit("feedback:sent",h)),c.on("feedback:deleted",h=>b.emit("feedback:deleted",h)),c.on("open",()=>b.emit("panel:open")),c.on("close",()=>b.emit("panel:close")),c.on("open",()=>e("Panel opened")),c.on("close",()=>e("Panel closed")),c.on("feedback:sent",h=>e("Feedback sent",h.id)),c.on("feedback:error",h=>e("Feedback failed",h.message)),c.on("annotation:start",()=>e("Annotation started")),c.on("annotation:end",()=>e("Annotation ended"));let L=document.createElement("siteping-widget");L.style.cssText=`position:fixed;z-index:${2147483647};`;let I=false;try{typeof process<"u"&&process.env?.["NODE_ENV"]==="test"&&(I=!0);}catch{}let H$1=I?"open":"closed",A=L.attachShadow({mode:H$1});if("adoptedStyleSheets"in ShadowRoot.prototype){let h=new CSSStyleSheet;h.replaceSync(Oe(u)),A.adoptedStyleSheets=[h];}else {let h=document.createElement("style");h.textContent=Oe(u),A.appendChild(h);}document.body.appendChild(L);let S=document.createElement("div");S.setAttribute("role","status"),S.setAttribute("aria-live","polite"),S.setAttribute("aria-atomic","true"),S.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",document.body.appendChild(S);let T=new ge(u,i),g=new me(u,T,c,r,S),R=new de(A,t,c,r);c.on("markers:changed",h=>R.updateBadge(h));let x=null,N=null,k=false,Q=0;async function je(){return k?null:x||(N||(N=import('./panel-
|
|
1556
|
+
`;}contains(e){return this.root.contains(e)}destroy(){this.cancelShow(),this.cancelHide(),this.root.remove();}};var Z=null;function Fn(t){return t===void 0||t===false?{console:false,network:false,maxConsoleEntries:50,maxNetworkEntries:20}:t===true?{console:true,network:true,maxConsoleEntries:50,maxNetworkEntries:20}:{console:t.console!==false,network:t.network!==false,maxConsoleEntries:typeof t.maxConsoleEntries=="number"?t.maxConsoleEntries:50,maxNetworkEntries:typeof t.maxNetworkEntries=="number"?t.maxNetworkEntries:20}}function ye(){let t=()=>{};return {destroy:t,open:t,close:t,refresh:t,focusFeedback:()=>false,on:()=>t,off:t}}function In(t){return t===void 0||t===false?{enabled:false,param:"siteping"}:t===true?{enabled:true,param:"siteping"}:{enabled:true,param:t.param??"siteping"}}function Bt(t){let e=t.debug?(...h)=>console.debug("[siteping]",...h):()=>{};if(Z)return e("initSiteping() called more than once \u2014 returning existing instance"),Z;if(!t.forceShow)try{if(typeof process<"u")return t.onSkip?.("production"),ye()}catch{}let n=typeof t.minViewportWidth=="number"&&Number.isFinite(t.minViewportWidth)?t.minViewportWidth:768;if(!t.forceShow&&window.innerWidth<n){let h="mobile";return t.onSkip?.(h),ye()}if(!t.store&&(!t.endpoint||typeof t.endpoint!="string"))return console.error("[siteping] Missing 'endpoint' or 'store' in config. Provide an endpoint like '/api/siteping' or a SitepingStore instance."),ye();if(!t.projectName||typeof t.projectName!="string")return console.error("[siteping] Missing or invalid 'projectName' in config. Expected a non-empty string."),ye();let i=t.locale??"en",o=i==="en"?Promise.resolve():G$1(i).catch(()=>{}),r=H(i),s=t.scopeAnnotationsByUrl??true,a=()=>{try{let h=t.getPageScope?.();if(h)return h}catch(h){e("getPageScope() threw, falling back to pathname:",h);}return {url:window.location.pathname,urlPattern:null}};e("Initializing widget",{projectName:t.projectName,theme:t.theme??"light",locale:i,scopeAnnotationsByUrl:s});let l=Fn(t.captureDiagnostics),p=l.console?new pe(l.maxConsoleEntries):null,d=l.network?new ce(l.maxNetworkEntries):null,u=w(t.accentColor,t.theme),c=new V,b=new V,w$1=(()=>{if(t.store)return new be(t.store,t.projectName);let h=t.endpoint;if(typeof h!="string"||h.length===0)throw new Error("[siteping] internal invariant: endpoint must be a non-empty string in HTTP mode");return new le(h,t.projectName)})();t.onOpen&&c.on("open",t.onOpen),t.onClose&&c.on("close",t.onClose),t.onFeedbackSent&&c.on("feedback:sent",t.onFeedbackSent),t.onError&&c.on("feedback:error",t.onError),t.onAnnotationStart&&c.on("annotation:start",t.onAnnotationStart),t.onAnnotationEnd&&c.on("annotation:end",t.onAnnotationEnd),c.on("feedback:sent",h=>b.emit("feedback:sent",h)),c.on("feedback:deleted",h=>b.emit("feedback:deleted",h)),c.on("open",()=>b.emit("panel:open")),c.on("close",()=>b.emit("panel:close")),c.on("open",()=>e("Panel opened")),c.on("close",()=>e("Panel closed")),c.on("feedback:sent",h=>e("Feedback sent",h.id)),c.on("feedback:error",h=>e("Feedback failed",h.message)),c.on("annotation:start",()=>e("Annotation started")),c.on("annotation:end",()=>e("Annotation ended"));let L=document.createElement("siteping-widget");L.style.cssText=`position:fixed;z-index:${2147483647};`;let I=false;try{typeof process<"u"&&process.env?.["NODE_ENV"]==="test"&&(I=!0);}catch{}let H$1=I?"open":"closed",A=L.attachShadow({mode:H$1});if("adoptedStyleSheets"in ShadowRoot.prototype){let h=new CSSStyleSheet;h.replaceSync(Oe(u)),A.adoptedStyleSheets=[h];}else {let h=document.createElement("style");h.textContent=Oe(u),A.appendChild(h);}document.body.appendChild(L);let S=document.createElement("div");S.setAttribute("role","status"),S.setAttribute("aria-live","polite"),S.setAttribute("aria-atomic","true"),S.style.cssText="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;",document.body.appendChild(S);let T=new ge(u,i),g=new me(u,T,c,r,S),R=new de(A,t,c,r);c.on("markers:changed",h=>R.updateBadge(h));let x=null,N=null,k=false,Q=0;async function je(){return k?null:x||(N||(N=import('./panel-4KOYCMDH.js').then(h=>k?null:(x=new h.Panel(A,u,c,w$1,t.projectName,g,r,i,{getScope:a,scopeAnnotationsByUrl:s}),x))),N)}if(typeof window<"u"){let h=()=>{k||je();},f=window.requestIdleCallback;typeof f=="function"?f(h):setTimeout(h,200);}let $=false,zt=c.on("panel:toggle",h=>{x||(h?($=true,je().then(f=>{f&&$&&f.open(),$=false;}).catch(f=>e("Failed to lazy-load panel:",f))):$=false);}),Xe=new re(u,c,r,t.enableScreenshot??false);i!=="en"&&o.then(()=>{k||(R.refreshLabels(),Xe.refreshLabels());});let ve=false,jt=c.on("annotation:complete",async h=>{if(ve){c.emit("submission:cancelled");return}ve=true;try{let{annotation:f,type:y,message:M,screenshotDataUrl:O}=h,C=t.identity??Ie();if(!C){if(C=await Nn(A,r),!C){c.emit("submission:cancelled");return}It(C);}let ee=(()=>{try{return crypto.randomUUID()}catch{return `${Date.now()}-${Math.random().toString(36).slice(2)}`}})(),E=a(),te=null;(p||d)&&(te={console:p?.getEntries()??[],network:d?.getEntries()??[]});let qt={projectName:t.projectName,type:y,message:M,url:E.url,urlPattern:E.urlPattern,viewport:`${window.innerWidth}x${window.innerHeight}`,userAgent:navigator.userAgent,authorName:C.name,authorEmail:C.email,annotations:[f],clientId:ee,screenshotDataUrl:O??null,diagnostics:te};try{let _=await w$1.sendFeedback(qt);c.emit("feedback:sent",_),(!s||_.url===E.url)&&g.addFeedback(_,g.count+1),S.textContent=r("feedback.sent.confirmation"),x&&await x.refresh();}catch(_){c.emit("feedback:error",_ instanceof Error?_:new Error(String(_))),S.textContent=r("feedback.error.message");}}finally{ve=false;}}),xe=a(),Xt=s?{limit:20,url:xe.url}:{limit:20},we=In(t.deepLink),Kt=++Q;Promise.all([w$1.getFeedbacks(t.projectName,Xt),o]).then(([{feedbacks:h}])=>{if(k||Q!==Kt)return;let f=s?h.filter(y=>y.url===xe.url):h;if(g.render(f),we.enabled)try{let y=new URLSearchParams(window.location.search).get(we.param);if(y){let M=g.focusFeedback(y);e(`deepLink ?${we.param}=${y} ${M?"focused":"did not match a visible feedback"}`);}}catch(y){e("deepLink parsing failed:",y);}}).catch(h=>{e("Failed to load initial markers:",h);}),t.endpoint&&Rt(t.endpoint,t.identity??Ie()).then(()=>e("Retry queue flushed")).catch(()=>{});let Ke=()=>{let h=++Q;if(x?.isCurrentlyOpen)return x.refresh();let f=a(),y=s?{limit:20,url:f.url}:{limit:20};return w$1.getFeedbacks(t.projectName,y).then(({feedbacks:M})=>{if(k||h!==Q||x?.isCurrentlyOpen)return;let O=s?M.filter(C=>C.url===f.url):M;g.render(O);})},qe=null;if(t.watchNavigation!==false&&typeof window<"u"&&typeof history<"u"){let h=E=>`${E.url}
|
|
1557
1557
|
${E.urlPattern??""}`,f=h(xe),y=()=>{if(k)return;let E=h(a());if(E===f)return;let te=f;f=E,e("SPA navigation detected \u2014 refreshing feedbacks for new scope"),Ke().catch(()=>{f===E&&(f=te);});},M=history.pushState,O=history.replaceState,C=function(...E){M.apply(this,E),y();},ee=function(...E){O.apply(this,E),y();};history.pushState=C,history.replaceState=ee,window.addEventListener("popstate",y),window.addEventListener("hashchange",y),qe=()=>{window.removeEventListener("popstate",y),window.removeEventListener("hashchange",y),history.pushState===C&&(history.pushState=M),history.replaceState===ee&&(history.replaceState=O);};}return Z={destroy:()=>{e("Destroying widget"),k=true,$=false,qe?.(),jt(),zt(),R.destroy(),x?.destroy(),Xe.destroy(),g.destroy(),T.destroy(),p?.dispose(),d?.dispose(),c.removeAll(),b.removeAll(),S.remove(),L.remove(),Z=null;},open:()=>{c.emit("panel:toggle",true);},close:()=>{x?x.close():$=false;},focusFeedback:h=>g.focusFeedback(h),refresh:()=>{Ke().catch(()=>{});},on:(h,f)=>b.on(h,f),off:(h,f)=>{b.off(h,f);}},Z}function Nn(t,e){return new Promise(n=>{let i=t.activeElement??document.activeElement,o=t.host;o.parentNode&&o.parentNode.appendChild(o);let r=document.createElement("div");r.style.cssText=`
|
|
1558
1558
|
position:fixed;inset:0;
|
|
1559
1559
|
background:var(--sp-identity-overlay);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {b,c,a,i,t,K,V,j,S,M as M$1,O,Z,W,X,d,P,Q,R,x,I,y,e,s,k,p,l,m,n,o,r,q}from'./chunk-NEX6ECQM.js';var M=class{element;current;opts;onChange;datasetKey;constructor(e){this.opts=e.options,this.current=e.value,this.onChange=e.onChange,this.datasetKey=e.datasetKey,this.element=b("div",{class:`sp-segmented${e.extraClass?` ${e.extraClass}`:""}`,role:"radiogroup"}),this.element.setAttribute("aria-label",e.ariaLabel);for(let t of this.opts){let s=document.createElement("button");s.type="button",s.className=e.modifierPrefix!==void 0?`sp-segmented__btn ${e.modifierPrefix}${t.value}`:"sp-segmented__btn",s.dataset[this.datasetKey]=t.value,s.setAttribute("role","radio");let n=this.current===t.value;if(s.setAttribute("aria-checked",String(n)),s.tabIndex=n?0:-1,n&&s.classList.add("sp-segmented__btn--active"),t.color&&s.style.setProperty("--sp-chip-color",t.color),t.bg&&s.style.setProperty("--sp-chip-bg",t.bg),t.icon){let a$1=b("span",{class:"sp-segmented__icon"});a$1.appendChild(a(t.icon)),s.appendChild(a$1);}let o=b("span",{class:"sp-segmented__label"});c(o,t.label),s.appendChild(o),s.addEventListener("click",()=>this.select(t.value)),s.addEventListener("keydown",a=>this.handleKey(a,t.value)),this.element.appendChild(s);}}select(e){this.current=e,this.syncSelection(),this.onChange(e);}syncSelection(){let e=this.element.querySelectorAll(".sp-segmented__btn");for(let t of e){let s=t.dataset[this.datasetKey]===this.current;t.classList.toggle("sp-segmented__btn--active",s),t.setAttribute("aria-checked",String(s)),t.tabIndex=s?0:-1;}}setOptionVisible(e,t){let s=this.element.querySelector(`[data-${this.kebabKey()}="${e}"]`);return s?(s.style.display=t?"":"none",true):false}get value(){return this.current}focusOption(e){this.element.querySelector(`[data-${this.kebabKey()}="${e}"]`)?.focus();}handleKey(e,t){let s=this.opts.map(d=>d.value).filter(d=>{let c=this.element.querySelector(`[data-${this.kebabKey()}="${d}"]`);return c!==null&&c.style.display!=="none"}),n=s.indexOf(t);if(n<0)return;let o;switch(e.key){case "ArrowLeft":o=(n-1+s.length)%s.length;break;case "ArrowRight":o=(n+1)%s.length;break;case "Home":o=0;break;case "End":o=s.length-1;break;default:return}e.preventDefault();let a=s[o];a!==void 0&&(this.select(a),this.focusOption(a));}kebabKey(){return this.datasetKey.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}};var oe=class{constructor(e,t$1,s,n,o,a$1,d,c$1,v){this.colors=t$1;this.bus=s;this.client=n;this.projectName=o;this.markers=a$1;this.t=d;this.locale=c$1;this.shadowRoot=e,this.getScope=v?.getScope??(()=>({url:window.location.pathname,urlPattern:null})),this.scopeAnnotationsByUrl=v?.scopeAnnotationsByUrl??true,this.root=b("div",{class:"sp-panel"}),this.root.setAttribute("role","complementary"),this.root.setAttribute("aria-label",this.t("panel.ariaLabel")),this.root.setAttribute("aria-hidden","true");let h=b("div",{class:"sp-panel-header"}),u=b("span",{class:"sp-panel-title"});c(u,this.t("panel.title")),this.closeBtn=document.createElement("button"),this.closeBtn.className="sp-panel-close",this.closeBtn.setAttribute("aria-label",this.t("panel.close")),this.closeBtn.appendChild(a(i)),this.closeBtn.addEventListener("click",()=>this.close()),this.deleteAllBtn=document.createElement("button"),this.deleteAllBtn.className="sp-btn-delete-all",this.deleteAllBtn.setAttribute("aria-label",this.t("panel.deleteAll")),this.deleteAllBtn.appendChild(a(t));let m=document.createElement("span");c(m,` ${this.t("panel.deleteAll")}`),this.deleteAllBtn.appendChild(m),this.deleteAllBtn.addEventListener("click",()=>this.confirmDeleteAll()),this.exportBtn=new K(t$1,()=>this.feedbacks,this.t);let k=b("div",{class:"sp-panel-header-right"});k.appendChild(this.exportBtn.element),k.appendChild(this.deleteAllBtn),k.appendChild(this.closeBtn),h.appendChild(u),h.appendChild(k),this.stats=new V(t$1,this.t);let f=b("div",{class:"sp-filters"}),y=b("div",{class:"sp-search-wrap"}),T=a(j);T.setAttribute("class","sp-search-icon"),this.searchInput=document.createElement("input"),this.searchInput.type="text",this.searchInput.className="sp-search",this.searchInput.placeholder=this.t("panel.search"),this.searchInput.setAttribute("aria-label",this.t("panel.searchAria")),this.searchInput.addEventListener("input",()=>{this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>this.loadFeedbacks().catch(()=>{}),200);}),y.appendChild(T),y.appendChild(this.searchInput);let g=b("div",{class:"sp-filter-bar"});g.appendChild(this.buildTypeDropdown()),g.appendChild(this.buildStatusSegmented()),g.appendChild(this.buildScopeSegmented()),this.sortControls=new S(t$1,()=>this.renderList(),this.t),f.appendChild(y),f.appendChild(g),f.appendChild(this.sortControls.element),this.listContainer=b("div",{class:"sp-list"}),this.listContainer.setAttribute("role","list"),this.listContainer.setAttribute("aria-label",this.t("panel.feedbackList")),this.bulk=new M$1(t$1,{onResolve:i=>this.bulkResolve(i),onDelete:i=>this.bulkDelete(i)},this.t),this.bulk.setListContainer(this.listContainer),this.detail=new O(t$1,{onBack:()=>this.detail.hide(),onResolve:async i=>{try{let l=i.status!=="resolved";await this.client.resolveFeedback(i.id,l),await this.loadFeedbacks(),this.detail.hide();}catch(l){throw this.bus.emit("feedback:error",l instanceof Error?l:new Error(String(l))),l}},onDelete:async i=>{try{await this.client.deleteFeedback(i.id),this.bus.emit("feedback:deleted",i.id),await this.loadFeedbacks(),this.detail.hide();}catch(l){throw this.bus.emit("feedback:error",l instanceof Error?l:new Error(String(l))),l}},onGoToAnnotation:i=>{if(i.annotations.length>0){let l=i.annotations[0];if(!l)return;window.scrollTo({left:l.scrollX,top:l.scrollY,behavior:"smooth"}),this.markers.pinHighlight(i);}}},this.t,c$1),this.shortcuts=new Z(t$1,{onNavigate:i=>{let l=W(this.listContainer);X(this.listContainer,i==="down"?l+1:l-1);},onResolve:()=>{let i=this.getFocusedFeedback();if(i&&!this.pendingMutations.has(i.id)){let p=this.listContainer.querySelector(`[data-feedback-id="${CSS.escape(i.id)}"]`)?.querySelector('[data-action="resolve"]');p&&this.toggleResolve(i,p).catch(()=>{});}},onDelete:()=>{let i=this.getFocusedFeedback();if(i&&!this.pendingMutations.has(i.id)){let p=this.listContainer.querySelector(`[data-feedback-id="${CSS.escape(i.id)}"]`)?.querySelector('[data-action="delete"]');p&&this.deleteFeedback(i,p).catch(()=>{});}},onFocusSearch:()=>this.searchInput.focus(),onToggleSelect:()=>{let i=this.getFocusedFeedback();i&&this.bulk.toggle(i.id);}},this.t),this.root.appendChild(h),this.root.appendChild(this.stats.element),this.root.appendChild(f),this.root.appendChild(this.listContainer),this.root.appendChild(this.bulk.barElement),this.root.appendChild(this.detail.element),this.root.appendChild(this.shortcuts.helpOverlay),this.root.appendChild(this.shortcuts.hintButton),e.appendChild(this.root),this.onListClick=i=>{let l=i.target;if(l.closest(".sp-bulk-checkbox"))return;let p=l.closest("[data-action]");if(p){i.stopPropagation();let A=p.closest(".sp-card");if(!A)return;let L=A.dataset.feedbackId,C=this.feedbacks.find(E=>E.id===L);if(!C)return;let B=p.dataset.action;if(B==="expand"){let E=A.querySelector(".sp-card-message");if(!E)return;let I=E.classList.toggle("sp-card-message--expanded");c(p,I?this.t("panel.showLess"):this.t("panel.showMore")),p.setAttribute("aria-expanded",String(I));}else if(B==="resolve"){if(this.pendingMutations.has(C.id))return;let E=p;this.toggleResolve(C,E).catch(()=>{});}else if(B==="delete"){if(this.pendingMutations.has(C.id))return;let E=p;this.deleteFeedback(C,E).catch(()=>{});}return}let w=l.closest(".sp-card");if(w){let A=w.dataset.feedbackId,L=this.feedbacks.find(C=>C.id===A);if(L){let C=this.feedbacks.indexOf(L)+1;this.detail.show(L,C);}}},this.listContainer.addEventListener("click",this.onListClick),this.onListKeydown=i=>{let l=i;if(l.key!=="Enter"&&l.key!==" ")return;let p=l.target,w=p.closest(".sp-card");if(!w||p!==w)return;l.preventDefault();let A=w.dataset.feedbackId,L=this.feedbacks.find(C=>C.id===A);if(L){let C=this.feedbacks.indexOf(L)+1;this.detail.show(L,C);}},this.listContainer.addEventListener("keydown",this.onListKeydown),this.onListMouseover=i=>{let p=i.target.closest(".sp-card");if(!p)return;let w=p.dataset.feedbackId;w&&this.markers.highlight(w);},this.listContainer.addEventListener("mouseover",this.onListMouseover),this.onListMouseout=i=>{let l=i.relatedTarget;l&&this.listContainer.contains(l)||this.markers.highlight("");},this.listContainer.addEventListener("mouseout",this.onListMouseout),this.bus.on("panel:toggle",i=>{i?this.open():this.close();}),e.addEventListener("keydown",i=>{let l=i;if(l.key==="Escape"&&this.isOpen){if(this.detail.isVisible){this.detail.hide();return}this.close();return}if(l.key==="Tab"&&this.isOpen){let p=B=>{let E=B;for(;E&&E!==this.root;){if(E.style.display==="none")return false;E=E.parentElement;}return true},w=Array.from(this.root.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(B=>p(B)&&!B.hasAttribute("disabled"));if(w.length===0)return;let A=w[0],L=w[w.length-1];if(!A||!L)return;let C=e.activeElement;l.shiftKey&&C===A?(l.preventDefault(),L.focus()):!l.shiftKey&&C===L&&(l.preventDefault(),A.focus());}}),this.onMarkerClick=(i=>{this.scrollToFeedback(i.detail.feedbackId);}),document.addEventListener("sp-marker-click",this.onMarkerClick);}colors;bus;client;projectName;markers;t;locale;root;listContainer;searchInput;closeBtn;deleteAllBtn;activeFilters=new Set(["all"]);typeDropdownBtn;typeDropdownContainer;typeDropdownMenu=null;typeDropdownOutsideHandler=null;statusSegmented;typeOptions;feedbacks=[];currentPage=1;totalFeedbacks=0;isLoadingMore=false;isOpen=false;searchTimeout=null;loadController=null;pendingMutations=new Set;stats;sortControls;bulk;exportBtn;shortcuts;detail;shadowRoot;getScope;scopeAnnotationsByUrl;scopeSegmented;initialScopeFilter="this";onMarkerClick;onListClick;onListKeydown;onListMouseover;onListMouseout;async open(){this.isOpen||(this.isOpen=true,this.root.classList.add("sp-panel--open"),this.root.setAttribute("aria-hidden","false"),this.bus.emit("open"),this.shortcuts.enable(this.shadowRoot),await this.loadFeedbacks(),requestAnimationFrame(()=>{this.searchInput?this.searchInput.focus():this.closeBtn.focus();}));}close(){if(!this.isOpen)return;this.isOpen=false,this.root.classList.remove("sp-panel--open"),this.root.setAttribute("aria-hidden","true"),this.bus.emit("close"),this.shortcuts.disable(),this.detail.hide(),this.root.getRootNode().querySelector(".sp-fab")?.focus();}showLoading(){this.listContainer.replaceChildren();let e=b("div",{class:"sp-loading"});e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.setAttribute("aria-label",this.t("panel.loading"));let t=b("div",{class:"sp-spinner"});e.appendChild(t),this.listContainer.appendChild(e);}showError(){this.listContainer.replaceChildren();let e=b("div",{class:"sp-empty"});e.setAttribute("role","status"),e.setAttribute("aria-live","polite");let t=b("div",{class:"sp-empty-text"});c(t,this.t("panel.loadError"));let s=document.createElement("button");s.className="sp-btn-ghost",s.style.marginTop="8px",c(s,this.t("panel.retry")),s.addEventListener("click",()=>this.loadFeedbacks().catch(()=>{})),e.appendChild(t),e.appendChild(s),this.listContainer.appendChild(e);}async loadFeedbacks(){this.loadController?.abort(),this.loadController=new AbortController;let{signal:e}=this.loadController;this.currentPage=1;let t=this.searchInput.value.trim()||void 0,s=this.activeFilters.has("all")?void 0:Array.from(this.activeFilters)[0],n=this.statusSegmented.value,o=n==="all"?void 0:n,a=this.getScope();this.syncScopeAvailability();let d=this.scopeSegmented.value,c={page:1,limit:20};s&&(c.type=s),o&&(c.status=o),t&&(c.search=t),d==="this"?c.url=a.url:d==="template"&&a.urlPattern&&(c.urlPattern=a.urlPattern);let v=this.feedbacks.length>0;v||this.showLoading();try{let{feedbacks:h,total:u}=await this.client.getFeedbacks(this.projectName,c);if(e.aborted)return;this.feedbacks=h,this.totalFeedbacks=u,this.stats.update(h,u),this.bulk.reset(),this.renderList();let m=this.scopeAnnotationsByUrl?h.filter(k=>k.url===a.url):h;this.markers.render(m);}catch(h){if(e.aborted)return;v||this.showError(),this.bus.emit("feedback:error",h instanceof Error?h:new Error(String(h)));}}async loadMoreFeedbacks(){if(this.isLoadingMore)return;this.isLoadingMore=true;let e=this.loadController,t=this.currentPage+1,s=this.searchInput.value.trim()||void 0,n=this.activeFilters.has("all")?void 0:Array.from(this.activeFilters)[0],o=this.statusSegmented.value,a=o==="all"?void 0:o,d$1=this.getScope(),c=this.scopeSegmented.value,v={page:t,limit:20};n&&(v.type=n),a&&(v.status=a),s&&(v.search=s),c==="this"?v.url=d$1.url:c==="template"&&d$1.urlPattern&&(v.urlPattern=d$1.urlPattern);let h=this.listContainer.querySelector(".sp-btn-load-more"),u;h&&(u=d(h));try{let{feedbacks:m,total:k}=await this.client.getFeedbacks(this.projectName,v);if(e!==this.loadController)return;this.currentPage=t,this.totalFeedbacks=k,this.feedbacks=[...this.feedbacks,...m],this.stats.update(this.feedbacks,k),this.renderList();let f=this.scopeAnnotationsByUrl?this.feedbacks.filter(y=>y.url===d$1.url):this.feedbacks;this.markers.render(f);}catch(m){u&&u(),this.bus.emit("feedback:error",m instanceof Error?m:new Error(String(m)));}finally{this.isLoadingMore=false;}}renderList(){if(this.listContainer.replaceChildren(),this.feedbacks.length===0){let o=b("div",{class:"sp-empty"});o.setAttribute("role","status"),o.setAttribute("aria-live","polite");let a=b("div",{class:"sp-empty-text"});c(a,this.t("panel.empty")),o.appendChild(a),this.listContainer.appendChild(o);return}let e=P(this.feedbacks,this.sortControls.sortMode),t=e.map(o=>o.id),s=this.bulk.createSelectAllBar(t,this.t("bulk.selectAll"));if(this.listContainer.appendChild(s),this.sortControls.groupByPage){let o=Q(e),a=0;for(let[d,c]of o){let v=R(d,c.length,this.colors);this.listContainer.appendChild(v);let h=b("div",{class:"sp-group-content"});for(let u of c){let m=this.createCard(u,a+1);m.style.setProperty("--sp-card-i",String(a)),h.appendChild(m),a++;}this.listContainer.appendChild(h);}}else e.forEach((o,a)=>{let d=this.createCard(o,a+1);d.style.setProperty("--sp-card-i",String(a)),this.listContainer.appendChild(d);});let n=this.totalFeedbacks-this.feedbacks.length;if(n>0){let o=b("div",{class:"sp-load-more-wrap"}),a=document.createElement("button");a.className="sp-btn-ghost sp-btn-load-more",c(a,this.t("panel.loadMore").replace("{remaining}",String(n))),a.addEventListener("click",()=>this.loadMoreFeedbacks().catch(()=>{})),o.appendChild(a),this.listContainer.appendChild(o);}}createCard(e$1,t$1){let s$1=e$1.status==="resolved",n=x(e$1.type,this.colors),o=b("div",{class:`sp-card ${s$1?"sp-card--resolved":""}`});o.setAttribute("role","listitem"),o.setAttribute("tabindex","0"),o.setAttribute("aria-label",`Feedback #${t$1}: ${I(e$1.type,this.t)} \u2014 ${e$1.message.slice(0,80)}`),o.dataset.feedbackId=e$1.id;let a$1=b("div",{class:"sp-card-bar"});a$1.style.background=s$1?"#9ca3af":n;let d=b("div",{class:"sp-card-body"}),c$1=b("div",{class:"sp-card-header"}),v=this.bulk.createCheckbox(e$1.id);c$1.appendChild(v);let h=b("span",{class:"sp-card-number"});c(h,`#${t$1}`);let u=b("span",{class:"sp-badge"}),m=y(e$1.type,this.colors);u.style.background=m,u.style.color=n,c(u,I(e$1.type,this.t));let k$1=b("span",{class:"sp-card-date"});c(k$1,e(e$1.createdAt,this.locale)),c$1.appendChild(h),c$1.appendChild(u),c$1.appendChild(k$1);let f=b("div",{class:"sp-card-message"});c(f,e$1.message);let y$1=document.createElement("button");y$1.className="sp-card-expand",y$1.dataset.action="expand",c(y$1,this.t("panel.showMore")),y$1.style.display="none",y$1.setAttribute("aria-expanded","false"),requestAnimationFrame(()=>{f.scrollHeight>f.clientHeight&&(y$1.style.display="block");});let T=b("div",{class:"sp-card-footer"}),g=document.createElement("button");if(g.className="sp-btn-resolve",g.dataset.action="resolve",s$1){g.appendChild(a(s));let p=document.createElement("span");c(p,` ${this.t("panel.reopen")}`),g.appendChild(p);}else {g.appendChild(a(k));let p=document.createElement("span");c(p,` ${this.t("panel.resolve")}`),g.appendChild(p);}let i=document.createElement("button");i.className="sp-btn-delete",i.dataset.action="delete",i.appendChild(a(t));let l=document.createElement("span");return c(l,` ${this.t("panel.delete")}`),i.appendChild(l),T.appendChild(g),T.appendChild(i),d.appendChild(c$1),d.appendChild(f),d.appendChild(y$1),d.appendChild(T),o.appendChild(a$1),o.appendChild(d),o}async bulkResolve(e){try{await Promise.all(e.map(t=>this.client.resolveFeedback(t,!0))),await this.loadFeedbacks();}catch(t){throw this.bus.emit("feedback:error",t instanceof Error?t:new Error(String(t))),t}}async bulkDelete(e){try{await Promise.all(e.map(t=>this.client.deleteFeedback(t)));for(let t of e)this.bus.emit("feedback:deleted",t);await this.loadFeedbacks();}catch(t){throw this.bus.emit("feedback:error",t instanceof Error?t:new Error(String(t))),t}}async confirmDeleteAll(){if(await this.showConfirmDialog(this.t("panel.deleteAllConfirmTitle"),this.t("panel.deleteAllConfirmMessage"))){this.deleteAllBtn.disabled=true;try{await this.client.deleteAllFeedbacks(this.projectName),this.bus.emit("feedback:all-deleted"),await this.loadFeedbacks();}catch(t){this.bus.emit("feedback:error",t instanceof Error?t:new Error(String(t)));}finally{this.deleteAllBtn.disabled=false;}}}showConfirmDialog(e,t){return new Promise(s=>{let n=b("div",{class:"sp-confirm-backdrop"}),o=`sp-confirm-title-${Date.now()}`,a=`sp-confirm-msg-${Date.now()}`,d=b("div",{class:"sp-confirm-dialog"});d.setAttribute("role","alertdialog"),d.setAttribute("aria-modal","true"),d.setAttribute("aria-labelledby",o),d.setAttribute("aria-describedby",a);let c$1=b("div",{class:"sp-confirm-title"});c$1.id=o,c(c$1,e);let v=b("div",{class:"sp-confirm-message"});v.id=a,c(v,t);let h=b("div",{class:"sp-confirm-actions"}),u=document.createElement("button");u.type="button",u.className="sp-btn-ghost",c(u,this.t("panel.cancel"));let m=document.createElement("button");m.type="button",m.className="sp-btn-danger",c(m,this.t("panel.confirmDelete"));let k=false,f=T=>{k||(k=true,n.removeEventListener("keydown",y),n.style.opacity="0",d.style.transform="translateY(8px) scale(0.97)",setTimeout(()=>{n.remove(),s(T);},200));},y=T=>{let g=T;if(g.key==="Escape"){f(false);return}g.key==="Tab"&&(g.preventDefault(),n.getRootNode().activeElement===u?m.focus():u.focus());};n.addEventListener("keydown",y),u.addEventListener("click",()=>f(false)),m.addEventListener("click",()=>f(true)),n.addEventListener("click",T=>{T.target===n&&f(false);}),h.appendChild(u),h.appendChild(m),d.appendChild(c$1),d.appendChild(v),d.appendChild(h),n.appendChild(d),this.root.getRootNode()instanceof ShadowRoot?this.root.getRootNode().appendChild(n):this.root.appendChild(n),requestAnimationFrame(()=>{n.style.opacity="1",d.style.transform="translateY(0) scale(1)",u.focus();});})}async deleteFeedback(e,t){this.pendingMutations.add(e.id);let s=d(t);try{await this.client.deleteFeedback(e.id),this.bus.emit("feedback:deleted",e.id),await this.loadFeedbacks();}catch(n){s(),this.bus.emit("feedback:error",n instanceof Error?n:new Error(String(n)));}finally{this.pendingMutations.delete(e.id);}}async toggleResolve(e,t){this.pendingMutations.add(e.id);let s=d(t);try{let n=e.status!=="resolved";await this.client.resolveFeedback(e.id,n),await this.loadFeedbacks();}catch(n){s(),this.bus.emit("feedback:error",n instanceof Error?n:new Error(String(n)));}finally{this.pendingMutations.delete(e.id);}}buildTypeDropdown(){return this.typeOptions=[{value:"all",label:this.t("panel.filterAll"),icon:p,color:this.colors.accent,bg:this.colors.accentLight},{value:"question",label:this.t("type.question"),icon:l,color:this.colors.typeQuestion,bg:this.colors.typeQuestionBg},{value:"change",label:this.t("type.change"),icon:m,color:this.colors.typeChange,bg:this.colors.typeChangeBg},{value:"bug",label:this.t("type.bug"),icon:n,color:this.colors.typeBug,bg:this.colors.typeBugBg},{value:"other",label:this.t("type.other"),icon:o,color:this.colors.typeOther,bg:this.colors.typeOtherBg}],this.typeDropdownContainer=b("div",{class:"sp-filter-dropdown"}),this.typeDropdownBtn=document.createElement("button"),this.typeDropdownBtn.type="button",this.typeDropdownBtn.className="sp-filter-dropdown-btn",this.typeDropdownBtn.setAttribute("aria-haspopup","listbox"),this.typeDropdownBtn.setAttribute("aria-expanded","false"),this.renderTypeDropdownTrigger(),this.typeDropdownBtn.addEventListener("click",e=>{e.stopPropagation(),this.typeDropdownMenu?this.closeTypeDropdown():this.openTypeDropdown();}),this.typeDropdownContainer.appendChild(this.typeDropdownBtn),this.typeDropdownContainer}renderTypeDropdownTrigger(){let e=this.typeOptions.find(d=>this.activeFilters.has(d.value))??this.typeOptions[0];if(!e)return;this.typeDropdownBtn.replaceChildren(),this.typeDropdownBtn.style.setProperty("--sp-chip-color",e.color),this.typeDropdownBtn.style.setProperty("--sp-chip-bg",e.bg),this.typeDropdownBtn.dataset.filter=e.value,this.typeDropdownBtn.classList.toggle("sp-filter-dropdown-btn--filtered",e.value!=="all"),this.typeDropdownBtn.setAttribute("aria-label",`${this.t("type.label")}: ${e.label}`);let t=b("span",{class:"sp-filter-dropdown-btn__icon"});t.appendChild(a(e.icon)),this.typeDropdownBtn.appendChild(t);let s=b("span",{class:"sp-filter-dropdown-btn__label"}),n=b("span",{class:"sp-filter-dropdown-btn__prefix"});c(n,this.t("type.label"));let o=b("span",{class:"sp-filter-dropdown-btn__value"});c(o,e.label),s.appendChild(n),s.appendChild(o),this.typeDropdownBtn.appendChild(s);let a$1=b("span",{class:"sp-filter-dropdown-btn__chevron"});a$1.appendChild(a(r)),this.typeDropdownBtn.appendChild(a$1);}openTypeDropdown(){this.typeDropdownMenu=b("div",{class:"sp-filter-dropdown-menu"}),this.typeDropdownMenu.setAttribute("role","listbox"),this.typeDropdownMenu.setAttribute("aria-label",this.t("type.label")),this.typeDropdownBtn.setAttribute("aria-expanded","true");for(let e of this.typeOptions){let t=document.createElement("button");t.type="button";let s=this.activeFilters.has(e.value);t.className=`sp-filter-dropdown-option${s?" sp-filter-dropdown-option--active":""}`,t.style.setProperty("--sp-chip-color",e.color),t.style.setProperty("--sp-chip-bg",e.bg),t.dataset.filter=e.value,t.setAttribute("role","option"),t.setAttribute("aria-selected",String(s));let n=b("span",{class:"sp-filter-dropdown-option__icon"});n.appendChild(a(e.icon)),t.appendChild(n);let o=b("span",{class:"sp-filter-dropdown-option__label"});if(c(o,e.label),t.appendChild(o),s){let a$1=b("span",{class:"sp-filter-dropdown-option__check"});a$1.appendChild(a(k)),t.appendChild(a$1);}t.addEventListener("click",a=>{a.stopPropagation(),this.selectTypeFilter(e.value);}),this.typeDropdownMenu.appendChild(t);}this.typeDropdownContainer.appendChild(this.typeDropdownMenu),requestAnimationFrame(()=>{this.typeDropdownOutsideHandler=e=>{this.typeDropdownMenu&&!this.typeDropdownContainer.contains(e.target)&&this.closeTypeDropdown();},document.addEventListener("click",this.typeDropdownOutsideHandler,true);}),this.typeDropdownMenu.addEventListener("keydown",e=>{e.key==="Escape"&&(this.closeTypeDropdown(),this.typeDropdownBtn.focus());});}closeTypeDropdown(){this.typeDropdownMenu&&(this.typeDropdownMenu.remove(),this.typeDropdownMenu=null),this.typeDropdownBtn.setAttribute("aria-expanded","false"),this.typeDropdownOutsideHandler&&(document.removeEventListener("click",this.typeDropdownOutsideHandler,true),this.typeDropdownOutsideHandler=null);}selectTypeFilter(e){this.activeFilters.clear(),this.activeFilters.add(e),this.renderTypeDropdownTrigger(),this.closeTypeDropdown(),this.loadFeedbacks().catch(()=>{});}buildStatusSegmented(){return this.statusSegmented=new M({options:[{value:"all",label:this.t("panel.statusAll"),icon:p,color:this.colors.accent,bg:this.colors.accentLight},{value:"open",label:this.t("panel.statusOpen"),icon:q,color:this.colors.statusOpen,bg:this.colors.statusOpenBg},{value:"resolved",label:this.t("panel.statusResolved"),icon:k,color:this.colors.statusResolved,bg:this.colors.statusResolvedBg}],value:"all",onChange:()=>{this.loadFeedbacks().catch(()=>{});},ariaLabel:this.t("status.label"),datasetKey:"statusFilter",modifierPrefix:"sp-segmented__btn--"}),this.statusSegmented.element}buildScopeSegmented(){return this.scopeSegmented=new M({options:[{value:"this",label:this.t("scope.thisPage")},{value:"template",label:this.t("scope.thisType")},{value:"all",label:this.t("scope.all")}],value:this.initialScopeFilter,onChange:()=>{this.loadFeedbacks().catch(()=>{});},ariaLabel:this.t("scope.label"),datasetKey:"scopeFilter",modifierPrefix:"sp-segmented__btn--scope-",extraClass:"sp-segmented--scope"}),this.syncScopeAvailability(),this.scopeSegmented.element}syncScopeAvailability(){if(!this.scopeSegmented)return;let t=!!this.getScope().urlPattern;this.scopeSegmented.setOptionVisible("template",t),!t&&this.scopeSegmented.value==="template"&&this.scopeSegmented.select("this");}getFocusedFeedback(){let e=W(this.listContainer);if(e<0)return;let t=this.listContainer.querySelectorAll(".sp-card")[e];if(t)return this.feedbacks.find(s=>s.id===t.dataset.feedbackId)}scrollToFeedback(e){let t=CSS.escape(e),s=this.listContainer.querySelector(`[data-feedback-id="${t}"]`);s&&(s.scrollIntoView({behavior:"smooth",block:"center"}),s.classList.add("sp-anim-flash"),s.addEventListener("animationend",()=>{s.classList.remove("sp-anim-flash");},{once:true}));}async refresh(){this.isOpen&&await this.loadFeedbacks();}get isCurrentlyOpen(){return this.isOpen}destroy(){this.loadController?.abort(),this.searchTimeout&&clearTimeout(this.searchTimeout),this.listContainer.removeEventListener("click",this.onListClick),this.listContainer.removeEventListener("keydown",this.onListKeydown),this.listContainer.removeEventListener("mouseover",this.onListMouseover),this.listContainer.removeEventListener("mouseout",this.onListMouseout),document.removeEventListener("sp-marker-click",this.onMarkerClick),this.closeTypeDropdown(),this.sortControls.destroy(),this.bulk.destroy(),this.exportBtn.destroy(),this.shortcuts.destroy(),this.detail.destroy(),this.root.remove();}};export{oe as Panel};//# sourceMappingURL=panel-66LNZR5L.js.map
|
|
2
|
-
//# sourceMappingURL=panel-
|
|
1
|
+
import {b,c,a,i,t,K,V,j,S,M as M$1,O,Z,W,X,d,P,Q,R,x,I,y,e,s,k,p,l,m,n,o,r,q}from'./chunk-GRXZBZ42.js';var M=class{element;current;opts;onChange;datasetKey;constructor(e){this.opts=e.options,this.current=e.value,this.onChange=e.onChange,this.datasetKey=e.datasetKey,this.element=b("div",{class:`sp-segmented${e.extraClass?` ${e.extraClass}`:""}`,role:"radiogroup"}),this.element.setAttribute("aria-label",e.ariaLabel);for(let t of this.opts){let s=document.createElement("button");s.type="button",s.className=e.modifierPrefix!==void 0?`sp-segmented__btn ${e.modifierPrefix}${t.value}`:"sp-segmented__btn",s.dataset[this.datasetKey]=t.value,s.setAttribute("role","radio");let n=this.current===t.value;if(s.setAttribute("aria-checked",String(n)),s.tabIndex=n?0:-1,n&&s.classList.add("sp-segmented__btn--active"),t.color&&s.style.setProperty("--sp-chip-color",t.color),t.bg&&s.style.setProperty("--sp-chip-bg",t.bg),t.icon){let a$1=b("span",{class:"sp-segmented__icon"});a$1.appendChild(a(t.icon)),s.appendChild(a$1);}let o=b("span",{class:"sp-segmented__label"});c(o,t.label),s.appendChild(o),s.addEventListener("click",()=>this.select(t.value)),s.addEventListener("keydown",a=>this.handleKey(a,t.value)),this.element.appendChild(s);}}select(e){this.current=e,this.syncSelection(),this.onChange(e);}syncSelection(){let e=this.element.querySelectorAll(".sp-segmented__btn");for(let t of e){let s=t.dataset[this.datasetKey]===this.current;t.classList.toggle("sp-segmented__btn--active",s),t.setAttribute("aria-checked",String(s)),t.tabIndex=s?0:-1;}}setOptionVisible(e,t){let s=this.element.querySelector(`[data-${this.kebabKey()}="${e}"]`);return s?(s.style.display=t?"":"none",true):false}get value(){return this.current}focusOption(e){this.element.querySelector(`[data-${this.kebabKey()}="${e}"]`)?.focus();}handleKey(e,t){let s=this.opts.map(d=>d.value).filter(d=>{let c=this.element.querySelector(`[data-${this.kebabKey()}="${d}"]`);return c!==null&&c.style.display!=="none"}),n=s.indexOf(t);if(n<0)return;let o;switch(e.key){case "ArrowLeft":o=(n-1+s.length)%s.length;break;case "ArrowRight":o=(n+1)%s.length;break;case "Home":o=0;break;case "End":o=s.length-1;break;default:return}e.preventDefault();let a=s[o];a!==void 0&&(this.select(a),this.focusOption(a));}kebabKey(){return this.datasetKey.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}};var oe=class{constructor(e,t$1,s,n,o,a$1,d,c$1,v){this.colors=t$1;this.bus=s;this.client=n;this.projectName=o;this.markers=a$1;this.t=d;this.locale=c$1;this.shadowRoot=e,this.getScope=v?.getScope??(()=>({url:window.location.pathname,urlPattern:null})),this.scopeAnnotationsByUrl=v?.scopeAnnotationsByUrl??true,this.root=b("div",{class:"sp-panel"}),this.root.setAttribute("role","complementary"),this.root.setAttribute("aria-label",this.t("panel.ariaLabel")),this.root.setAttribute("aria-hidden","true");let h=b("div",{class:"sp-panel-header"}),u=b("span",{class:"sp-panel-title"});c(u,this.t("panel.title")),this.closeBtn=document.createElement("button"),this.closeBtn.className="sp-panel-close",this.closeBtn.setAttribute("aria-label",this.t("panel.close")),this.closeBtn.appendChild(a(i)),this.closeBtn.addEventListener("click",()=>this.close()),this.deleteAllBtn=document.createElement("button"),this.deleteAllBtn.className="sp-btn-delete-all",this.deleteAllBtn.setAttribute("aria-label",this.t("panel.deleteAll")),this.deleteAllBtn.appendChild(a(t));let m=document.createElement("span");c(m,` ${this.t("panel.deleteAll")}`),this.deleteAllBtn.appendChild(m),this.deleteAllBtn.addEventListener("click",()=>this.confirmDeleteAll()),this.exportBtn=new K(t$1,()=>this.feedbacks,this.t);let k=b("div",{class:"sp-panel-header-right"});k.appendChild(this.exportBtn.element),k.appendChild(this.deleteAllBtn),k.appendChild(this.closeBtn),h.appendChild(u),h.appendChild(k),this.stats=new V(t$1,this.t);let f=b("div",{class:"sp-filters"}),y=b("div",{class:"sp-search-wrap"}),T=a(j);T.setAttribute("class","sp-search-icon"),this.searchInput=document.createElement("input"),this.searchInput.type="text",this.searchInput.className="sp-search",this.searchInput.placeholder=this.t("panel.search"),this.searchInput.setAttribute("aria-label",this.t("panel.searchAria")),this.searchInput.addEventListener("input",()=>{this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>this.loadFeedbacks().catch(()=>{}),200);}),y.appendChild(T),y.appendChild(this.searchInput);let g=b("div",{class:"sp-filter-bar"});g.appendChild(this.buildTypeDropdown()),g.appendChild(this.buildStatusSegmented()),g.appendChild(this.buildScopeSegmented()),this.sortControls=new S(t$1,()=>this.renderList(),this.t),f.appendChild(y),f.appendChild(g),f.appendChild(this.sortControls.element),this.listContainer=b("div",{class:"sp-list"}),this.listContainer.setAttribute("role","list"),this.listContainer.setAttribute("aria-label",this.t("panel.feedbackList")),this.bulk=new M$1(t$1,{onResolve:i=>this.bulkResolve(i),onDelete:i=>this.bulkDelete(i)},this.t),this.bulk.setListContainer(this.listContainer),this.detail=new O(t$1,{onBack:()=>this.detail.hide(),onResolve:async i=>{try{let l=i.status!=="resolved";await this.client.resolveFeedback(i.id,l),await this.loadFeedbacks(),this.detail.hide();}catch(l){throw this.bus.emit("feedback:error",l instanceof Error?l:new Error(String(l))),l}},onDelete:async i=>{try{await this.client.deleteFeedback(i.id),this.bus.emit("feedback:deleted",i.id),await this.loadFeedbacks(),this.detail.hide();}catch(l){throw this.bus.emit("feedback:error",l instanceof Error?l:new Error(String(l))),l}},onGoToAnnotation:i=>{if(i.annotations.length>0){let l=i.annotations[0];if(!l)return;window.scrollTo({left:l.scrollX,top:l.scrollY,behavior:"smooth"}),this.markers.pinHighlight(i);}}},this.t,c$1),this.shortcuts=new Z(t$1,{onNavigate:i=>{let l=W(this.listContainer);X(this.listContainer,i==="down"?l+1:l-1);},onResolve:()=>{let i=this.getFocusedFeedback();if(i&&!this.pendingMutations.has(i.id)){let p=this.listContainer.querySelector(`[data-feedback-id="${CSS.escape(i.id)}"]`)?.querySelector('[data-action="resolve"]');p&&this.toggleResolve(i,p).catch(()=>{});}},onDelete:()=>{let i=this.getFocusedFeedback();if(i&&!this.pendingMutations.has(i.id)){let p=this.listContainer.querySelector(`[data-feedback-id="${CSS.escape(i.id)}"]`)?.querySelector('[data-action="delete"]');p&&this.deleteFeedback(i,p).catch(()=>{});}},onFocusSearch:()=>this.searchInput.focus(),onToggleSelect:()=>{let i=this.getFocusedFeedback();i&&this.bulk.toggle(i.id);}},this.t),this.root.appendChild(h),this.root.appendChild(this.stats.element),this.root.appendChild(f),this.root.appendChild(this.listContainer),this.root.appendChild(this.bulk.barElement),this.root.appendChild(this.detail.element),this.root.appendChild(this.shortcuts.helpOverlay),this.root.appendChild(this.shortcuts.hintButton),e.appendChild(this.root),this.onListClick=i=>{let l=i.target;if(l.closest(".sp-bulk-checkbox"))return;let p=l.closest("[data-action]");if(p){i.stopPropagation();let A=p.closest(".sp-card");if(!A)return;let L=A.dataset.feedbackId,C=this.feedbacks.find(E=>E.id===L);if(!C)return;let B=p.dataset.action;if(B==="expand"){let E=A.querySelector(".sp-card-message");if(!E)return;let I=E.classList.toggle("sp-card-message--expanded");c(p,I?this.t("panel.showLess"):this.t("panel.showMore")),p.setAttribute("aria-expanded",String(I));}else if(B==="resolve"){if(this.pendingMutations.has(C.id))return;let E=p;this.toggleResolve(C,E).catch(()=>{});}else if(B==="delete"){if(this.pendingMutations.has(C.id))return;let E=p;this.deleteFeedback(C,E).catch(()=>{});}return}let w=l.closest(".sp-card");if(w){let A=w.dataset.feedbackId,L=this.feedbacks.find(C=>C.id===A);if(L){let C=this.feedbacks.indexOf(L)+1;this.detail.show(L,C);}}},this.listContainer.addEventListener("click",this.onListClick),this.onListKeydown=i=>{let l=i;if(l.key!=="Enter"&&l.key!==" ")return;let p=l.target,w=p.closest(".sp-card");if(!w||p!==w)return;l.preventDefault();let A=w.dataset.feedbackId,L=this.feedbacks.find(C=>C.id===A);if(L){let C=this.feedbacks.indexOf(L)+1;this.detail.show(L,C);}},this.listContainer.addEventListener("keydown",this.onListKeydown),this.onListMouseover=i=>{let p=i.target.closest(".sp-card");if(!p)return;let w=p.dataset.feedbackId;w&&this.markers.highlight(w);},this.listContainer.addEventListener("mouseover",this.onListMouseover),this.onListMouseout=i=>{let l=i.relatedTarget;l&&this.listContainer.contains(l)||this.markers.highlight("");},this.listContainer.addEventListener("mouseout",this.onListMouseout),this.bus.on("panel:toggle",i=>{i?this.open():this.close();}),e.addEventListener("keydown",i=>{let l=i;if(l.key==="Escape"&&this.isOpen){if(this.detail.isVisible){this.detail.hide();return}this.close();return}if(l.key==="Tab"&&this.isOpen){let p=B=>{let E=B;for(;E&&E!==this.root;){if(E.style.display==="none")return false;E=E.parentElement;}return true},w=Array.from(this.root.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(B=>p(B)&&!B.hasAttribute("disabled"));if(w.length===0)return;let A=w[0],L=w[w.length-1];if(!A||!L)return;let C=e.activeElement;l.shiftKey&&C===A?(l.preventDefault(),L.focus()):!l.shiftKey&&C===L&&(l.preventDefault(),A.focus());}}),this.onMarkerClick=(i=>{this.scrollToFeedback(i.detail.feedbackId);}),document.addEventListener("sp-marker-click",this.onMarkerClick);}colors;bus;client;projectName;markers;t;locale;root;listContainer;searchInput;closeBtn;deleteAllBtn;activeFilters=new Set(["all"]);typeDropdownBtn;typeDropdownContainer;typeDropdownMenu=null;typeDropdownOutsideHandler=null;statusSegmented;typeOptions;feedbacks=[];currentPage=1;totalFeedbacks=0;isLoadingMore=false;isOpen=false;searchTimeout=null;loadController=null;pendingMutations=new Set;stats;sortControls;bulk;exportBtn;shortcuts;detail;shadowRoot;getScope;scopeAnnotationsByUrl;scopeSegmented;initialScopeFilter="this";onMarkerClick;onListClick;onListKeydown;onListMouseover;onListMouseout;async open(){this.isOpen||(this.isOpen=true,this.root.classList.add("sp-panel--open"),this.root.setAttribute("aria-hidden","false"),this.bus.emit("open"),this.shortcuts.enable(this.shadowRoot),await this.loadFeedbacks(),requestAnimationFrame(()=>{this.searchInput?this.searchInput.focus():this.closeBtn.focus();}));}close(){if(!this.isOpen)return;this.isOpen=false,this.root.classList.remove("sp-panel--open"),this.root.setAttribute("aria-hidden","true"),this.bus.emit("close"),this.shortcuts.disable(),this.detail.hide(),this.root.getRootNode().querySelector(".sp-fab")?.focus();}showLoading(){this.listContainer.replaceChildren();let e=b("div",{class:"sp-loading"});e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.setAttribute("aria-label",this.t("panel.loading"));let t=b("div",{class:"sp-spinner"});e.appendChild(t),this.listContainer.appendChild(e);}showError(){this.listContainer.replaceChildren();let e=b("div",{class:"sp-empty"});e.setAttribute("role","status"),e.setAttribute("aria-live","polite");let t=b("div",{class:"sp-empty-text"});c(t,this.t("panel.loadError"));let s=document.createElement("button");s.className="sp-btn-ghost",s.style.marginTop="8px",c(s,this.t("panel.retry")),s.addEventListener("click",()=>this.loadFeedbacks().catch(()=>{})),e.appendChild(t),e.appendChild(s),this.listContainer.appendChild(e);}async loadFeedbacks(){this.loadController?.abort(),this.loadController=new AbortController;let{signal:e}=this.loadController;this.currentPage=1;let t=this.searchInput.value.trim()||void 0,s=this.activeFilters.has("all")?void 0:Array.from(this.activeFilters)[0],n=this.statusSegmented.value,o=n==="all"?void 0:n,a=this.getScope();this.syncScopeAvailability();let d=this.scopeSegmented.value,c={page:1,limit:20};s&&(c.type=s),o&&(c.status=o),t&&(c.search=t),d==="this"?c.url=a.url:d==="template"&&a.urlPattern&&(c.urlPattern=a.urlPattern);let v=this.feedbacks.length>0;v||this.showLoading();try{let{feedbacks:h,total:u}=await this.client.getFeedbacks(this.projectName,c);if(e.aborted)return;this.feedbacks=h,this.totalFeedbacks=u,this.stats.update(h,u),this.bulk.reset(),this.renderList();let m=this.scopeAnnotationsByUrl?h.filter(k=>k.url===a.url):h;this.markers.render(m);}catch(h){if(e.aborted)return;v||this.showError(),this.bus.emit("feedback:error",h instanceof Error?h:new Error(String(h)));}}async loadMoreFeedbacks(){if(this.isLoadingMore)return;this.isLoadingMore=true;let e=this.loadController,t=this.currentPage+1,s=this.searchInput.value.trim()||void 0,n=this.activeFilters.has("all")?void 0:Array.from(this.activeFilters)[0],o=this.statusSegmented.value,a=o==="all"?void 0:o,d$1=this.getScope(),c=this.scopeSegmented.value,v={page:t,limit:20};n&&(v.type=n),a&&(v.status=a),s&&(v.search=s),c==="this"?v.url=d$1.url:c==="template"&&d$1.urlPattern&&(v.urlPattern=d$1.urlPattern);let h=this.listContainer.querySelector(".sp-btn-load-more"),u;h&&(u=d(h));try{let{feedbacks:m,total:k}=await this.client.getFeedbacks(this.projectName,v);if(e!==this.loadController)return;this.currentPage=t,this.totalFeedbacks=k,this.feedbacks=[...this.feedbacks,...m],this.stats.update(this.feedbacks,k),this.renderList();let f=this.scopeAnnotationsByUrl?this.feedbacks.filter(y=>y.url===d$1.url):this.feedbacks;this.markers.render(f);}catch(m){u&&u(),this.bus.emit("feedback:error",m instanceof Error?m:new Error(String(m)));}finally{this.isLoadingMore=false;}}renderList(){if(this.listContainer.replaceChildren(),this.feedbacks.length===0){let o=b("div",{class:"sp-empty"});o.setAttribute("role","status"),o.setAttribute("aria-live","polite");let a=b("div",{class:"sp-empty-text"});c(a,this.t("panel.empty")),o.appendChild(a),this.listContainer.appendChild(o);return}let e=P(this.feedbacks,this.sortControls.sortMode),t=e.map(o=>o.id),s=this.bulk.createSelectAllBar(t,this.t("bulk.selectAll"));if(this.listContainer.appendChild(s),this.sortControls.groupByPage){let o=Q(e),a=0;for(let[d,c]of o){let v=R(d,c.length,this.colors);this.listContainer.appendChild(v);let h=b("div",{class:"sp-group-content"});for(let u of c){let m=this.createCard(u,a+1);m.style.setProperty("--sp-card-i",String(a)),h.appendChild(m),a++;}this.listContainer.appendChild(h);}}else e.forEach((o,a)=>{let d=this.createCard(o,a+1);d.style.setProperty("--sp-card-i",String(a)),this.listContainer.appendChild(d);});let n=this.totalFeedbacks-this.feedbacks.length;if(n>0){let o=b("div",{class:"sp-load-more-wrap"}),a=document.createElement("button");a.className="sp-btn-ghost sp-btn-load-more",c(a,this.t("panel.loadMore").replace("{remaining}",String(n))),a.addEventListener("click",()=>this.loadMoreFeedbacks().catch(()=>{})),o.appendChild(a),this.listContainer.appendChild(o);}}createCard(e$1,t$1){let s$1=e$1.status==="resolved",n=x(e$1.type,this.colors),o=b("div",{class:`sp-card ${s$1?"sp-card--resolved":""}`});o.setAttribute("role","listitem"),o.setAttribute("tabindex","0"),o.setAttribute("aria-label",`Feedback #${t$1}: ${I(e$1.type,this.t)} \u2014 ${e$1.message.slice(0,80)}`),o.dataset.feedbackId=e$1.id;let a$1=b("div",{class:"sp-card-bar"});a$1.style.background=s$1?"#9ca3af":n;let d=b("div",{class:"sp-card-body"}),c$1=b("div",{class:"sp-card-header"}),v=this.bulk.createCheckbox(e$1.id);c$1.appendChild(v);let h=b("span",{class:"sp-card-number"});c(h,`#${t$1}`);let u=b("span",{class:"sp-badge"}),m=y(e$1.type,this.colors);u.style.background=m,u.style.color=n,c(u,I(e$1.type,this.t));let k$1=b("span",{class:"sp-card-date"});c(k$1,e(e$1.createdAt,this.locale)),c$1.appendChild(h),c$1.appendChild(u),c$1.appendChild(k$1);let f=b("div",{class:"sp-card-message"});c(f,e$1.message);let y$1=document.createElement("button");y$1.className="sp-card-expand",y$1.dataset.action="expand",c(y$1,this.t("panel.showMore")),y$1.style.display="none",y$1.setAttribute("aria-expanded","false"),requestAnimationFrame(()=>{f.scrollHeight>f.clientHeight&&(y$1.style.display="block");});let T=b("div",{class:"sp-card-footer"}),g=document.createElement("button");if(g.className="sp-btn-resolve",g.dataset.action="resolve",s$1){g.appendChild(a(s));let p=document.createElement("span");c(p,` ${this.t("panel.reopen")}`),g.appendChild(p);}else {g.appendChild(a(k));let p=document.createElement("span");c(p,` ${this.t("panel.resolve")}`),g.appendChild(p);}let i=document.createElement("button");i.className="sp-btn-delete",i.dataset.action="delete",i.appendChild(a(t));let l=document.createElement("span");return c(l,` ${this.t("panel.delete")}`),i.appendChild(l),T.appendChild(g),T.appendChild(i),d.appendChild(c$1),d.appendChild(f),d.appendChild(y$1),d.appendChild(T),o.appendChild(a$1),o.appendChild(d),o}async bulkResolve(e){try{await Promise.all(e.map(t=>this.client.resolveFeedback(t,!0))),await this.loadFeedbacks();}catch(t){throw this.bus.emit("feedback:error",t instanceof Error?t:new Error(String(t))),t}}async bulkDelete(e){try{await Promise.all(e.map(t=>this.client.deleteFeedback(t)));for(let t of e)this.bus.emit("feedback:deleted",t);await this.loadFeedbacks();}catch(t){throw this.bus.emit("feedback:error",t instanceof Error?t:new Error(String(t))),t}}async confirmDeleteAll(){if(await this.showConfirmDialog(this.t("panel.deleteAllConfirmTitle"),this.t("panel.deleteAllConfirmMessage"))){this.deleteAllBtn.disabled=true;try{await this.client.deleteAllFeedbacks(this.projectName),this.bus.emit("feedback:all-deleted"),await this.loadFeedbacks();}catch(t){this.bus.emit("feedback:error",t instanceof Error?t:new Error(String(t)));}finally{this.deleteAllBtn.disabled=false;}}}showConfirmDialog(e,t){return new Promise(s=>{let n=b("div",{class:"sp-confirm-backdrop"}),o=`sp-confirm-title-${Date.now()}`,a=`sp-confirm-msg-${Date.now()}`,d=b("div",{class:"sp-confirm-dialog"});d.setAttribute("role","alertdialog"),d.setAttribute("aria-modal","true"),d.setAttribute("aria-labelledby",o),d.setAttribute("aria-describedby",a);let c$1=b("div",{class:"sp-confirm-title"});c$1.id=o,c(c$1,e);let v=b("div",{class:"sp-confirm-message"});v.id=a,c(v,t);let h=b("div",{class:"sp-confirm-actions"}),u=document.createElement("button");u.type="button",u.className="sp-btn-ghost",c(u,this.t("panel.cancel"));let m=document.createElement("button");m.type="button",m.className="sp-btn-danger",c(m,this.t("panel.confirmDelete"));let k=false,f=T=>{k||(k=true,n.removeEventListener("keydown",y),n.style.opacity="0",d.style.transform="translateY(8px) scale(0.97)",setTimeout(()=>{n.remove(),s(T);},200));},y=T=>{let g=T;if(g.key==="Escape"){f(false);return}g.key==="Tab"&&(g.preventDefault(),n.getRootNode().activeElement===u?m.focus():u.focus());};n.addEventListener("keydown",y),u.addEventListener("click",()=>f(false)),m.addEventListener("click",()=>f(true)),n.addEventListener("click",T=>{T.target===n&&f(false);}),h.appendChild(u),h.appendChild(m),d.appendChild(c$1),d.appendChild(v),d.appendChild(h),n.appendChild(d),this.root.getRootNode()instanceof ShadowRoot?this.root.getRootNode().appendChild(n):this.root.appendChild(n),requestAnimationFrame(()=>{n.style.opacity="1",d.style.transform="translateY(0) scale(1)",u.focus();});})}async deleteFeedback(e,t){this.pendingMutations.add(e.id);let s=d(t);try{await this.client.deleteFeedback(e.id),this.bus.emit("feedback:deleted",e.id),await this.loadFeedbacks();}catch(n){s(),this.bus.emit("feedback:error",n instanceof Error?n:new Error(String(n)));}finally{this.pendingMutations.delete(e.id);}}async toggleResolve(e,t){this.pendingMutations.add(e.id);let s=d(t);try{let n=e.status!=="resolved";await this.client.resolveFeedback(e.id,n),await this.loadFeedbacks();}catch(n){s(),this.bus.emit("feedback:error",n instanceof Error?n:new Error(String(n)));}finally{this.pendingMutations.delete(e.id);}}buildTypeDropdown(){return this.typeOptions=[{value:"all",label:this.t("panel.filterAll"),icon:p,color:this.colors.accent,bg:this.colors.accentLight},{value:"question",label:this.t("type.question"),icon:l,color:this.colors.typeQuestion,bg:this.colors.typeQuestionBg},{value:"change",label:this.t("type.change"),icon:m,color:this.colors.typeChange,bg:this.colors.typeChangeBg},{value:"bug",label:this.t("type.bug"),icon:n,color:this.colors.typeBug,bg:this.colors.typeBugBg},{value:"other",label:this.t("type.other"),icon:o,color:this.colors.typeOther,bg:this.colors.typeOtherBg}],this.typeDropdownContainer=b("div",{class:"sp-filter-dropdown"}),this.typeDropdownBtn=document.createElement("button"),this.typeDropdownBtn.type="button",this.typeDropdownBtn.className="sp-filter-dropdown-btn",this.typeDropdownBtn.setAttribute("aria-haspopup","listbox"),this.typeDropdownBtn.setAttribute("aria-expanded","false"),this.renderTypeDropdownTrigger(),this.typeDropdownBtn.addEventListener("click",e=>{e.stopPropagation(),this.typeDropdownMenu?this.closeTypeDropdown():this.openTypeDropdown();}),this.typeDropdownContainer.appendChild(this.typeDropdownBtn),this.typeDropdownContainer}renderTypeDropdownTrigger(){let e=this.typeOptions.find(d=>this.activeFilters.has(d.value))??this.typeOptions[0];if(!e)return;this.typeDropdownBtn.replaceChildren(),this.typeDropdownBtn.style.setProperty("--sp-chip-color",e.color),this.typeDropdownBtn.style.setProperty("--sp-chip-bg",e.bg),this.typeDropdownBtn.dataset.filter=e.value,this.typeDropdownBtn.classList.toggle("sp-filter-dropdown-btn--filtered",e.value!=="all"),this.typeDropdownBtn.setAttribute("aria-label",`${this.t("type.label")}: ${e.label}`);let t=b("span",{class:"sp-filter-dropdown-btn__icon"});t.appendChild(a(e.icon)),this.typeDropdownBtn.appendChild(t);let s=b("span",{class:"sp-filter-dropdown-btn__label"}),n=b("span",{class:"sp-filter-dropdown-btn__prefix"});c(n,this.t("type.label"));let o=b("span",{class:"sp-filter-dropdown-btn__value"});c(o,e.label),s.appendChild(n),s.appendChild(o),this.typeDropdownBtn.appendChild(s);let a$1=b("span",{class:"sp-filter-dropdown-btn__chevron"});a$1.appendChild(a(r)),this.typeDropdownBtn.appendChild(a$1);}openTypeDropdown(){this.typeDropdownMenu=b("div",{class:"sp-filter-dropdown-menu"}),this.typeDropdownMenu.setAttribute("role","listbox"),this.typeDropdownMenu.setAttribute("aria-label",this.t("type.label")),this.typeDropdownBtn.setAttribute("aria-expanded","true");for(let e of this.typeOptions){let t=document.createElement("button");t.type="button";let s=this.activeFilters.has(e.value);t.className=`sp-filter-dropdown-option${s?" sp-filter-dropdown-option--active":""}`,t.style.setProperty("--sp-chip-color",e.color),t.style.setProperty("--sp-chip-bg",e.bg),t.dataset.filter=e.value,t.setAttribute("role","option"),t.setAttribute("aria-selected",String(s));let n=b("span",{class:"sp-filter-dropdown-option__icon"});n.appendChild(a(e.icon)),t.appendChild(n);let o=b("span",{class:"sp-filter-dropdown-option__label"});if(c(o,e.label),t.appendChild(o),s){let a$1=b("span",{class:"sp-filter-dropdown-option__check"});a$1.appendChild(a(k)),t.appendChild(a$1);}t.addEventListener("click",a=>{a.stopPropagation(),this.selectTypeFilter(e.value);}),this.typeDropdownMenu.appendChild(t);}this.typeDropdownContainer.appendChild(this.typeDropdownMenu),requestAnimationFrame(()=>{this.typeDropdownOutsideHandler=e=>{this.typeDropdownMenu&&!this.typeDropdownContainer.contains(e.target)&&this.closeTypeDropdown();},document.addEventListener("click",this.typeDropdownOutsideHandler,true);}),this.typeDropdownMenu.addEventListener("keydown",e=>{e.key==="Escape"&&(this.closeTypeDropdown(),this.typeDropdownBtn.focus());});}closeTypeDropdown(){this.typeDropdownMenu&&(this.typeDropdownMenu.remove(),this.typeDropdownMenu=null),this.typeDropdownBtn.setAttribute("aria-expanded","false"),this.typeDropdownOutsideHandler&&(document.removeEventListener("click",this.typeDropdownOutsideHandler,true),this.typeDropdownOutsideHandler=null);}selectTypeFilter(e){this.activeFilters.clear(),this.activeFilters.add(e),this.renderTypeDropdownTrigger(),this.closeTypeDropdown(),this.loadFeedbacks().catch(()=>{});}buildStatusSegmented(){return this.statusSegmented=new M({options:[{value:"all",label:this.t("panel.statusAll"),icon:p,color:this.colors.accent,bg:this.colors.accentLight},{value:"open",label:this.t("panel.statusOpen"),icon:q,color:this.colors.statusOpen,bg:this.colors.statusOpenBg},{value:"resolved",label:this.t("panel.statusResolved"),icon:k,color:this.colors.statusResolved,bg:this.colors.statusResolvedBg}],value:"all",onChange:()=>{this.loadFeedbacks().catch(()=>{});},ariaLabel:this.t("status.label"),datasetKey:"statusFilter",modifierPrefix:"sp-segmented__btn--"}),this.statusSegmented.element}buildScopeSegmented(){return this.scopeSegmented=new M({options:[{value:"this",label:this.t("scope.thisPage")},{value:"template",label:this.t("scope.thisType")},{value:"all",label:this.t("scope.all")}],value:this.initialScopeFilter,onChange:()=>{this.loadFeedbacks().catch(()=>{});},ariaLabel:this.t("scope.label"),datasetKey:"scopeFilter",modifierPrefix:"sp-segmented__btn--scope-",extraClass:"sp-segmented--scope"}),this.syncScopeAvailability(),this.scopeSegmented.element}syncScopeAvailability(){if(!this.scopeSegmented)return;let t=!!this.getScope().urlPattern;this.scopeSegmented.setOptionVisible("template",t),!t&&this.scopeSegmented.value==="template"&&this.scopeSegmented.select("this");}getFocusedFeedback(){let e=W(this.listContainer);if(e<0)return;let t=this.listContainer.querySelectorAll(".sp-card")[e];if(t)return this.feedbacks.find(s=>s.id===t.dataset.feedbackId)}scrollToFeedback(e){let t=CSS.escape(e),s=this.listContainer.querySelector(`[data-feedback-id="${t}"]`);s&&(s.scrollIntoView({behavior:"smooth",block:"center"}),s.classList.add("sp-anim-flash"),s.addEventListener("animationend",()=>{s.classList.remove("sp-anim-flash");},{once:true}));}async refresh(){this.isOpen&&await this.loadFeedbacks();}get isCurrentlyOpen(){return this.isOpen}destroy(){this.loadController?.abort(),this.searchTimeout&&clearTimeout(this.searchTimeout),this.listContainer.removeEventListener("click",this.onListClick),this.listContainer.removeEventListener("keydown",this.onListKeydown),this.listContainer.removeEventListener("mouseover",this.onListMouseover),this.listContainer.removeEventListener("mouseout",this.onListMouseout),document.removeEventListener("sp-marker-click",this.onMarkerClick),this.closeTypeDropdown(),this.sortControls.destroy(),this.bulk.destroy(),this.exportBtn.destroy(),this.shortcuts.destroy(),this.detail.destroy(),this.root.remove();}};export{oe as Panel};//# sourceMappingURL=panel-4KOYCMDH.js.map
|
|
2
|
+
//# sourceMappingURL=panel-4KOYCMDH.js.map
|