dev-process-kit 0.0.11 → 0.0.13

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.
Files changed (39) hide show
  1. package/dist/THIRD_PARTY_LICENSES.md +46 -0
  2. package/dist/chunks/{shared-CrE-y5oF.js → shared-0MFKKPnB.js} +165 -96
  3. package/dist/chunks/shared-B2YRwZ0P.js +2062 -0
  4. package/dist/chunks/{shared-OGH3pSVq.js → shared-B4Mwapvi.js} +89 -63
  5. package/dist/chunks/shared-BDUe3aT-.js +1 -0
  6. package/dist/chunks/{shared-DGI_sFo5.js → shared-C1KQ5iU8.js} +55 -32
  7. package/dist/chunks/{shared-BgCDocVX.js → shared-CQG0dnvb.js} +17 -7
  8. package/dist/chunks/shared-CSC14I4g.js +2370 -0
  9. package/dist/chunks/shared-Cd8A5TjZ.js +2428 -0
  10. package/dist/chunks/shared-CirHYajF.js +30 -0
  11. package/dist/chunks/shared-D4K7KsfJ.js +1 -0
  12. package/dist/chunks/{shared-TW6kWbUL.js → shared-D7poXZ0z.js} +17 -9
  13. package/dist/chunks/shared-DO0pUSjw.js +571 -0
  14. package/dist/chunks/shared-DdefS1nG.js +1 -0
  15. package/dist/chunks/{shared-BSFZSMH5.js → shared-DjmQsa0n.js} +1 -1
  16. package/dist/chunks/{shared-DZfXwU7f.js → shared-DklLt1Sc.js} +1 -1
  17. package/dist/chunks/{shared-CHaHI5X3.js → shared-DrMSORn-.js} +34 -11
  18. package/dist/chunks/shared-DxAiavwJ.js +1102 -0
  19. package/dist/chunks/shared-aDPp8Vry.js +1 -0
  20. package/dist/components.js +1 -1
  21. package/dist/index.js +1 -1
  22. package/dist/templates/delegation-poker.js +1 -1
  23. package/dist/templates/event-storming.js +1 -1
  24. package/dist/templates/example-mapping.js +1 -1
  25. package/dist/templates/grill.js +1 -1
  26. package/dist/templates/plain.js +1 -1
  27. package/dist/templates/prototype.js +1 -1
  28. package/dist/templates/slides.js +1 -1
  29. package/dist/templates/task-board.js +1 -1
  30. package/dist/templates/usm.js +1 -1
  31. package/dist/templates/whiteboard.js +1 -1
  32. package/package.json +1 -1
  33. package/dist/chunks/shared-B4ewpBuM.js +0 -30
  34. package/dist/chunks/shared-B9OVJ7XA.js +0 -556
  35. package/dist/chunks/shared-BHRhwgui.js +0 -1252
  36. package/dist/chunks/shared-B_MMP97h.js +0 -2402
  37. package/dist/chunks/shared-CxFItadP.js +0 -1094
  38. package/dist/chunks/shared-DIJgMVpY.js +0 -2239
  39. package/dist/chunks/shared-xrCdgpNS.js +0 -1
@@ -1,1252 +0,0 @@
1
- import{p as h,aq as y,v as G,av as O,af as p,aw as R,ah as u,ai as g,ay as N,ab as Ke,aJ as Je,ac as Y,ad as z,ae as U,P as We,e as Xe,a0 as Ze,V as _,R as b,a2 as te,a7 as Qe,j as et,a1 as ie,a8 as tt,a3 as w,a4 as d,aB as B,A as ae,I as it,K as at,h as st,l as P,a5 as S,J as nt,B as ot,aF as rt,T as se}from"./shared-B_MMP97h.js";import{s as dt,r as H,D as lt}from"./shared-xrCdgpNS.js";import{P as ne,r as pt,p as ct,c as mt,a as ut}from"./shared-B4ewpBuM.js";const f={SET_ACTIVITY_NAME:h("SET_ACTIVITY_NAME","activity",y({name:u(p(),g(1))})),SET_STEP_NAME:h("SET_STEP_NAME","step",y({name:u(p(),g(1))})),REORDER_STEP:h("REORDER_STEP","step",y({after:O(p())}),{mode:"sequence"}),ADD_ACTIVITY:h("ADD_ACTIVITY","page",y({id:R,name:u(p(),g(1))}),{dedupeKey:G}),ADD_STEP:h("ADD_STEP","activity",y({id:R,name:u(p(),g(1))}),{dedupeKey:G}),DELETE_ACTIVITY:h("DELETE_ACTIVITY","activity",y({})),DELETE_STEP:h("DELETE_STEP","step",y({})),SET_STORY_NAME:h("SET_STORY_NAME","story",y({name:u(p(),g(1))})),SET_STORY_DESCRIPTION:h("SET_STORY_DESCRIPTION","story",y({description:p()})),SET_STORY_MILESTONE:h("SET_STORY_MILESTONE","story",y({milestoneId:O(p())})),MOVE_STORY:h("MOVE_STORY","story",y({activityId:u(p(),g(1)),stepId:u(p(),g(1)),milestoneId:O(p()),after:O(p())}),{mode:"sequence"}),REORDER_STORY:h("REORDER_STORY","story",y({after:O(p())}),{mode:"sequence"}),ADD_STORY:h("ADD_STORY","step",y({id:R,name:u(p(),g(1)),activityId:u(p(),g(1)),milestoneId:N(p())}),{dedupeKey:G}),DELETE_STORY:h("DELETE_STORY","story",y({})),SET_MILESTONE_NAME:h("SET_MILESTONE_NAME","milestone",y({name:u(p(),g(1))})),ADD_MILESTONE:h("ADD_MILESTONE","page",y({id:R,name:u(p(),g(1))}),{dedupeKey:G}),DELETE_MILESTONE:h("DELETE_MILESTONE","milestone",y({})),REORDER_MILESTONE:h("REORDER_MILESTONE","milestone",y({after:O(p())}),{mode:"sequence"})},gt={setActivityName:(e,t)=>({type:"SET_ACTIVITY_NAME",target:{type:"activity",id:e},payload:{name:t}}),setStepName:(e,t)=>({type:"SET_STEP_NAME",target:{type:"step",id:e},payload:{name:t}})},vt=Y({id:u(p(),g(1)),name:u(p(),g(1))}),ht=Y({id:R,name:u(p(),g(1)),steps:z(U(vt),[])}),yt=Y({id:u(p(),g(1)),name:u(p(),g(1)),timeframe:N(p()),description:N(p())}),ft=Y({id:R,name:u(p(),g(1)),description:N(p()),activityId:u(p(),g(1)),stepId:u(p(),g(1)),milestoneId:N(p())}),bt=Y({title:N(p()),activities:z(U(ht),[]),milestones:z(U(yt),[]),stories:z(U(ft),[])}),oe=e=>{const t=Ke(bt,e),i=new Map;for(const o of t.activities)for(const r of o.steps)i.set(r.id,o.id);const a=new Set(t.milestones.map(o=>o.id)),s=new Set,n=(o,r)=>{if(s.has(r))throw new Error(`duplicate id "${r}" in ${o}`);s.add(r)};for(const o of t.activities){n("activities",o.id);for(const r of o.steps)n("steps",r.id)}for(const o of t.milestones)n("milestones",o.id);for(const o of t.stories){n("stories",o.id);const r=i.get(o.stepId);if(r===void 0||r!==o.activityId)throw new Error(`story "${o.id}" references unknown activityId/stepId`);if(o.milestoneId!==void 0&&!a.has(o.milestoneId))throw new Error(`story "${o.id}" references unknown milestoneId "${o.milestoneId}"`)}return t},re=()=>({activities:[],milestones:[],stories:[]}),M=(e,t)=>{if(t!==void 0)return e.activities.find(i=>i.id===t)},K=(e,t)=>`${e}.${t}`,k=(e,t)=>{if(t===void 0)return;const i=Je(t,2);if(i){const[a,s]=i;if(a===void 0||s===void 0)return;const n=e.activities.find(r=>r.id===a),o=n?.steps.find(r=>r.id===s);return n&&o?{activity:n,step:o}:void 0}if(!t.includes("."))for(const a of e.activities){const s=a.steps.find(n=>n.id===t);if(s)return{activity:a,step:s}}},T=(e,t)=>{if(t!==void 0)return e.milestones.find(i=>i.id===t)},x=(e,t)=>{if(t!==void 0)return e.stories.find(i=>i.id===t)},J=e=>e.activities.flatMap(t=>t.steps.map(i=>({activity:t,step:i}))),kt=e=>({...e,stories:dt(e.stories,[t=>`${t.activityId}/${t.stepId}/${t.milestoneId??""}`])}),q=(e,t,i)=>e.stories.filter(a=>a.stepId===t&&(a.milestoneId??void 0)===i),de=(e,t,i)=>e.stories.filter(a=>a.activityId===t&&(a.milestoneId??void 0)===i),L=e=>[...e.activities.map(t=>t.id),...e.activities.flatMap(t=>t.steps.map(i=>i.id)),...e.milestones.map(t=>t.id),...e.stories.map(t=>t.id)],le=(e,t)=>e.stories.filter(i=>i.stepId===t).length,pe=(e,t)=>{const i=We(f,t);if(i===null)return null;const a=i.target.id;switch(i.type){case"SET_ACTIVITY_NAME":{const{name:s}=i.payload;return e.activities.some(n=>n.id===a)?{...e,activities:e.activities.map(n=>n.id===a?{...n,name:s}:n)}:null}case"SET_STEP_NAME":{const{name:s}=i.payload,n=k(e,a);return n?{...e,activities:e.activities.map(o=>o.id===n.activity.id?{...o,steps:o.steps.map(r=>r.id===n.step.id?{...r,name:s}:r)}:o)}:null}case"REORDER_STEP":{const{after:s}=i.payload,n=k(e,a);if(!n)return null;const o=s===null?null:k(e,s);if(s!==null&&(!o||o.activity.id!==n.activity.id))return null;const r=me(n.activity.steps,n.step.id,o?.step.id??null);return r===null?null:{...e,activities:e.activities.map(l=>l.id===n.activity.id?{...l,steps:r}:l)}}case"ADD_ACTIVITY":{const s=i.payload;return e.activities.some(n=>n.id===s.id)?e:{...e,activities:[...e.activities,{id:s.id,name:s.name,steps:[]}]}}case"ADD_STEP":{const s=i.payload,n=e.activities.find(o=>o.id===a);return n?n.steps.some(o=>o.id===s.id)?e:{...e,activities:e.activities.map(o=>o.id===a?{...o,steps:[...o.steps,{id:s.id,name:s.name}]}:o)}:null}case"DELETE_ACTIVITY":{const s=e.activities.find(o=>o.id===a);if(!s)return null;const n=new Set(s.steps.map(o=>o.id));return{...e,activities:e.activities.filter(o=>o.id!==a),stories:e.stories.filter(o=>o.activityId!==a&&!n.has(o.stepId))}}case"DELETE_STEP":{const s=k(e,a);return s?{...e,activities:e.activities.map(n=>n.id===s.activity.id?{...n,steps:n.steps.filter(o=>o.id!==s.step.id)}:n),stories:e.stories.filter(n=>n.activityId!==s.activity.id||n.stepId!==s.step.id)}:null}case"SET_STORY_NAME":{const{name:s}=i.payload;return W(e,a,n=>({...n,name:s}))}case"SET_STORY_DESCRIPTION":{const{description:s}=i.payload;return W(e,a,n=>({...n,description:s}))}case"SET_STORY_MILESTONE":{const{milestoneId:s}=i.payload;return s!==null&&!T(e,s)?null:W(e,a,n=>s===null?X(n):{...n,milestoneId:s})}case"MOVE_STORY":{const s=i.payload,n=x(e,a);if(!n)return null;const o=k(e,s.stepId);if(!o||o.activity.id!==s.activityId||s.milestoneId!==null&&!T(e,s.milestoneId))return null;const r=s.milestoneId??void 0,l=r===void 0?{...X(n),activityId:o.activity.id,stepId:o.step.id}:{...n,activityId:o.activity.id,stepId:o.step.id,milestoneId:r};return ce(e,l,s.after)}case"REORDER_STORY":{const{after:s}=i.payload,n=x(e,a);return n?ce(e,n,s,!0):null}case"ADD_STORY":{const s=i.payload,n=k(e,t.target.id);if(!n||n.activity.id!==s.activityId||s.milestoneId!==void 0&&!T(e,s.milestoneId))return null;if(e.stories.some(r=>r.id===s.id))return e;const o={id:s.id,name:s.name,activityId:s.activityId,stepId:n.step.id,...s.milestoneId===void 0?{}:{milestoneId:s.milestoneId}};return{...e,stories:[...e.stories,o]}}case"DELETE_STORY":return e.stories.some(s=>s.id===a)?{...e,stories:e.stories.filter(s=>s.id!==a)}:null;case"SET_MILESTONE_NAME":{const{name:s}=i.payload;return e.milestones.some(n=>n.id===a)?{...e,milestones:e.milestones.map(n=>n.id===a?{...n,name:s}:n)}:null}case"ADD_MILESTONE":{const s=i.payload;return e.milestones.some(n=>n.id===s.id)?e:{...e,milestones:[...e.milestones,{id:s.id,name:s.name}]}}case"DELETE_MILESTONE":return e.milestones.some(s=>s.id===a)?{...e,milestones:e.milestones.filter(s=>s.id!==a),stories:e.stories.map(s=>s.milestoneId===a?X(s):s)}:null;case"REORDER_MILESTONE":{const{after:s}=i.payload,n=me(e.milestones,a,s);return n===null?null:{...e,milestones:n}}default:return Xe(i)}},W=(e,t,i)=>e.stories.some(a=>a.id===t)?{...e,stories:e.stories.map(a=>a.id===t?i(a):a)}:null,X=e=>{const{milestoneId:t,...i}=e;return i},ce=(e,t,i,a=!1)=>{const s=t.milestoneId??void 0,n=e.stories.filter(m=>m.id!==t.id),o=n.filter(m=>m.stepId===t.stepId&&(m.milestoneId??void 0)===s);if(i!==null){const m=n.find($=>$.id===i);if(!m||m.stepId!==t.stepId||(m.milestoneId??void 0)!==s)return null;if(a){const $=x(e,t.id);if(!$||m.stepId!==$.stepId||(m.milestoneId??void 0)!==($.milestoneId??void 0))return null}}const r=i===null?[t,...o]:ue(o,t,i),l=n.findIndex(m=>m.stepId===t.stepId&&(m.milestoneId??void 0)===s),c=new Set(o.map(m=>m.id)),v=n.filter(m=>!c.has(m.id)),A=l<0?v.length:Math.min(l,v.length),I=[...v.slice(0,A),...r,...v.slice(A)];return{...e,stories:I}},me=(e,t,i)=>{if(!e.some(n=>n.id===t)||i!==null&&!e.some(n=>n.id===i))return null;if(i===t)return[...e];const a=e.find(n=>n.id===t);if(a===void 0)return null;const s=e.filter(n=>n.id!==t);return ue(s,a,i)},ue=(e,t,i)=>{const a=[...e],s=i===null?-1:a.findIndex(n=>n.id===i);return a.splice(s+1,0,t),a},j=Ze({en:{renameActivity:"Rename activity",renameStep:"Rename step",reorderStep:"Reorder step",addActivity:"Add activity",addStep:"Add step",deleteActivity:"Delete activity",deleteStep:"Delete step",renameStory:"Rename story",updateStoryDescription:"Update story description",changeMilestone:"Change milestone",moveStory:"Move story",reorderStory:"Reorder story",addStory:"Add story",deleteStory:"Delete story",renameMilestone:"Rename milestone",addMilestone:"Add milestone",deleteMilestone:"Delete milestone",reorderMilestone:"Reorder milestone",toValue:e=>`\u2192 \u201C${e}\u201D`,fromTo:(e,t)=>`\u201C${e}\u201D \u2192 \u201C${t}\u201D`,added:e=>`+ \u201C${e}\u201D`,removed:e=>`\u2212 \u201C${e}\u201D`,toFront:"\u2192 To the front",afterName:e=>`\u2192 Right after \u201C${e}\u201D`,toUnassigned:"\u2192 Unassigned",toName:e=>`\u2192 ${e}`,activityGroup:"Activity",stepGroup:"Step",storyGroup:"Story",milestoneGroup:"Milestone",mapGroup:"Map",targetLabel:(e,t)=>`${e} \xB7 ${t}`,targetMissing:(e,t)=>`${e} \xB7 ${t} (missing)`,wholeMap:"Whole map",unassigned:"Unassigned",emptyTitle:"No backbone yet",emptyBody:"Add activities and steps, and the story map appears here.",firstActivityButton:"+ First activity",groupingLabel:"Group by",groupViewTab:"Activity group",groupAxisHeader:"Activity group \u2192",activityAxis:"Activity \u2192",milestoneAxis:"Milestone \u2193",stepNameLabel:"Step name",activityNameLabel:"Activity name",milestoneNameLabel:"Milestone name",addStepAria:"Add a step to this activity",newActivityButton:"+ Activity",newMilestoneButton:"+ Milestone",addCellButton:"+ Add",addStoryCellAria:"Add a story to this cell",storyCount:e=>e===1?"1 story":`${e} stories`,pageTabsLabel:"Page",mapTab:"User Story Mapping",milestonesTab:"Milestones",milestonesLead:"What each release slice is for, and when it is due. The stories live on the map.",shareOfStories:e=>`${e}% of all stories`,coverageLabel:"Backbone coverage",coverage:(e,t)=>`${e} / ${t} steps`,storiesLabel:"Stories",timeframeUnset:"Timing not set",breakdownLabel:"By activity",breakdownItem:(e,t)=>`${e}: ${t} ${t===1?"story":"stories"}`,milestoneNoDescription:"No description yet.",noMilestonesTitle:"No milestones yet",noMilestonesBody:"Add a milestone to slice the map into releases.",commentCountAria:e=>e===1?"1 comment":`${e} comments`,moveDialogLabel:"Step to move to",moveDialogSelectLabel:"Destination",moveConfirm:"Move",moveCancel:"Cancel",storyNameLabel:"Story name",editTitleAria:"Edit title",commentAria:"Comment",deleteAria:"Delete",newActivityName:"New activity",newStepName:"New step",newMilestoneName:"New milestone",newStoryName:"New story"},ja:{renameActivity:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3\u540D\u3092\u5909\u66F4",renameStep:"\u30B9\u30C6\u30C3\u30D7\u540D\u3092\u5909\u66F4",reorderStep:"\u30B9\u30C6\u30C3\u30D7\u306E\u9806\u5E8F\u3092\u5909\u66F4",addActivity:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3\u3092\u8FFD\u52A0",addStep:"\u30B9\u30C6\u30C3\u30D7\u3092\u8FFD\u52A0",deleteActivity:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3\u3092\u524A\u9664",deleteStep:"\u30B9\u30C6\u30C3\u30D7\u3092\u524A\u9664",renameStory:"\u30B9\u30C8\u30FC\u30EA\u30FC\u540D\u3092\u5909\u66F4",updateStoryDescription:"\u30B9\u30C8\u30FC\u30EA\u30FC\u306E\u8AAC\u660E\u3092\u66F4\u65B0",changeMilestone:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3\u3092\u5909\u66F4",moveStory:"\u30B9\u30C8\u30FC\u30EA\u30FC\u3092\u79FB\u52D5",reorderStory:"\u30B9\u30C8\u30FC\u30EA\u30FC\u306E\u9806\u5E8F\u3092\u5909\u66F4",addStory:"\u30B9\u30C8\u30FC\u30EA\u30FC\u3092\u8FFD\u52A0",deleteStory:"\u30B9\u30C8\u30FC\u30EA\u30FC\u3092\u524A\u9664",renameMilestone:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3\u540D\u3092\u5909\u66F4",addMilestone:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3\u3092\u8FFD\u52A0",deleteMilestone:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3\u3092\u524A\u9664",reorderMilestone:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3\u306E\u9806\u5E8F\u3092\u5909\u66F4",toValue:e=>`\u2192 \u300C${e}\u300D`,fromTo:(e,t)=>`\u300C${e}\u300D\u2192\u300C${t}\u300D`,added:e=>`+ \u300C${e}\u300D`,removed:e=>`\u2212 \u300C${e}\u300D`,toFront:"\u2192 \u5148\u982D\u3078",afterName:e=>`\u2192 \u300C${e}\u300D\u306E\u76F4\u5F8C\u3078`,toUnassigned:"\u2192 \u672A\u5272\u5F53\u3078",toName:e=>`\u2192 ${e}`,activityGroup:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3",stepGroup:"\u30B9\u30C6\u30C3\u30D7",storyGroup:"\u30B9\u30C8\u30FC\u30EA\u30FC",milestoneGroup:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3",mapGroup:"\u30DE\u30C3\u30D7",targetLabel:(e,t)=>`${e} \xB7 ${t}`,targetMissing:(e,t)=>`${e} \xB7 ${t} (missing)`,wholeMap:"\u30DE\u30C3\u30D7\u5168\u4F53",unassigned:"\u672A\u5272\u5F53",emptyTitle:"\u30D0\u30C3\u30AF\u30DC\u30FC\u30F3\u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093",emptyBody:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3\u3068\u30B9\u30C6\u30C3\u30D7\u3092\u8FFD\u52A0\u3059\u308B\u3068\u3001\u3053\u3053\u306B\u30B9\u30C8\u30FC\u30EA\u30FC\u30DE\u30C3\u30D7\u304C\u73FE\u308C\u307E\u3059\u3002",firstActivityButton:"+ \u6700\u521D\u306E\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3",groupingLabel:"\u307E\u3068\u3081\u308B\u5358\u4F4D",groupViewTab:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3\u30B0\u30EB\u30FC\u30D7",groupAxisHeader:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3\u30B0\u30EB\u30FC\u30D7 \u2192",activityAxis:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3 \u2192",milestoneAxis:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3 \u2193",stepNameLabel:"\u30B9\u30C6\u30C3\u30D7\u540D",activityNameLabel:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3\u540D",milestoneNameLabel:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3\u540D",addStepAria:"\u3053\u306E\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3\u306B\u30B9\u30C6\u30C3\u30D7\u3092\u8FFD\u52A0",newActivityButton:"+ \u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3",newMilestoneButton:"+ \u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3",addCellButton:"+ \u8FFD\u52A0",addStoryCellAria:"\u3053\u306E\u30DE\u30B9\u306B\u30B9\u30C8\u30FC\u30EA\u30FC\u3092\u8FFD\u52A0",storyCount:e=>`${e} \u30B9\u30C8\u30FC\u30EA\u30FC`,pageTabsLabel:"\u30DA\u30FC\u30B8",mapTab:"User Story Mapping",milestonesTab:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3",milestonesLead:"\u30EA\u30EA\u30FC\u30B9\u306E\u533A\u5207\u308A\u3054\u3068\u306E\u76EE\u7684\u3068\u6642\u671F\u3002\u30B9\u30C8\u30FC\u30EA\u30FC\u306F\u30DE\u30C3\u30D7\u3067\u6271\u3044\u307E\u3059\u3002",shareOfStories:e=>`\u5168\u30B9\u30C8\u30FC\u30EA\u30FC\u306E ${e}%`,coverageLabel:"\u30D0\u30C3\u30AF\u30DC\u30FC\u30F3\u306E\u7DB2\u7F85",coverage:(e,t)=>`${e} / ${t} \u30B9\u30C6\u30C3\u30D7`,storiesLabel:"\u30B9\u30C8\u30FC\u30EA\u30FC",timeframeUnset:"\u6642\u671F\u672A\u5B9A",breakdownLabel:"\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3\u5225",breakdownItem:(e,t)=>`${e}: ${t} \u30B9\u30C8\u30FC\u30EA\u30FC`,milestoneNoDescription:"\u8AAC\u660E\u306F\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002",noMilestonesTitle:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3\u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093",noMilestonesBody:"\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3\u3092\u8FFD\u52A0\u3059\u308B\u3068\u3001\u30DE\u30C3\u30D7\u3092\u30EA\u30EA\u30FC\u30B9\u3054\u3068\u306B\u533A\u5207\u308C\u307E\u3059\u3002",commentCountAria:e=>`\u30B3\u30E1\u30F3\u30C8 ${e} \u4EF6`,moveDialogLabel:"\u79FB\u52D5\u5148\u306E\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3",moveDialogSelectLabel:"\u79FB\u52D5\u5148",moveConfirm:"\u79FB\u52D5\u3059\u308B",moveCancel:"\u30AD\u30E3\u30F3\u30BB\u30EB",storyNameLabel:"\u30B9\u30C8\u30FC\u30EA\u30FC\u540D",editTitleAria:"\u30BF\u30A4\u30C8\u30EB\u3092\u7DE8\u96C6",commentAria:"\u30B3\u30E1\u30F3\u30C8",deleteAria:"\u524A\u9664",newActivityName:"\u65B0\u3057\u3044\u30A2\u30AF\u30C6\u30A3\u30D3\u30C6\u30A3",newStepName:"\u65B0\u3057\u3044\u30B9\u30C6\u30C3\u30D7",newMilestoneName:"\u65B0\u3057\u3044\u30DE\u30A4\u30EB\u30B9\u30C8\u30FC\u30F3",newStoryName:"\u65B0\u3057\u3044\u30B9\u30C8\u30FC\u30EA\u30FC"}}),ge=e=>e.tab==="milestones"?"milestones":"map",F=(e,t,i)=>{const a=typeof i=="string"?i:"",s=typeof t=="string"?t:void 0;return s===void 0?e.toValue(a):e.fromTo(s,a)},Z=(e,t)=>typeof t=="string"?e.afterName(t):e.toFront,xt={SET_ACTIVITY_NAME:(e,t,i)=>({title:e.renameActivity,tone:"update",body:F(e,M(i,t.target.id)?.name,b(f.SET_ACTIVITY_NAME,t).name??"")}),SET_STEP_NAME:(e,t,i)=>({title:e.renameStep,tone:"update",body:F(e,k(i,t.target.id)?.step.name,b(f.SET_STEP_NAME,t).name??"")}),REORDER_STEP:(e,t)=>({title:e.reorderStep,tone:"move",body:Z(e,b(f.REORDER_STEP,t).after)}),ADD_ACTIVITY:(e,t)=>({title:e.addActivity,tone:"create",body:e.added(String(b(f.ADD_ACTIVITY,t).name??""))}),ADD_STEP:(e,t)=>({title:e.addStep,tone:"create",body:e.added(String(b(f.ADD_STEP,t).name??""))}),DELETE_ACTIVITY:(e,t,i)=>({title:e.deleteActivity,tone:"delete",body:e.removed(M(i,t.target.id)?.name??t.target.id)}),DELETE_STEP:(e,t,i)=>({title:e.deleteStep,tone:"delete",body:e.removed(k(i,t.target.id)?.step.name??t.target.id)}),SET_STORY_NAME:(e,t,i)=>({title:e.renameStory,tone:"update",body:F(e,x(i,t.target.id)?.name,b(f.SET_STORY_NAME,t).name??"")}),SET_STORY_DESCRIPTION:(e,t)=>({title:e.updateStoryDescription,tone:"update",body:e.toValue(String(b(f.SET_STORY_DESCRIPTION,t).description??"").slice(0,90))}),SET_STORY_MILESTONE:(e,t,i)=>{const a=b(f.SET_STORY_MILESTONE,t).milestoneId;return{title:e.changeMilestone,tone:"move",body:a==null?e.toUnassigned:e.toName(T(i,String(a))?.name??String(a))}},MOVE_STORY:(e,t,i)=>({title:e.moveStory,tone:"move",body:e.toName(k(i,String(b(f.MOVE_STORY,t).stepId))?.step.name??String(b(f.MOVE_STORY,t).stepId??""))}),REORDER_STORY:(e,t)=>({title:e.reorderStory,tone:"move",body:Z(e,b(f.REORDER_STORY,t).after)}),ADD_STORY:(e,t)=>({title:e.addStory,tone:"create",body:e.added(String(b(f.ADD_STORY,t).name??""))}),DELETE_STORY:(e,t,i)=>({title:e.deleteStory,tone:"delete",body:e.removed(x(i,t.target.id)?.name??t.target.id)}),SET_MILESTONE_NAME:(e,t,i)=>({title:e.renameMilestone,tone:"update",body:F(e,T(i,t.target.id)?.name,b(f.SET_MILESTONE_NAME,t).name??"")}),ADD_MILESTONE:(e,t)=>({title:e.addMilestone,tone:"create",body:e.added(String(b(f.ADD_MILESTONE,t).name??""))}),DELETE_MILESTONE:(e,t,i)=>({title:e.deleteMilestone,tone:"delete",body:e.removed(T(i,t.target.id)?.name??t.target.id)}),REORDER_MILESTONE:(e,t)=>({title:e.reorderMilestone,tone:"move",body:Z(e,b(f.REORDER_MILESTONE,t).after)})},ve=(e,t,i,a)=>{let s;try{const n=xt[t.type];s=n?n(e,t,a??i):{title:t.type,tone:"meta"}}catch{s={title:t.type,tone:"meta"}}return{title:s.title,targetLabel:ye(e,i,t.target),tone:s.tone,...s.body===void 0?{}:{summary:s.body}}},he=e=>`${e.type} ${_(e.target)} ${JSON.stringify(e.payload)}`,ye=(e,t,i)=>{try{switch(i.type){case"activity":{const a=M(t,i.id);return a?e.targetLabel(e.activityGroup,a.name):e.targetMissing(e.activityGroup,i.id)}case"step":{const a=k(t,i.id)?.step;return a?e.targetLabel(e.stepGroup,a.name):e.targetMissing(e.stepGroup,i.id)}case"story":{const a=x(t,i.id);return a?e.targetLabel(e.storyGroup,a.name):e.targetMissing(e.storyGroup,i.id)}case"milestone":{const a=T(t,i.id);return a?e.targetLabel(e.milestoneGroup,a.name):e.targetMissing(e.milestoneGroup,i.id)}case"page":return e.targetLabel(e.mapGroup,Q(t));default:return`${i.type} \xB7 ${i.id}`}}catch{return`${i.type} \xB7 ${i.id}`}},fe=(e,t,i)=>{const a=[{value:"page:usm",label:e.wholeMap,group:e.mapGroup}];for(const s of t.activities){a.push({value:_({type:"activity",id:s.id}),label:s.name,group:e.activityGroup});for(const n of s.steps)a.push({value:_({type:"step",id:K(s.id,n.id)}),label:`${s.name} \u203A ${n.name}`,group:e.stepGroup})}for(const s of t.milestones)a.push({value:_({type:"milestone",id:s.id}),label:s.name,group:e.milestoneGroup});for(const s of t.stories)a.push({value:_({type:"story",id:s.id}),label:s.name,group:e.storyGroup});return a},be=(e,t,i)=>{const a=t.stories.find(s=>s.id===i.story);if(a)return{value:_({type:"story",id:a.id}),label:a.name,group:e.storyGroup};for(const s of t.activities){const n=s.steps.find(o=>o.id===i.step);if(n)return{value:_({type:"step",id:K(s.id,n.id)}),label:n.name,group:e.stepGroup}}return null},Q=e=>e.title??"User Story Mapping",ke=(e,t)=>{const i=k(e,t.step),a=i?.activity??M(e,t.activity)??e.activities[0],s=i?.step??a?.steps.find(r=>r.id===t.step)??a?.steps[0],n=x(e,t.story),o={...t};return a?o.activity=a.id:delete o.activity,s?o.step=s.id:delete o.step,n?o.story=n.id:delete o.story,o.view=t.view==="group"?"group":"activity",ge(t)==="milestones"?o.tab="milestones":delete o.tab,o},xe=(e,t)=>{switch(t.type){case"activity":return M(e,t.id)!==void 0;case"step":return k(e,t.id)!==void 0;case"story":return x(e,t.id)!==void 0;case"milestone":return T(e,t.id)!==void 0;case"page":return!0;default:return!1}},we=e=>{const t=j(e);return{name:"usm",label:"User Story Mapping",parseBase:oe,emptyBase:re,actions:f,apply:pe,canonicalState:kt,hasTarget:xe,canonicalTarget:(i,a)=>{if(a.type!=="step")return a;const s=k(i,a.id);return s?{...a,id:K(s.activity.id,s.step.id)}:a},describe:(i,a,s)=>ve(t,i,a,s),serialize:he,resolveNavigation:ke,commentTargets:(i,a)=>fe(t,i),currentTarget:(i,a)=>be(t,i,a),title:Q}},wt={width:300,height:260},$t=te`
2
- /*
3
- * The card takes its activity's tone (--usm-tone, set by the map) over its
4
- * whole surface, like a sticky note of that activity's color: a tinted face
5
- * and a tinted edge, never a colored strip down one side. The tools float
6
- * above the top edge on hover instead of reserving an empty strip at the
7
- * bottom of every card.
8
- */
9
- :host {
10
- --card-tone: var(--usm-tone, var(--dpk-ink-faint));
11
- position: relative;
12
- display: grid;
13
- gap: 6px;
14
- background: linear-gradient(
15
- 180deg,
16
- color-mix(in srgb, var(--card-tone) 15%, var(--dpk-paper-raised)),
17
- color-mix(in srgb, var(--card-tone) 6%, var(--dpk-paper-raised)) 75%
18
- );
19
- border: 1px solid color-mix(in srgb, var(--card-tone) 34%, var(--dpk-rule));
20
- border-radius: var(--dpk-radius);
21
- box-shadow:
22
- var(--dpk-bevel),
23
- 0 1px 0 color-mix(in srgb, var(--card-tone) 10%, transparent),
24
- var(--dpk-shadow-xs);
25
- padding: 11px 12px 10px;
26
- cursor: pointer;
27
- transition:
28
- box-shadow 200ms var(--dpk-ease),
29
- transform 200ms var(--dpk-ease),
30
- border-color 200ms var(--dpk-ease);
31
- }
32
-
33
- :host(:hover) {
34
- border-color: color-mix(in srgb, var(--card-tone) 46%, var(--dpk-rule-strong));
35
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
36
- transform: translateY(-2px);
37
- }
38
-
39
- :host([focused]) {
40
- border-color: var(--dpk-blue);
41
- box-shadow:
42
- var(--dpk-bevel),
43
- var(--dpk-shadow),
44
- 0 0 0 2px color-mix(in srgb, var(--dpk-blue) 22%, transparent);
45
- }
46
-
47
- :host([dragging]) {
48
- opacity: 0.45;
49
- transform: none;
50
- }
51
-
52
- /* The step a card belongs to, where the column does not already say it. */
53
- .card-step {
54
- display: flex;
55
- align-items: center;
56
- gap: 6px;
57
- min-width: 0;
58
- color: color-mix(in srgb, var(--card-tone) 55%, var(--dpk-ink-soft));
59
- font-size: 11px;
60
- font-weight: 600;
61
- line-height: 1.3;
62
- }
63
-
64
- .card-step::before {
65
- content: '';
66
- flex: none;
67
- width: 6px;
68
- height: 6px;
69
- border-radius: 50%;
70
- background: var(--card-tone);
71
- }
72
-
73
- .card-step span {
74
- overflow: hidden;
75
- text-overflow: ellipsis;
76
- white-space: nowrap;
77
- }
78
-
79
- .card-name {
80
- font-size: 13px;
81
- font-weight: 620;
82
- letter-spacing: -0.01em;
83
- line-height: 1.4;
84
- overflow-wrap: anywhere;
85
- }
86
-
87
- /* The field pads its text by 4px; pull it out by as much so the name keeps
88
- its place and its wrap width when editing starts. */
89
- .card-name dpk-component-inline-edit {
90
- display: block;
91
- margin: 0 -4px;
92
- }
93
-
94
- .card-text {
95
- display: -webkit-box;
96
- -webkit-box-orient: vertical;
97
- -webkit-line-clamp: 3;
98
- overflow: hidden;
99
- font-size: 11.5px;
100
- line-height: 1.55;
101
- color: var(--dpk-ink-soft);
102
- white-space: pre-wrap;
103
- }
104
-
105
- /* Comments already left, as a small tinted chip at the foot of the card. */
106
- .card-meta {
107
- display: flex;
108
- justify-content: flex-end;
109
- margin-top: 2px;
110
- }
111
-
112
- .card-meta-chip {
113
- display: inline-flex;
114
- align-items: center;
115
- gap: 4px;
116
- padding: 1px 7px 1px 6px;
117
- border-radius: 999px;
118
- background: color-mix(in srgb, var(--card-tone) 12%, var(--dpk-paper-sunken));
119
- color: var(--dpk-ink-soft);
120
- font-family: var(--dpk-mono);
121
- font-size: 10.5px;
122
- font-variant-numeric: tabular-nums;
123
- line-height: 18px;
124
- }
125
-
126
- .card-meta svg {
127
- width: 12px;
128
- height: 12px;
129
- }
130
-
131
- .card-tools {
132
- position: absolute;
133
- top: -13px;
134
- right: 8px;
135
- z-index: 1;
136
- display: flex;
137
- gap: 1px;
138
- padding: 2px;
139
- border: 1px solid var(--dpk-rule-strong);
140
- border-radius: var(--dpk-radius-sm);
141
- background: var(--dpk-paper-raised);
142
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
143
- opacity: 0;
144
- transform: translateY(3px);
145
- pointer-events: none;
146
- transition:
147
- opacity 150ms ease,
148
- transform 150ms var(--dpk-ease);
149
- }
150
-
151
- .card-tools .dpk-icon-btn {
152
- width: 24px;
153
- height: 24px;
154
- }
155
-
156
- :host(:hover) .card-tools,
157
- :host(:focus-within) .card-tools,
158
- :host([focused]) .card-tools,
159
- :host([data-mode='editing']) .card-tools,
160
- :host([data-mode='commenting']) .card-tools {
161
- opacity: 1;
162
- transform: none;
163
- pointer-events: auto;
164
- }
165
- `;class Et extends Qe{static{this.styles=[et,$t,ie]}static{this.properties={story:{attribute:!1},stepName:{attribute:!1},notes:{attribute:!1},mode:{type:String,reflect:!0,attribute:"data-mode"},focused:{type:Boolean,reflect:!0},dragging:{type:Boolean,reflect:!0},onIntent:{attribute:!1}}}#t="";#s=new ne(this);#a=new tt(this);constructor(){super(),this.story=null,this.stepName="",this.notes=[],this.mode="view",this.focused=!1,this.dragging=!1,this.onIntent=null,this.addEventListener("click",()=>this.#e({kind:"select"}))}updated(t){if(t.has("mode")&&(this.mode!=="commenting"&&(this.#t=""),this.mode==="editing"&&this.renderRoot.querySelector("dpk-component-inline-edit")?.startEditing()),this.mode!=="commenting")return;const i=this.renderRoot.querySelector(".comment-pop"),a=this.renderRoot.querySelector('[data-role="comment"]');i&&a&&this.#s.open(i,a,wt)}render(){const t=this.story;if(!t)return w;const i=j(this.#a.locale),a=this.mode==="editing",s=this.mode==="commenting";return d`
166
- ${this.stepName===""?w:d`<div class="card-step"><span>${this.stepName}</span></div>`}
167
- <div class="card-name">
168
- ${a?d`<dpk-component-inline-edit
169
- wrap
170
- .value=${t.name}
171
- .label=${i.storyNameLabel}
172
- @dpk-commit=${B(n=>this.#e({kind:"rename",name:n}))}
173
- ></dpk-component-inline-edit>`:d`<span>${t.name}</span>`}
174
- </div>
175
- ${t.description?d`<div class="card-text">${t.description}</div>`:w}
176
- ${this.notes.length>0?d`<div class="card-meta">
177
- <span class="card-meta-chip" aria-label=${i.commentCountAria(this.notes.length)}>
178
- ${ae()}<span>${this.notes.length}</span>
179
- </span>
180
- </div>`:w}
181
- <div class="card-tools">
182
- <button
183
- class="dpk-icon-btn"
184
- type="button"
185
- data-role="edit"
186
- aria-label=${i.editTitleAria}
187
- data-active=${String(a)}
188
- @click=${this.#i({kind:"toggle-edit"})}
189
- >
190
- ${it()}
191
- </button>
192
- <button
193
- class="dpk-icon-btn"
194
- type="button"
195
- data-role="comment"
196
- aria-label=${i.commentAria}
197
- data-active=${String(s)}
198
- @click=${this.#i({kind:"toggle-comment"})}
199
- >
200
- ${ae()}
201
- ${this.notes.length>0?d`<span class="dpk-icon-badge">${this.notes.length}</span>`:w}
202
- </button>
203
- <button
204
- class="dpk-icon-btn"
205
- type="button"
206
- data-role="delete"
207
- aria-label=${i.deleteAria}
208
- @click=${this.#i({kind:"delete"})}
209
- >
210
- ${at()}
211
- </button>
212
- </div>
213
- ${s?this.#n():w}
214
- `}#n(){return pt(mt(this.#a.locale),ct(this.#t,this.notes.map(st),this.story?{key:`story:${this.story.id}`}:{}),t=>{t.kind==="input"?(this.#t=t.body,this.requestUpdate()):this.#e(t)})}#i(t){return i=>{i.stopPropagation(),this.#e(t)}}#e(t){this.onIntent?.(t)}}const St=()=>{customElements.get("dpk-internal-usm-story-card")||customElements.define("dpk-internal-usm-story-card",Et)},Tt=(e,t,i)=>{const a=e.at(-1)??null;if(t===null||i==="end")return a;const s=e.indexOf(t);return s<0?a:i==="after"?t:s===0?null:e.at(s-1)??null},$e=(e,t,i,a,s)=>{const n=q(e,t.stepId,t.milestoneId).map(o=>o.id);return{type:"MOVE_STORY",target:{type:"story",id:i},payload:{activityId:t.activityId,stepId:t.stepId,milestoneId:t.milestoneId??null,after:H(n,i,a,s)}}},Ee=(e,t,i,a,s,n)=>{const o=x(e,a);if(!o||o.activityId!==t)return null;const r=de(e,t,i).map(l=>l.id);return{type:"MOVE_STORY",target:{type:"story",id:a},payload:{activityId:t,stepId:o.stepId,milestoneId:i??null,after:H(r,a,s,n)}}},Se=(e,t,i,a,s)=>{const n=q(e,a,s).filter(o=>o.id!==t);return{type:"MOVE_STORY",target:{type:"story",id:t},payload:{activityId:i,stepId:a,milestoneId:s??null,after:n.at(-1)?.id??null}}},Te=(e,t,i,a)=>e.includes(t)?{type:"REORDER_MILESTONE",target:{type:"milestone",id:t},payload:{after:H(e,t,i,a)}}:null,It=e=>{const t=e.stories.length,i=J(e);return e.milestones.map((a,s)=>{const n=e.stories.filter(r=>r.milestoneId===a.id),o=new Set(n.map(r=>r.stepId));return{id:a.id,ordinal:s+1,name:a.name,timeframe:a.timeframe?.trim()??"",description:a.description?.trim()??"",storyCount:n.length,share:t===0?0:n.length/t,coverage:{covered:i.filter(({step:r})=>o.has(r.id)).length,total:i.length},breakdown:e.activities.flatMap(r=>{const l=n.filter(c=>c.activityId===r.id).length;return l===0?[]:[{activityId:r.id,name:r.name,count:l}]})}})},Ie=["blue","violet","green","amber","accent"],V=e=>new Map(e.activities.map((t,i)=>[t.id,Ie[i%Ie.length]??"blue"])),Ae=(e,t)=>{const i=P("new-activity",L(t.state));if(!t.dispatch({type:"ADD_ACTIVITY",target:{type:"page",id:"usm"},payload:{id:i,name:e.newActivityName}}).ok)return;const s=P("new-step",[...L(t.state),i]);t.dispatch({type:"ADD_STEP",target:{type:"activity",id:i},payload:{id:s,name:e.newStepName}}),t.navigate({activity:i,step:null,story:null})},At=(e,t,i)=>{const a=P("new-step",L(t.state));t.dispatch({type:"ADD_STEP",target:{type:"activity",id:i},payload:{id:a,name:e.newStepName}})},_e=(e,t)=>{const i=P("new-milestone",L(t.state));t.dispatch({type:"ADD_MILESTONE",target:{type:"page",id:"usm"},payload:{id:i,name:e.newMilestoneName}})},Me=(e,t,i,a,s)=>{const n=P("new-story",L(t.state));t.dispatch({type:"ADD_STORY",target:{type:"step",id:a},payload:{id:n,name:e.newStoryName,activityId:i,...s===void 0?{}:{milestoneId:s}}}).ok&&t.navigate({activity:i,step:a,story:n})},D={kind:"idle"},ee=(e,t)=>e.kind!=="idle"&&e.storyId===t,De=(e,t)=>ee(e,t)&&(e.kind==="editing"||e.kind==="commenting")?e.kind:"view",Oe=(e,t,i)=>{switch(i.kind){case"toggle-edit":return e.kind==="editing"&&e.storyId===t?D:{kind:"editing",storyId:t};case"toggle-comment":return e.kind==="commenting"&&e.storyId===t?D:{kind:"commenting",storyId:t};case"rename":case"comment":case"dismiss":case"delete":return ee(e,t)?D:e;case"select":return e}},C=e=>`--usm-tone: var(--dpk-${e??"blue"})`,Re=(e,t)=>{const i=a=>t.stories.filter(s=>s.milestoneId===a).length;return[...t.milestones.map(({id:a,name:s,timeframe:n})=>({id:a,name:s,timeframe:n?.trim()??"",storyCount:i(a)})),{id:void 0,name:e.unassigned,timeframe:"",storyCount:i(void 0)}]},_t=(e,t)=>d`
215
- <div class="empty">
216
- <h2>${e.emptyTitle}</h2>
217
- <p>${e.emptyBody}</p>
218
- <button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>Ae(e,t)}>
219
- ${e.firstActivityButton}
220
- </button>
221
- </div>
222
- `,Mt=e=>{const{m:t,context:i}=e,a=J(i.state);return a.length===0?_t(t,i):Ne(i)==="activity"?Ot(e,a):Rt(e)},Ne=e=>e.navigation.view==="group"?"group":"activity",Dt=(e,t)=>{const i=Ne(t);return d`<div class="segmented view-tabs" role="tablist" aria-label=${e.groupingLabel}>
223
- ${Le(t,"activity",i,e.activityGroup)}
224
- ${Le(t,"group",i,e.groupViewTab)}
225
- </div>`},Le=(e,t,i,a)=>{const s=t===i;return d`<a
226
- class="tab"
227
- role="tab"
228
- data-current=${String(s)}
229
- aria-selected=${s?"true":"false"}
230
- href=${e.hashFor({view:t})}
231
- >${a}</a
232
- >`},Ot=(e,t)=>{const{m:i,context:a}=e,{state:s}=a,n=Re(i,s),o=V(s);return d`
233
- <div class="map-scroll">
234
- <div class="map" style=${`--cols:${t.length+1}`} data-testid="usm-map">
235
- <div class="map-head">
236
- <div class="map-row">
237
- <div class="corner">
238
- <span class="dpk-label">${i.groupAxisHeader}</span>
239
- </div>
240
- ${S(s.activities,r=>r.id,r=>Ye(i,a,r.id,`grid-column: span ${Math.max(r.steps.length,1)}`))}
241
- ${Be(i,a)}
242
- </div>
243
- <div class="map-row">
244
- ${Ce(i)}
245
- ${S(t,({activity:r,step:l})=>`${r.id}.${l.id}`,({activity:r,step:l})=>d`
246
- <div
247
- class="col-head"
248
- style=${C(o.get(r.id))}
249
- data-current=${String(a.navigation.step===l.id)}
250
- >
251
- <h4>
252
- <dpk-component-inline-edit
253
- .value=${l.name}
254
- .label=${i.stepNameLabel}
255
- @dpk-commit=${B(c=>a.dispatch({type:"SET_STEP_NAME",target:{type:"step",id:l.id},payload:{name:c}}))}
256
- @click=${c=>c.stopPropagation()}
257
- ></dpk-component-inline-edit>
258
- </h4>
259
- <span class="count">${le(s,l.id)}</span>
260
- </div>
261
- `)}
262
- <div class="corner"><span class="dpk-label">—</span></div>
263
- </div>
264
- </div>
265
- ${S(n,r=>r.id,r=>Ve(e,r,d`${S(t,({activity:l,step:c})=>`${l.id}.${c.id}`,({activity:l,step:c})=>Lt(e,{activityId:l.id,stepId:c.id,milestoneId:r.id}))}`))}
266
- ${Pe(i,a,t.length)}
267
- </div>
268
- </div>
269
- `},Rt=e=>{const{m:t,context:i}=e,{state:a}=i,s=Re(t,a);return d`
270
- <div class="map-scroll">
271
- <div class="map" style=${`--cols:${a.activities.length+1}`} data-testid="usm-map-group">
272
- <div class="map-head">
273
- <div class="map-row">
274
- ${Ce(t)}
275
- ${S(a.activities,n=>n.id,n=>Ye(t,i,n.id))}
276
- ${Be(t,i)}
277
- </div>
278
- </div>
279
- ${S(s,n=>n.id,n=>Ve(e,n,d`${S(a.activities,o=>o.id,o=>Ct(e,o.id,n.id))}`))}
280
- ${Pe(t,i,a.activities.length)}
281
- </div>
282
- </div>
283
- `},Ce=e=>d`<div class="corner">
284
- <span class="dpk-label">${e.activityAxis}</span>
285
- <span class="dpk-label">${e.milestoneAxis}</span>
286
- </div>`,Ye=(e,t,i,a)=>{const{state:s}=t,n=s.activities.find(l=>l.id===i);if(!n)return d`<div class="act-head"></div>`;const o=s.stories.filter(l=>l.activityId===n.id).length,r=C(V(s).get(n.id));return d`
287
- <div class="act-head" style=${a===void 0?r:`${r}; ${a}`}>
288
- <span class="act-dot" aria-hidden="true"></span>
289
- <dpk-component-inline-edit
290
- .value=${n.name}
291
- .label=${e.activityNameLabel}
292
- @dpk-commit=${B(l=>t.dispatch({type:"SET_ACTIVITY_NAME",target:{type:"activity",id:n.id},payload:{name:l}}))}
293
- ></dpk-component-inline-edit>
294
- <span class="count">${o}</span>
295
- <button
296
- class="dpk-icon-btn"
297
- type="button"
298
- aria-label=${e.addStepAria}
299
- @click=${()=>At(e,t,n.id)}
300
- >
301
- ${nt()}
302
- </button>
303
- </div>
304
- `},Be=(e,t)=>d`<div class="act-head">
305
- <button class="dpk-btn dpk-btn--ghost" type="button" @click=${()=>Ae(e,t)}>
306
- ${e.newActivityButton}
307
- </button>
308
- </div>`,Pe=(e,t,i)=>d`<div class="map-row">
309
- <div class="row-lead">
310
- <div class="row-head">
311
- <button class="dpk-btn dpk-btn--ghost" type="button" @click=${()=>_e(e,t)}>
312
- ${e.newMilestoneButton}
313
- </button>
314
- </div>
315
- </div>
316
- ${Array.from({length:i+1},()=>d`<div class="cell"></div>`)}
317
- </div>`,Ve=(e,t,i)=>{const{m:a,context:s,drag:n,handlers:o}=e,r=t.id;if(r===void 0)return d`<div
318
- class="map-row"
319
- data-unassigned="true"
320
- data-draggable="false"
321
- data-row-dragging="false"
322
- data-row-drop="false"
323
- >
324
- <div class="row-lead">
325
- <div class="row-head" data-milestone="" draggable="false"><span>${t.name}</span></div>
326
- ${Ge(a,t)}
327
- </div>
328
- ${i}
329
- <div class="cell"></div>
330
- </div>`;const l=Nt(a,s,r,t.name),c=`row:${r}`,v=n.target({key:c,accepts:"milestone",hovered:Bt,onDrop:I=>o.dropOnMilestoneRow(r,I)}),A=n.source({type:"milestone",id:r});return d`
331
- <div
332
- class="map-row"
333
- data-draggable="true"
334
- data-row-dragging=${String(n.isDragging("milestone",r))}
335
- data-row-drop=${String(n.isOver(c))}
336
- @dragenter=${v.dragenter}
337
- @dragover=${v.dragover}
338
- @dragleave=${v.dragleave}
339
- @drop=${v.drop}
340
- >
341
- <div class="row-lead">
342
- <div
343
- class="row-head"
344
- data-milestone=${r}
345
- draggable="true"
346
- @dragstart=${I=>{Yt(I),A.dragstart(I)}}
347
- @dragend=${A.dragend}
348
- >
349
- <span class="row-grip" aria-hidden="true">${ot()}</span>${l}
350
- </div>
351
- ${Ge(a,t)}
352
- </div>
353
- ${i}
354
- <div class="cell"></div>
355
- </div>
356
- `},Ge=(e,t)=>d`<div class="row-meta">
357
- ${t.timeframe===""?w:d`<span class="row-timeframe">${t.timeframe}</span>`}
358
- <span class="row-count">${e.storyCount(t.storyCount)}</span>
359
- </div>`,Nt=(e,t,i,a)=>d`<dpk-component-inline-edit
360
- draggable="false"
361
- .value=${a}
362
- .label=${e.milestoneNameLabel}
363
- @dpk-commit=${B(s=>t.dispatch({type:"SET_MILESTONE_NAME",target:{type:"milestone",id:i},payload:{name:s}}))}
364
- ></dpk-component-inline-edit>`,Lt=(e,t)=>{const{m:i,context:a,drag:s,handlers:n}=e,o=q(a.state,t.stepId,t.milestoneId),r=C(V(a.state).get(t.activityId)),l=`cell:${t.stepId}:${t.milestoneId??""}`,c=s.target({key:l,accepts:"story",hovered:Ue,onDrop:v=>n.dropOnCell(t,v)});return d`
365
- <div
366
- class="cell"
367
- data-step=${t.stepId}
368
- data-milestone=${t.milestoneId??""}
369
- data-drop=${String(s.isOver(l))}
370
- @dragenter=${c.dragenter}
371
- @dragover=${c.dragover}
372
- @dragleave=${c.dragleave}
373
- @drop=${c.drop}
374
- >
375
- <div class="card-list" data-testid=${`cell-${t.stepId}-${t.milestoneId??"unassigned"}`}>
376
- ${S(o,v=>v.id,v=>ze(e,v,{tone:r,stepName:""}))}
377
- </div>
378
- <button
379
- class="dpk-btn dpk-btn--ghost add-cell"
380
- type="button"
381
- title=${i.addStoryCellAria}
382
- @click=${()=>Me(i,a,t.activityId,t.stepId,t.milestoneId)}
383
- >
384
- ${i.addCellButton}
385
- </button>
386
- </div>
387
- `},Ct=(e,t,i)=>{const{m:a,context:s,drag:n,handlers:o}=e,{state:r}=s,l=de(r,t,i),c=r.activities.find(E=>E.id===t)?.steps??[],v=c[0],A=C(V(r).get(t)),I=E=>c.find(He=>He.id===E)?.name??"",m=`group:${t}:${i??""}`,$=n.target({key:m,accepts:"story",hovered:Ue,onDrop:E=>o.dropOnGroupCell(t,i,E)});return d`
388
- <div
389
- class="cell"
390
- data-activity=${t}
391
- data-milestone=${i??""}
392
- data-drop=${String(n.isOver(m))}
393
- @dragenter=${$.dragenter}
394
- @dragover=${$.dragover}
395
- @dragleave=${$.dragleave}
396
- @drop=${$.drop}
397
- >
398
- <div class="card-list" data-testid=${`group-cell-${t}-${i??"unassigned"}`}>
399
- ${S(l,E=>E.id,E=>ze(e,E,{tone:A,stepName:I(E.stepId)}))}
400
- </div>
401
- ${v?d`<button
402
- class="dpk-btn dpk-btn--ghost add-cell"
403
- type="button"
404
- aria-label=${a.addStoryCellAria}
405
- @click=${()=>Me(a,s,t,v.id,i)}
406
- >
407
- ${a.addCellButton}
408
- </button>`:w}
409
- </div>
410
- `},ze=(e,t,i)=>{const{context:a,mode:s,drag:n,handlers:o}=e,r=a.comments.filter(c=>c.target.type==="story"&&c.target.id===t.id),l=n.source({type:"story",id:t.id});return d`<dpk-internal-usm-story-card
411
- data-story=${t.id}
412
- draggable="true"
413
- style=${i.tone}
414
- .story=${t}
415
- .stepName=${i.stepName}
416
- .notes=${r}
417
- .mode=${De(s,t.id)}
418
- .onIntent=${c=>o.cardIntent(t.id,c)}
419
- ?focused=${a.navigation.story===t.id}
420
- ?dragging=${n.isDragging("story",t.id)}
421
- @dragstart=${l.dragstart}
422
- @dragend=${l.dragend}
423
- ></dpk-internal-usm-story-card>`},Ue=e=>{const t=e.target instanceof Element?e.target.closest("dpk-internal-usm-story-card"):null;return t?{id:t.getAttribute("data-story"),element:t}:null},Yt=e=>{const i=(e.currentTarget instanceof Element?e.currentTarget:null)?.closest(".map-row");if(!i||!e.dataTransfer)return;const a=i.getBoundingClientRect();e.dataTransfer.setDragImage(i,e.clientX-a.left,e.clientY-a.top)},Bt=e=>{const t=e.target instanceof Element?e.target.closest(".map-row"):null,i=t?.querySelector(".row-head[data-milestone]");if(!t||!i)return null;const a=i.getAttribute("data-milestone");return{id:a===""?null:a,element:t}},Pt=(e,t,i)=>{const a=V(t.state);return d`
424
- <section class="ms-overview" data-testid="usm-milestones">
425
- ${i.length===0?d`<div class="empty">
426
- <h2>${e.noMilestonesTitle}</h2>
427
- <p>${e.noMilestonesBody}</p>
428
- </div>`:d`<p class="ms-lead">${e.milestonesLead}</p>`}
429
- <ol class="ms-timeline">
430
- ${S(i,s=>s.id,s=>Vt(e,t,a,s))}
431
- <li class="ms-add">
432
- <span class="ms-when" aria-hidden="true"></span>
433
- <span class="ms-rail" aria-hidden="true"><span class="ms-node ms-node--add"></span></span>
434
- <div class="ms-body">
435
- <button class="dpk-btn dpk-btn--ghost" type="button" @click=${()=>_e(e,t)}>
436
- ${e.newMilestoneButton}
437
- </button>
438
- </div>
439
- </li>
440
- </ol>
441
- </section>
442
- `},Vt=(e,t,i,a)=>{const s=a.id;return d`
443
- <li class="ms-entry" data-milestone-card=${s}>
444
- <div class="ms-when">
445
- ${a.timeframe===""?d`<span class="ms-timeframe" data-empty="true">${e.timeframeUnset}</span>`:d`<span class="ms-timeframe">${a.timeframe}</span>`}
446
- </div>
447
- <span class="ms-rail" aria-hidden="true"><span class="ms-node">${a.ordinal}</span></span>
448
- <article class="ms-body">
449
- <h3 class="ms-name">
450
- <dpk-component-inline-edit
451
- .value=${a.name}
452
- .label=${e.milestoneNameLabel}
453
- @dpk-commit=${B(n=>t.dispatch({type:"SET_MILESTONE_NAME",target:{type:"milestone",id:s},payload:{name:n}}))}
454
- ></dpk-component-inline-edit>
455
- </h3>
456
- ${a.description===""?d`<p class="ms-description" data-empty="true">${e.milestoneNoDescription}</p>`:d`<p class="ms-description">${a.description}</p>`}
457
- <dl class="ms-facts">
458
- <div>
459
- <dt>${e.storiesLabel}</dt>
460
- <dd>
461
- <strong>${a.storyCount}</strong>
462
- <span>${e.shareOfStories(Math.round(a.share*100))}</span>
463
- </dd>
464
- </div>
465
- <div>
466
- <dt>${e.coverageLabel}</dt>
467
- <dd>
468
- <strong>${e.coverage(a.coverage.covered,a.coverage.total)}</strong>
469
- <span class="ms-meter" aria-hidden="true">
470
- <span
471
- style=${`width:${a.coverage.total===0?0:a.coverage.covered/a.coverage.total*100}%`}
472
- ></span>
473
- </span>
474
- </dd>
475
- </div>
476
- </dl>
477
- ${a.breakdown.length===0?w:Gt(e,i,a)}
478
- </article>
479
- </li>
480
- `},Gt=(e,t,i)=>d`
481
- <div class="ms-breakdown">
482
- <span class="ms-bar" aria-hidden="true">
483
- ${i.breakdown.map(a=>d`<span
484
- class="ms-bar-part"
485
- style=${`${C(t.get(a.activityId))};flex-grow:${a.count}`}
486
- ></span>`)}
487
- </span>
488
- <ul class="ms-legend" aria-label=${e.breakdownLabel}>
489
- ${i.breakdown.map(a=>d`<li
490
- data-activity=${a.activityId}
491
- style=${C(t.get(a.activityId))}
492
- aria-label=${e.breakdownItem(a.name,a.count)}
493
- >
494
- <span class="ms-dot" aria-hidden="true"></span>
495
- <span class="ms-breakdown-name" aria-hidden="true">${a.name}</span>
496
- <span class="ms-breakdown-count" aria-hidden="true">${a.count}</span>
497
- </li>`)}
498
- </ul>
499
- </div>
500
- `,zt=(e,t,i,a)=>{if(i.kind!=="picking-step")return w;const s=x(t.state,i.storyId),n=M(t.state,i.activityId);if(!s||!n)return w;const o=n.steps[0]?.id;return d`<div class="comment-pop move-dialog" id="move-dialog" popover="manual">
501
- <span class="dpk-label">${e.moveDialogLabel}</span>
502
- <select class="dpk-select" aria-label=${e.moveDialogSelectLabel} data-move-dialog>
503
- ${n.steps.map(r=>d`<option value=${r.id} ?selected=${r.id===o}>${r.name}</option>`)}
504
- </select>
505
- <div class="pop-actions">
506
- <button
507
- class="dpk-btn dpk-btn--accent"
508
- type="button"
509
- @click=${r=>{const c=(rt(r.currentTarget,HTMLElement)?.closest("#move-dialog")??null)?.querySelector("select")?.value??o;c?a.confirm(c):a.cancel()}}
510
- >
511
- ${e.moveConfirm}
512
- </button>
513
- <button class="dpk-btn" type="button" @click=${a.cancel}>${e.moveCancel}</button>
514
- </div>
515
- </div>`},Ut=(e,t,i)=>{const{state:a}=t;return d`
516
- <div class="board-bar">
517
- <div class="page-tabs" role="tablist" aria-label=${e.pageTabsLabel}>
518
- ${qe(t,"map",i,e.mapTab,a.stories.length)}
519
- ${qe(t,"milestones",i,e.milestonesTab,a.milestones.length)}
520
- </div>
521
- ${i==="map"&&a.activities.some(s=>s.steps.length>0)?Dt(e,t):w}
522
- </div>
523
- `},qe=(e,t,i,a,s)=>d`<a
524
- role="tab"
525
- data-tab=${t}
526
- aria-selected=${t===i?"true":"false"}
527
- href=${e.hashFor({tab:t==="map"?null:t})}
528
- >${a}<span class="page-tab-count">${s}</span></a
529
- >`,qt=te`
530
- :host {
531
- --dpk-usm-accent: var(--dpk-blue);
532
- }
533
- /*
534
- * A wide table must scroll inside itself and never widen the template shell.
535
- * It scrolls both ways so the backbone can stick to its top and the
536
- * milestone column to its left: a box that scrolls only sideways still
537
- * becomes the sticky ancestor, and its top would never move. Capped near the
538
- * viewport height, it fits under the tab bar once the page brings it up.
539
- */
540
- .map-scroll {
541
- min-width: 0;
542
- max-width: 100%;
543
- max-height: max(320px, calc(100dvh - 170px));
544
- overflow: auto;
545
- overscroll-behavior-x: contain;
546
- border: 1px solid var(--dpk-rule);
547
- border-radius: var(--dpk-radius-lg);
548
- background: var(--dpk-paper-sunken);
549
- box-shadow: var(--dpk-shadow);
550
- }
551
- .map {
552
- display: grid;
553
- gap: 0;
554
- min-width: max-content;
555
- }
556
- .map-row {
557
- display: grid;
558
- grid-template-columns: 140px repeat(var(--cols), minmax(180px, 240px));
559
- }
560
- .map-row + .map-row {
561
- border-top: 1px solid var(--dpk-rule);
562
- }
563
-
564
- /* The backbone (activities and steps) stays at the top while the rows scroll. */
565
- .map-head {
566
- position: sticky;
567
- top: 0;
568
- z-index: 3;
569
- border-bottom: 1px solid var(--dpk-rule-strong);
570
- box-shadow: 0 8px 14px -12px var(--dpk-shade-3);
571
- }
572
-
573
- /* The leading column (axis corners and milestone labels) stays at the left
574
- while the steps scroll sideways; it is opaque so cards pass under it. */
575
- .corner:first-child,
576
- .row-lead {
577
- position: sticky;
578
- left: 0;
579
- z-index: 2;
580
- box-shadow: 1px 0 0 var(--dpk-rule);
581
- }
582
- .row-lead {
583
- display: flex;
584
- flex-direction: column;
585
- align-items: flex-start;
586
- justify-content: center;
587
- gap: 2px;
588
- min-width: 0;
589
- padding: 8px 6px 8px 4px;
590
- background: var(--dpk-paper-sunken);
591
- }
592
- /* Row names and their meta line share one column: past the grip (15px), its
593
- gap (6px) and the inline edit's own padding (4px). */
594
- .row-lead {
595
- --usm-row-indent: 25px;
596
- }
597
- .row-meta {
598
- display: flex;
599
- flex-wrap: wrap;
600
- gap: 2px 8px;
601
- padding-left: var(--usm-row-indent);
602
- font-size: 10.5px;
603
- color: var(--dpk-ink-faint);
604
- }
605
- .row-timeframe {
606
- color: var(--dpk-ink-soft);
607
- font-weight: 600;
608
- }
609
- .row-count {
610
- font-family: var(--dpk-mono);
611
- font-variant-numeric: tabular-nums;
612
- }
613
- /* An activity name spans its steps; keep it in view beside the sticky column. */
614
- .act-head > dpk-component-inline-edit {
615
- position: sticky;
616
- left: 150px;
617
- }
618
- .corner,
619
- .act-head,
620
- .col-head,
621
- .row-head,
622
- .cell {
623
- padding: 10px;
624
- }
625
- .corner {
626
- background: var(--dpk-paper-sunken);
627
- display: grid;
628
- gap: 3px;
629
- align-content: start;
630
- }
631
-
632
- /* Above the content: the page tabs (map / milestones) and, on the map, the
633
- unit toggle (group band vs one column per activity). */
634
- .board-bar {
635
- border-bottom: 1px solid var(--dpk-rule);
636
- /* Stays on top while a long milestone list scrolls under it. */
637
- position: sticky;
638
- top: 0;
639
- z-index: 5;
640
- margin: -24px -24px 0;
641
- padding: 12px 24px;
642
- background: var(--dpk-glass);
643
- backdrop-filter: saturate(1.6) blur(14px);
644
- display: flex;
645
- flex-wrap: wrap;
646
- align-items: center;
647
- gap: 10px 14px;
648
- min-width: 0;
649
- }
650
-
651
- /* The two pages: an underlined tab strip, heavier than the view toggle. */
652
- .page-tabs {
653
- display: inline-flex;
654
- gap: 4px;
655
- margin-right: auto;
656
- }
657
- .page-tabs [role='tab'] {
658
- position: relative;
659
- display: inline-flex;
660
- align-items: center;
661
- gap: 8px;
662
- padding: 7px 12px;
663
- border-radius: var(--dpk-radius-sm);
664
- color: var(--dpk-ink-soft);
665
- font-size: 13.5px;
666
- font-weight: 600;
667
- letter-spacing: -0.005em;
668
- text-decoration: none;
669
- white-space: nowrap;
670
- transition:
671
- color 160ms var(--dpk-ease),
672
- background 160ms var(--dpk-ease);
673
- }
674
- .page-tabs [role='tab']:hover {
675
- color: var(--dpk-ink);
676
- background: var(--dpk-paper-inset);
677
- }
678
- .page-tabs [role='tab']:focus-visible {
679
- outline: none;
680
- box-shadow: var(--dpk-focus);
681
- }
682
- .page-tabs [role='tab'][aria-selected='true'] {
683
- color: var(--dpk-ink);
684
- font-weight: 700;
685
- }
686
- .page-tabs [role='tab'][aria-selected='true']::after {
687
- content: '';
688
- position: absolute;
689
- left: 12px;
690
- right: 12px;
691
- bottom: -13px;
692
- height: 2px;
693
- border-radius: 2px;
694
- background: var(--dpk-usm-accent);
695
- }
696
- .page-tab-count {
697
- min-width: 18px;
698
- padding: 0 6px;
699
- border-radius: 999px;
700
- background: var(--dpk-rule);
701
- color: var(--dpk-ink-soft);
702
- font-family: var(--dpk-mono);
703
- font-size: 10.5px;
704
- font-weight: 650;
705
- font-variant-numeric: tabular-nums;
706
- line-height: 17px;
707
- text-align: center;
708
- }
709
- [role='tab'][aria-selected='true'] .page-tab-count {
710
- background: var(--dpk-blue-soft);
711
- color: var(--dpk-blue);
712
- }
713
-
714
- /* A sunken track with the selected segment raised on top of it. */
715
- .segmented {
716
- display: inline-flex;
717
- gap: 2px;
718
- padding: 3px;
719
- max-width: 100%;
720
- overflow-x: auto;
721
- scrollbar-width: none;
722
- border: 1px solid var(--dpk-rule);
723
- border-radius: 999px;
724
- background: var(--dpk-paper-sunken);
725
- box-shadow: inset 0 1px 3px var(--dpk-shade-1);
726
- }
727
-
728
- .tab {
729
- padding: 5px 14px;
730
- border-radius: 999px;
731
- font-size: 12px;
732
- font-weight: 550;
733
- text-decoration: none;
734
- color: var(--dpk-ink-soft);
735
- white-space: nowrap;
736
- transition:
737
- background 160ms var(--dpk-ease),
738
- color 160ms var(--dpk-ease),
739
- box-shadow 160ms var(--dpk-ease);
740
- }
741
-
742
- .tab:hover {
743
- color: var(--dpk-ink);
744
- background: var(--dpk-paper-inset);
745
- }
746
-
747
- .tab[data-current='true'] {
748
- background: var(--dpk-paper-raised);
749
- color: var(--dpk-ink);
750
- font-weight: 650;
751
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
752
- }
753
-
754
- /* Activity band: raised above the working canvas and marked with a quiet
755
- accent edge so the grouping reads at a glance. */
756
- .act-head {
757
- position: relative;
758
- border-left: 1px solid var(--dpk-rule);
759
- box-shadow:
760
- var(--dpk-bevel),
761
- inset 0 -1px 0 var(--dpk-rule-strong);
762
- display: flex;
763
- align-items: center;
764
- gap: 8px;
765
- font-size: 13px;
766
- font-weight: 650;
767
- letter-spacing: -0.005em;
768
- }
769
- .act-head {
770
- background: var(--dpk-paper-raised);
771
- }
772
- .act-head > dpk-component-inline-edit {
773
- flex: 1 1 auto;
774
- min-width: 0;
775
- }
776
- .act-dot {
777
- flex: 0 0 auto;
778
- width: 8px;
779
- height: 8px;
780
- border-radius: 3px;
781
- background: var(--usm-tone, var(--dpk-usm-accent));
782
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--usm-tone, var(--dpk-usm-accent)) 18%, transparent);
783
- }
784
- .act-head .count,
785
- .col-head .count {
786
- flex: 0 0 auto;
787
- padding: 0 6px;
788
- border-radius: 999px;
789
- background: var(--dpk-rule);
790
- line-height: 16px;
791
- }
792
- .col-head {
793
- display: flex;
794
- align-items: center;
795
- gap: 6px;
796
- border-left: 1px solid var(--dpk-rule);
797
- background: var(--dpk-paper-sunken);
798
- transition: background 160ms var(--dpk-ease);
799
- }
800
- .col-head h4 {
801
- flex: 1 1 auto;
802
- min-width: 0;
803
- }
804
- .col-head[data-current='true'] {
805
- background: color-mix(in srgb, var(--dpk-usm-accent) 8%, var(--dpk-paper-sunken));
806
- }
807
- .col-head h4 {
808
- font-size: 13px;
809
- font-weight: 600;
810
- margin: 0;
811
- }
812
-
813
- .row-head {
814
- display: flex;
815
- align-items: center;
816
- gap: 6px;
817
- }
818
-
819
- /* Milestone row label: plain text with a grip, not a chip. The "add
820
- milestone" row reuses \`.row-head\` for its ghost button. */
821
- .row-head[data-milestone] {
822
- align-self: stretch;
823
- margin: 0;
824
- padding: 0 6px 0 0;
825
- color: var(--dpk-ink);
826
- font-size: 12.5px;
827
- font-weight: 650;
828
- max-width: 100%;
829
- }
830
-
831
- .row-head[draggable='true'] {
832
- cursor: grab;
833
- -webkit-user-select: none;
834
- user-select: none;
835
- }
836
-
837
- .row-head[draggable='true'] dpk-component-inline-edit {
838
- -webkit-user-drag: none;
839
- }
840
-
841
- .row-head[draggable='true']:active {
842
- cursor: grabbing;
843
- }
844
-
845
- .row-grip {
846
- flex: 0 0 auto;
847
- display: inline-flex;
848
- color: var(--dpk-ink-faint);
849
- }
850
-
851
- .row-grip svg {
852
- display: block;
853
- width: 15px;
854
- height: 15px;
855
- }
856
-
857
- /* Row-level drag affordance: only the grip answers the hover. */
858
- .map-row[data-draggable='true']:hover .row-grip {
859
- color: var(--dpk-blue);
860
- }
861
- .map-row[data-draggable='true'] {
862
- cursor: grab;
863
- }
864
- .map-row[data-draggable='true']:active {
865
- cursor: grabbing;
866
- }
867
-
868
- /*
869
- * Dragging state: entire row fades. Never disable pointer events on the
870
- * source here: Lit applies this state in the microtask right after
871
- * \`dragstart\`, and Blink then re-hit-tests the pointer and aborts the drag
872
- * when the source is no longer under it.
873
- */
874
- .map-row[data-row-dragging='true'] {
875
- opacity: 0.45;
876
- }
877
-
878
- /* Drop target: entire row highlights. */
879
- .map-row[data-row-drop='true'] {
880
- outline: 2px dashed var(--dpk-blue);
881
- outline-offset: -2px;
882
- }
883
-
884
- /* Unassigned is a holding area, not a release: its label is quieter. */
885
- .map-row[data-unassigned='true'] .row-head {
886
- padding-left: var(--usm-row-indent);
887
- color: var(--dpk-ink-soft);
888
- }
889
-
890
- /* Cells are the working canvas: sunken, with a quiet dot lattice, so raised
891
- story cards read as things placed on the board. */
892
- .cell {
893
- border-left: 1px solid var(--dpk-rule);
894
- border-top: 1px solid var(--dpk-rule);
895
- display: flex;
896
- flex-direction: column;
897
- gap: 8px;
898
- min-height: 100px;
899
- background: var(--dpk-dots), var(--dpk-paper-sunken);
900
- transition: background 160ms var(--dpk-ease);
901
- }
902
- .cell[data-drop='true'] {
903
- outline: 2px dashed var(--dpk-blue);
904
- outline-offset: -2px;
905
- }
906
- .card-list {
907
- display: grid;
908
- gap: 10px;
909
- align-content: start;
910
- flex: 1 1 auto;
911
- }
912
- .add-cell {
913
- margin-top: auto;
914
- opacity: 0;
915
- transition:
916
- opacity 180ms var(--dpk-ease),
917
- background 160ms var(--dpk-ease),
918
- border-color 160ms var(--dpk-ease),
919
- color 160ms var(--dpk-ease);
920
- border: 1px dashed var(--dpk-rule-strong);
921
- border-radius: var(--dpk-radius-sm);
922
- background: transparent;
923
- color: var(--dpk-ink-faint);
924
- padding: 4px 8px;
925
- font-size: 11.5px;
926
- }
927
- .add-cell:hover {
928
- background: var(--dpk-blue-soft);
929
- border-color: var(--dpk-blue);
930
- color: var(--dpk-blue);
931
- }
932
- .cell:hover .add-cell {
933
- opacity: 1;
934
- }
935
- .empty {
936
- border: 1px dashed var(--dpk-rule-strong);
937
- border-radius: var(--dpk-radius-lg);
938
- padding: 28px 24px;
939
- background: var(--dpk-dots), var(--dpk-paper-sunken);
940
- max-width: 620px;
941
- display: grid;
942
- gap: 10px;
943
- }
944
- .count {
945
- font-family: var(--dpk-mono);
946
- font-variant-numeric: tabular-nums;
947
- font-size: 10px;
948
- color: var(--dpk-ink-faint);
949
- }
950
-
951
- /* ------------------------------------------------------ milestones tab */
952
-
953
- /* The release slices as a timeline, like the experience section of a
954
- portfolio: when on the left, one node per slice on a single rail, what
955
- and how big on the right. Nothing is boxed; the rail carries the order. */
956
- .ms-overview {
957
- --ms-node: 30px;
958
- --ms-when: 132px;
959
- --ms-gap: 44px;
960
- display: grid;
961
- gap: 28px;
962
- max-width: 920px;
963
- padding: 28px 0 40px;
964
- }
965
- .ms-lead {
966
- margin: 0 0 0 calc(var(--ms-when) + var(--ms-node) + 48px);
967
- max-width: 60ch;
968
- color: var(--dpk-ink-soft);
969
- font-size: 13px;
970
- line-height: 1.6;
971
- }
972
- .ms-timeline {
973
- margin: 0;
974
- padding: 0;
975
- list-style: none;
976
- }
977
- .ms-entry,
978
- .ms-add {
979
- display: grid;
980
- grid-template-columns: var(--ms-when) var(--ms-node) minmax(0, 1fr);
981
- grid-template-areas: 'when rail body';
982
- column-gap: 24px;
983
- }
984
- .ms-entry {
985
- padding-bottom: var(--ms-gap);
986
- }
987
- .ms-when {
988
- grid-area: when;
989
- display: flex;
990
- justify-content: flex-end;
991
- padding-top: 5px;
992
- }
993
- .ms-timeframe {
994
- color: var(--dpk-ink);
995
- font-size: 13px;
996
- font-weight: 650;
997
- font-variant-numeric: tabular-nums;
998
- letter-spacing: 0.01em;
999
- text-align: right;
1000
- }
1001
- .ms-timeframe[data-empty='true'] {
1002
- color: var(--dpk-ink-faint);
1003
- font-weight: 500;
1004
- }
1005
-
1006
- /* The rail runs through every entry's padding, so the nodes read as one line;
1007
- it starts at the first node and fades out into the add node. */
1008
- .ms-rail {
1009
- grid-area: rail;
1010
- position: relative;
1011
- display: flex;
1012
- justify-content: center;
1013
- }
1014
- .ms-rail::before {
1015
- content: '';
1016
- position: absolute;
1017
- top: 0;
1018
- bottom: calc(-1 * var(--ms-gap));
1019
- left: calc(50% - 1px);
1020
- width: 2px;
1021
- border-radius: 1px;
1022
- background: var(--dpk-rule-strong);
1023
- }
1024
- .ms-entry:first-child .ms-rail::before {
1025
- top: calc(var(--ms-node) / 2);
1026
- }
1027
- .ms-add .ms-rail::before {
1028
- bottom: auto;
1029
- height: calc(var(--ms-node) / 2);
1030
- background: repeating-linear-gradient(to bottom, var(--dpk-rule-strong) 0 3px, transparent 3px 7px);
1031
- }
1032
- .ms-node {
1033
- position: relative;
1034
- display: grid;
1035
- place-items: center;
1036
- width: var(--ms-node);
1037
- height: var(--ms-node);
1038
- box-sizing: border-box;
1039
- border: 1px solid var(--dpk-rule-strong);
1040
- border-radius: 50%;
1041
- background: var(--dpk-paper-raised);
1042
- color: var(--dpk-ink);
1043
- font-family: var(--dpk-mono);
1044
- font-size: 12px;
1045
- font-weight: 700;
1046
- font-variant-numeric: tabular-nums;
1047
- /* A ring of page color cuts the rail around the node. */
1048
- box-shadow:
1049
- 0 0 0 5px var(--dpk-paper),
1050
- var(--dpk-bevel),
1051
- var(--dpk-shadow-xs);
1052
- transition:
1053
- border-color 160ms var(--dpk-ease),
1054
- color 160ms var(--dpk-ease);
1055
- }
1056
- .ms-entry:hover .ms-node,
1057
- .ms-entry:focus-within .ms-node {
1058
- border-color: var(--dpk-blue);
1059
- color: var(--dpk-blue-strong);
1060
- }
1061
- .ms-node--add {
1062
- border-style: dashed;
1063
- background: var(--dpk-paper);
1064
- box-shadow: 0 0 0 5px var(--dpk-paper);
1065
- }
1066
- .ms-node--add::before,
1067
- .ms-node--add::after {
1068
- content: '';
1069
- position: absolute;
1070
- left: 50%;
1071
- top: 50%;
1072
- width: 10px;
1073
- height: 1.5px;
1074
- border-radius: 1px;
1075
- background: var(--dpk-ink-faint);
1076
- transform: translate(-50%, -50%);
1077
- }
1078
- .ms-node--add::after {
1079
- transform: translate(-50%, -50%) rotate(90deg);
1080
- }
1081
- .ms-add .ms-body {
1082
- display: flex;
1083
- align-items: center;
1084
- min-height: var(--ms-node);
1085
- }
1086
- /* The label lines up with the names above; the button's padding hangs out. */
1087
- .ms-add .dpk-btn {
1088
- margin-left: -12px;
1089
- }
1090
-
1091
- .ms-body {
1092
- grid-area: body;
1093
- display: grid;
1094
- gap: 10px;
1095
- min-width: 0;
1096
- justify-items: start;
1097
- }
1098
- .ms-name {
1099
- justify-self: stretch;
1100
- min-width: 0;
1101
- margin: 0;
1102
- padding-top: 1px;
1103
- font-size: 19px;
1104
- font-weight: 700;
1105
- line-height: 1.4;
1106
- letter-spacing: -0.015em;
1107
- }
1108
- /* The field pads its text by 4px; pull it out by as much so the name lines
1109
- up with the description and keeps its place when editing starts. */
1110
- .ms-name dpk-component-inline-edit {
1111
- display: block;
1112
- margin: 0 -4px;
1113
- }
1114
- .ms-description {
1115
- margin: 0;
1116
- max-width: 64ch;
1117
- color: var(--dpk-ink-soft);
1118
- font-size: 14px;
1119
- line-height: 1.75;
1120
- white-space: pre-wrap;
1121
- }
1122
- .ms-description[data-empty='true'] {
1123
- color: var(--dpk-ink-faint);
1124
- font-size: 13px;
1125
- }
1126
- .ms-facts {
1127
- display: flex;
1128
- flex-wrap: wrap;
1129
- gap: 10px 36px;
1130
- margin: 6px 0 0;
1131
- }
1132
- .ms-facts dt {
1133
- margin-bottom: 3px;
1134
- color: var(--dpk-ink-faint);
1135
- font-size: 11px;
1136
- font-weight: 600;
1137
- letter-spacing: 0.02em;
1138
- }
1139
- .ms-facts dd {
1140
- display: flex;
1141
- align-items: center;
1142
- gap: 10px;
1143
- margin: 0;
1144
- color: var(--dpk-ink-faint);
1145
- font-size: 12px;
1146
- }
1147
- .ms-facts strong {
1148
- color: var(--dpk-ink);
1149
- font-size: 15px;
1150
- font-weight: 650;
1151
- font-variant-numeric: tabular-nums;
1152
- }
1153
- .ms-meter {
1154
- display: block;
1155
- width: 72px;
1156
- height: 4px;
1157
- border-radius: 2px;
1158
- background: var(--dpk-paper-inset);
1159
- overflow: hidden;
1160
- }
1161
- .ms-meter > span {
1162
- display: block;
1163
- height: 100%;
1164
- border-radius: inherit;
1165
- background: var(--dpk-blue);
1166
- }
1167
-
1168
- /* Where the slice's stories sit across the backbone, in activity tones. */
1169
- .ms-breakdown {
1170
- display: grid;
1171
- gap: 10px;
1172
- width: min(100%, 460px);
1173
- margin-top: 4px;
1174
- }
1175
- .ms-bar {
1176
- display: flex;
1177
- gap: 2px;
1178
- height: 6px;
1179
- }
1180
- .ms-bar-part {
1181
- min-width: 6px;
1182
- border-radius: 3px;
1183
- background: var(--usm-tone);
1184
- }
1185
- .ms-legend {
1186
- display: flex;
1187
- flex-wrap: wrap;
1188
- gap: 6px 16px;
1189
- margin: 0;
1190
- padding: 0;
1191
- list-style: none;
1192
- }
1193
- .ms-legend li {
1194
- display: inline-flex;
1195
- align-items: center;
1196
- gap: 6px;
1197
- color: var(--dpk-ink-soft);
1198
- font-size: 12px;
1199
- }
1200
- .ms-dot {
1201
- width: 8px;
1202
- height: 8px;
1203
- border-radius: 50%;
1204
- background: var(--usm-tone);
1205
- }
1206
- .ms-breakdown-count {
1207
- color: var(--dpk-ink-faint);
1208
- font-family: var(--dpk-mono);
1209
- font-size: 11px;
1210
- font-variant-numeric: tabular-nums;
1211
- }
1212
-
1213
- /* Narrow: the date moves above the name, the rail stays on the left. */
1214
- @media (max-width: 640px) {
1215
- .ms-overview {
1216
- --ms-node: 26px;
1217
- }
1218
- .ms-lead {
1219
- margin-left: calc(var(--ms-node) + 16px);
1220
- }
1221
- .ms-entry,
1222
- .ms-add {
1223
- grid-template-columns: var(--ms-node) minmax(0, 1fr);
1224
- grid-template-areas:
1225
- 'rail when'
1226
- 'rail body';
1227
- column-gap: 16px;
1228
- }
1229
- .ms-add {
1230
- grid-template-areas: 'rail body';
1231
- }
1232
- .ms-add .ms-when {
1233
- display: none;
1234
- }
1235
- .ms-when {
1236
- justify-content: flex-start;
1237
- padding: 4px 0 2px;
1238
- }
1239
- .ms-timeframe {
1240
- text-align: left;
1241
- }
1242
- }
1243
-
1244
- /* Step picker shown after a cross-activity drop. */
1245
- .move-dialog {
1246
- min-width: 220px;
1247
- }
1248
- `,jt={width:300,height:240};class je extends se{static{this.styles=[se.styles,qt,ie]}definitionFor(t){return we(t)}static{this.properties={mode:{state:!0}}}#t=new lt(this);#s=new ne(this);constructor(){super(),this.mode=D}renderRegions(t){return{main:this.#a(t)}}updated(){if(super.updated(),this.mode.kind!=="picking-step")return;const t=this.renderRoot.querySelector("#move-dialog");t&&this.#s.open(t,ut(this.mode.point.x,this.mode.point.y),jt)}#a(t){const i=j(this.locale),a=ge(t.navigation);return d`
1249
- ${Ut(i,t,a)}
1250
- ${a==="milestones"?Pt(i,t,It(t.state)):this.#n(i,t)}
1251
- ${zt(i,t,this.mode,{confirm:s=>this.#d(s),cancel:()=>this.mode=D})}
1252
- `}#n(t,i){return Mt({m:t,context:i,mode:this.mode,drag:this.#t,handlers:{cardIntent:(a,s)=>this.#i(a,s),dropOnCell:(a,s)=>this.#e(a,s),dropOnGroupCell:(a,s,n)=>this.#o(a,s,n),dropOnMilestoneRow:(a,s)=>this.#r(a,s)}})}#i(t,i){const a=this.context();switch(i.kind){case"select":{const s=x(a.state,t);s&&a.navigate({step:s.stepId,story:s.id});break}case"rename":a.dispatch({type:"SET_STORY_NAME",target:{type:"story",id:t},payload:{name:i.name}});break;case"comment":a.dispatch({type:"comment",target:`story:${t}`,payload:{body:i.body}});break;case"delete":a.dispatch({type:"DELETE_STORY",target:{type:"story",id:t},payload:{}});break}this.mode=Oe(this.mode,t,i)}#e(t,i){const a=this.context();a.dispatch($e(a.state,t,i.item.id,i.hoveredId,i.place))}#o(t,i,a){const s=this.context(),n=x(s.state,a.item.id);if(!n)return;if(n.activityId!==t){this.mode={kind:"picking-step",storyId:n.id,activityId:t,milestoneId:i,point:{x:a.event.clientX,y:a.event.clientY}};return}const o=Ee(s.state,t,i,n.id,a.hoveredId,a.place);o&&s.dispatch(o)}#r(t,i){const a=this.context(),s=a.state.milestones.map(o=>o.id),n=Te(s,i.item.id,i.hoveredId,i.place);n&&a.dispatch(n)}#d(t){const i=this.mode;if(i.kind!=="picking-step")return;const a=this.context();a.dispatch(Se(a.state,i.storyId,i.activityId,t,i.milestoneId)),this.mode=D}}const Fe=()=>{St(),customElements.get("dpk-template-usm")||customElements.define("dpk-template-usm",je)},Ft=Object.freeze(Object.defineProperty({__proto__:null,DpkTemplateUsm:je,IDLE_MODE:D,allUsmIds:L,applyUsmAction:pe,cardModeOf:De,defineUsmElement:Fe,describeUsmAction:ve,dropAfter:Tt,emptyUsmBase:re,findActivity:M,findMilestone:T,findStep:k,findStory:x,flatSteps:J,modeConcerns:ee,parseUsmBase:oe,reduceCardIntent:Oe,resolveCellDrop:$e,resolveGroupDrop:Ee,resolveMilestoneDrop:Te,resolvePickedStepMove:Se,resolveUsmNavigation:ke,serializeUsmAction:he,storiesInCell:q,storyCountForStep:le,usmAction:gt,usmActions:f,usmCommentTargets:fe,usmCurrentTarget:be,usmDefinitionFor:we,usmHasTarget:xe,usmMessages:j,usmTargetLabel:ye,usmTitle:Q},Symbol.toStringTag,{value:"Module"}));export{Fe as d,Ft as i};