vanilla-breeze 0.1.3 → 0.2.0
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/custom-elements.json +25084 -6649
- package/dist/cdn/components/accessibility-specimen.js +11 -0
- package/dist/cdn/components/accordion-wc.js +1 -1
- package/dist/cdn/components/activity-feed.js +2 -0
- package/dist/cdn/components/adr-wc.js +17 -17
- package/dist/cdn/components/ai-chat.js +28 -0
- package/dist/cdn/components/ai-summary.js +10 -0
- package/dist/cdn/components/analytics-panel.js +5 -5
- package/dist/cdn/components/audio-player.js +3 -3
- package/dist/cdn/components/audio-visualizer.js +2 -2
- package/dist/cdn/components/author-index.js +2 -2
- package/dist/cdn/components/brand-mark.js +1 -1
- package/dist/cdn/components/bread-crumb.js +2 -0
- package/dist/cdn/components/breakpoint-specimen.js +26 -0
- package/dist/cdn/components/burndown-chart.js +2 -0
- package/dist/cdn/components/calendar-wc.js +2 -2
- package/dist/cdn/components/capacity-plan.js +25 -0
- package/dist/cdn/components/card-list.js +1 -1
- package/dist/cdn/components/carousel-wc.js +1 -1
- package/dist/cdn/components/change-set.js +2 -2
- package/dist/cdn/components/chart-wc.js +58 -36
- package/dist/cdn/components/chat-input.js +1 -1
- package/dist/cdn/components/chat-window.js +1 -1
- package/dist/cdn/components/color-palette.js +9 -9
- package/dist/cdn/components/color-picker.js +1 -1
- package/dist/cdn/components/combo-box.js +1 -1
- package/dist/cdn/components/command-palette.js +1 -1
- package/dist/cdn/components/comment-box.js +60 -0
- package/dist/cdn/components/comment-thread.js +60 -0
- package/dist/cdn/components/comment-wc.js +1 -1
- package/dist/cdn/components/compare-surface.js +1 -1
- package/dist/cdn/components/component-sampler.js +2 -2
- package/dist/cdn/components/consent-banner.js +1 -1
- package/dist/cdn/components/content-lens.js +1 -1
- package/dist/cdn/components/content-swap.js +1 -1
- package/dist/cdn/components/context-menu.js +1 -1
- package/dist/cdn/components/data-table.js +1 -1
- package/dist/cdn/components/date-picker.js +1 -1
- package/dist/cdn/components/day-view.js +1 -1
- package/dist/cdn/components/diagram-wc.js +3 -0
- package/dist/cdn/components/drag-surface.js +1 -1
- package/dist/cdn/components/drop-down.js +1 -1
- package/dist/cdn/components/emoji-picker.js +1 -1
- package/dist/cdn/components/empathy-map.js +41 -43
- package/dist/cdn/components/flow-diagram.js +1 -1
- package/dist/cdn/components/font-pairer.js +81 -81
- package/dist/cdn/components/foot-notes.js +1 -1
- package/dist/cdn/components/form-field.js +1 -1
- package/dist/cdn/components/gantt-chart.js +1 -1
- package/dist/cdn/components/geo-map.js +25 -23
- package/dist/cdn/components/glossary-index.js +1 -1
- package/dist/cdn/components/glossary-wc.js +1 -1
- package/dist/cdn/components/gradient-builder.js +29 -29
- package/dist/cdn/components/heading-links.js +1 -1
- package/dist/cdn/components/highlight-wc.js +2 -2
- package/dist/cdn/components/icon-wc.js +4 -4
- package/dist/cdn/components/image-gallery.js +1 -1
- package/dist/cdn/components/image-map.js +1 -1
- package/dist/cdn/components/impact-effort.js +1 -1
- package/dist/cdn/components/include-file.js +1 -1
- package/dist/cdn/components/iron-triangle.js +2 -0
- package/dist/cdn/components/kanban-board.js +1 -1
- package/dist/cdn/components/layout-specimen.js +35 -0
- package/dist/cdn/components/manifest.json +227 -103
- package/dist/cdn/components/markdown-editor.js +1 -1
- package/dist/cdn/components/markdown-viewer.js +12 -12
- package/dist/cdn/components/motion-specimen.js +12 -12
- package/dist/cdn/components/nav-bar.js +2 -0
- package/dist/cdn/components/note-wc.js +2 -2
- package/dist/cdn/components/notification-wc.js +4 -4
- package/dist/cdn/components/page-info.js +4 -4
- package/dist/cdn/components/page-stats.js +1 -1
- package/dist/cdn/components/page-toc.js +1 -1
- package/dist/cdn/components/page-tools.js +1 -1
- package/dist/cdn/components/page-tour.js +6 -6
- package/dist/cdn/components/pager-wc.js +2 -0
- package/dist/cdn/components/palette-generator.js +11 -11
- package/dist/cdn/components/poll-wc.js +2 -0
- package/dist/cdn/components/pop-over.js +2 -0
- package/dist/cdn/components/popularity-index.js +2 -2
- package/dist/cdn/components/print-page.js +1 -1
- package/dist/cdn/components/product-roadmap.js +3 -0
- package/dist/cdn/components/progress-tracker.js +2 -0
- package/dist/cdn/components/qr-code.js +1 -1
- package/dist/cdn/components/quadrant-grid.js +3 -0
- package/dist/cdn/components/quality-target.js +12 -0
- package/dist/cdn/components/reaction-bar.js +2 -0
- package/dist/cdn/components/reader-view.js +3 -3
- package/dist/cdn/components/reading-progress.js +2 -0
- package/dist/cdn/components/recently-visited.js +10 -10
- package/dist/cdn/components/requirement-card.js +122 -0
- package/dist/cdn/components/review-surface.js +34 -40
- package/dist/cdn/components/risk-register.js +25 -0
- package/dist/cdn/components/roadmap.js +3 -0
- package/dist/cdn/components/score-card.js +197 -0
- package/dist/cdn/components/selection-menu.js +1 -1
- package/dist/cdn/components/semantic-palette.js +15 -15
- package/dist/cdn/components/settings-panel.js +12 -12
- package/dist/cdn/components/share-wc.js +2 -2
- package/dist/cdn/components/short-cuts.js +1 -1
- package/dist/cdn/components/site-index.js +4 -4
- package/dist/cdn/components/site-map-wc.js +1 -1
- package/dist/cdn/components/site-map.js +1 -1
- package/dist/cdn/components/site-search.js +9 -9
- package/dist/cdn/components/slide-accept.js +1 -1
- package/dist/cdn/components/social-embed.js +1 -1
- package/dist/cdn/components/spacing-specimen.js +5 -5
- package/dist/cdn/components/split-surface.js +1 -1
- package/dist/cdn/components/star-rating.js +1 -1
- package/dist/cdn/components/status-wc.js +2 -0
- package/dist/cdn/components/stepper-wc.js +2 -0
- package/dist/cdn/components/story-map.js +1 -1
- package/dist/cdn/components/tab-set.js +1 -1
- package/dist/cdn/components/text-reader.js +2 -2
- package/dist/cdn/components/theme-catalog.js +28 -0
- package/dist/cdn/components/theme-export.js +20 -12
- package/dist/cdn/components/theme-import.js +44 -0
- package/dist/cdn/components/theme-picker.js +29 -26
- package/dist/cdn/components/time-index.js +2 -2
- package/dist/cdn/components/time-picker.js +1 -1
- package/dist/cdn/components/toast-msg.js +3 -3
- package/dist/cdn/components/token-specimen.js +14 -14
- package/dist/cdn/components/tool-tip.js +1 -1
- package/dist/cdn/components/topic-map.js +3 -3
- package/dist/cdn/components/traceability-matrix.js +3 -0
- package/dist/cdn/components/trust-filter.js +3 -3
- package/dist/cdn/components/type-specimen.js +15 -15
- package/dist/cdn/components/user-journey.js +63 -70
- package/dist/cdn/components/user-persona.js +75 -13
- package/dist/cdn/components/user-story.js +12 -11
- package/dist/cdn/components/version-switcher.js +17 -0
- package/dist/cdn/components/video-player.js +3 -3
- package/dist/cdn/components/watch-wc.js +2 -2
- package/dist/cdn/components/week-view.js +1 -1
- package/dist/cdn/components/work-item.js +29 -28
- package/dist/cdn/components/youtube-player.js +1 -1
- package/dist/cdn/icons/bold.css +17 -0
- package/dist/cdn/icons/bold.json +1 -0
- package/dist/cdn/icons/custom.css +6 -0
- package/dist/cdn/icons/custom.json +1 -0
- package/dist/cdn/icons/lucide.css +1914 -0
- package/dist/cdn/icons/lucide.json +1 -0
- package/dist/cdn/icons/mage.css +17 -0
- package/dist/cdn/icons/mage.json +1 -0
- package/dist/cdn/icons/phosphor.css +17 -0
- package/dist/cdn/icons/phosphor.json +1 -0
- package/dist/cdn/icons/tabler.css +17 -0
- package/dist/cdn/icons/tabler.json +1 -0
- package/dist/cdn/packs/design-system.full.js +59 -51
- package/dist/cdn/packs/effects.full.js +1 -1
- package/dist/cdn/packs/icons.effects.js +1 -1
- package/dist/cdn/packs/icons.full.js +1 -1
- package/dist/cdn/packs/kawaii.full.css +1 -1
- package/dist/cdn/packs/kawaii.full.js +6 -6
- package/dist/cdn/packs/kawaii.theme.css +1 -1
- package/dist/cdn/packs/manifest.json +11 -11
- package/dist/cdn/packs/ui.full.css +1 -1
- package/dist/cdn/packs/ui.full.js +54 -51
- package/dist/cdn/packs/ux-planning.full.css +1 -1
- package/dist/cdn/packs/ux-planning.full.js +318 -243
- package/dist/cdn/themes/8bit.css +1 -1
- package/dist/cdn/themes/8bit.tokens.json +662 -0
- package/dist/cdn/themes/alpha1999-dark.tokens.json +693 -0
- package/dist/cdn/themes/alpha1999.css +1 -1
- package/dist/cdn/themes/alpha1999.tokens.json +869 -0
- package/dist/cdn/themes/anthropic.css +2 -0
- package/dist/cdn/themes/anthropic.tokens.json +564 -0
- package/dist/cdn/themes/art-deco-dark.tokens.json +407 -0
- package/dist/cdn/themes/art-deco.css +1 -1
- package/dist/cdn/themes/art-deco.tokens.json +581 -0
- package/dist/cdn/themes/bauhaus-dark.tokens.json +260 -0
- package/dist/cdn/themes/bauhaus.css +1 -1
- package/dist/cdn/themes/bauhaus.tokens.json +589 -0
- package/dist/cdn/themes/brutalist-dark.tokens.json +503 -0
- package/dist/cdn/themes/brutalist.tokens.json +677 -0
- package/dist/cdn/themes/catalog/atlassian.tokens.json +303 -0
- package/dist/cdn/themes/catalog/bootstrap.tokens.json +304 -0
- package/dist/cdn/themes/catalog/carbon.tokens.json +301 -0
- package/dist/cdn/themes/catalog/catppuccin-mocha.tokens.json +301 -0
- package/dist/cdn/themes/catalog/govuk.tokens.json +301 -0
- package/dist/cdn/themes/catalog/manifest.json +132 -0
- package/dist/cdn/themes/catalog/material.tokens.json +289 -0
- package/dist/cdn/themes/catalog/salesforce.tokens.json +301 -0
- package/dist/cdn/themes/catalog/tailwind.tokens.json +302 -0
- package/dist/cdn/themes/catppuccin-frappe.css +1 -1
- package/dist/cdn/themes/catppuccin-frappe.tokens.json +608 -0
- package/dist/cdn/themes/catppuccin-latte-dark.tokens.json +472 -0
- package/dist/cdn/themes/catppuccin-latte.css +1 -1
- package/dist/cdn/themes/catppuccin-latte.tokens.json +608 -0
- package/dist/cdn/themes/catppuccin-macchiato.css +1 -1
- package/dist/cdn/themes/catppuccin-macchiato.tokens.json +608 -0
- package/dist/cdn/themes/catppuccin-mocha.tokens.json +608 -0
- package/dist/cdn/themes/classic-dark.tokens.json +503 -0
- package/dist/cdn/themes/classic.tokens.json +640 -0
- package/dist/cdn/themes/claymorphism-dark.tokens.json +493 -0
- package/dist/cdn/themes/claymorphism.css +1 -1
- package/dist/cdn/themes/claymorphism.tokens.json +626 -0
- package/dist/cdn/themes/clinical-dark.tokens.json +472 -0
- package/dist/cdn/themes/clinical.tokens.json +608 -0
- package/dist/cdn/themes/cottagecore-dark.tokens.json +412 -0
- package/dist/cdn/themes/cottagecore.css +1 -1
- package/dist/cdn/themes/cottagecore.tokens.json +544 -0
- package/dist/cdn/themes/cyber.tokens.json +668 -0
- package/dist/cdn/themes/dawn-dark.tokens.json +472 -0
- package/dist/cdn/themes/dawn.css +1 -1
- package/dist/cdn/themes/dawn.tokens.json +608 -0
- package/dist/cdn/themes/dracula.tokens.json +534 -0
- package/dist/cdn/themes/dusk.tokens.json +533 -0
- package/dist/cdn/themes/editorial-dark.tokens.json +400 -0
- package/dist/cdn/themes/editorial.tokens.json +690 -0
- package/dist/cdn/themes/financial-dark.tokens.json +472 -0
- package/dist/cdn/themes/financial.css +1 -1
- package/dist/cdn/themes/financial.tokens.json +607 -0
- package/dist/cdn/themes/genai.tokens.json +534 -0
- package/dist/cdn/themes/glassmorphism-dark.tokens.json +489 -0
- package/dist/cdn/themes/glassmorphism.css +1 -1
- package/dist/cdn/themes/glassmorphism.tokens.json +632 -0
- package/dist/cdn/themes/government-dark.tokens.json +472 -0
- package/dist/cdn/themes/government.tokens.json +608 -0
- package/dist/cdn/themes/gruvbox-dark.tokens.json +472 -0
- package/dist/cdn/themes/gruvbox.tokens.json +608 -0
- package/dist/cdn/themes/high-noon-dark.tokens.json +397 -0
- package/dist/cdn/themes/high-noon.tokens.json +533 -0
- package/dist/cdn/themes/ibm.css +2 -0
- package/dist/cdn/themes/ibm.tokens.json +568 -0
- package/dist/cdn/themes/kawaii-dark.tokens.json +549 -0
- package/dist/cdn/themes/kawaii.css +1 -1
- package/dist/cdn/themes/kawaii.tokens.json +641 -0
- package/dist/cdn/themes/magna-dark.tokens.json +482 -0
- package/dist/cdn/themes/magna.css +1 -1
- package/dist/cdn/themes/magna.tokens.json +632 -0
- package/dist/cdn/themes/manifest.json +162 -62
- package/dist/cdn/themes/mcdonalds.css +2 -0
- package/dist/cdn/themes/mcdonalds.tokens.json +533 -0
- package/dist/cdn/themes/midnight.tokens.json +534 -0
- package/dist/cdn/themes/minimal-dark.tokens.json +294 -0
- package/dist/cdn/themes/minimal.tokens.json +494 -0
- package/dist/cdn/themes/modern-dark.tokens.json +490 -0
- package/dist/cdn/themes/modern.tokens.json +573 -0
- package/dist/cdn/themes/nes-dark.tokens.json +564 -0
- package/dist/cdn/themes/nes.css +1 -1
- package/dist/cdn/themes/nes.tokens.json +687 -0
- package/dist/cdn/themes/neumorphism-dark.tokens.json +471 -0
- package/dist/cdn/themes/neumorphism.css +1 -1
- package/dist/cdn/themes/neumorphism.tokens.json +589 -0
- package/dist/cdn/themes/nord-dark.tokens.json +484 -0
- package/dist/cdn/themes/nord.tokens.json +619 -0
- package/dist/cdn/themes/organic-dark.tokens.json +532 -0
- package/dist/cdn/themes/organic.tokens.json +685 -0
- package/dist/cdn/themes/rose-pine-dark.tokens.json +472 -0
- package/dist/cdn/themes/rose-pine.tokens.json +608 -0
- package/dist/cdn/themes/rough-dark.tokens.json +515 -0
- package/dist/cdn/themes/rough.css +1 -1
- package/dist/cdn/themes/rough.tokens.json +650 -0
- package/dist/cdn/themes/solarized-dark.tokens.json +397 -0
- package/dist/cdn/themes/solarized.tokens.json +532 -0
- package/dist/cdn/themes/starbucks.css +2 -0
- package/dist/cdn/themes/starbucks.tokens.json +593 -0
- package/dist/cdn/themes/startup-dark.tokens.json +522 -0
- package/dist/cdn/themes/startup.css +1 -1
- package/dist/cdn/themes/startup.tokens.json +607 -0
- package/dist/cdn/themes/super2026-dark.tokens.json +667 -0
- package/dist/cdn/themes/super2026.tokens.json +863 -0
- package/dist/cdn/themes/swiss-dark.tokens.json +390 -0
- package/dist/cdn/themes/swiss.tokens.json +750 -0
- package/dist/cdn/themes/terminal.css +1 -1
- package/dist/cdn/themes/terminal.tokens.json +689 -0
- package/dist/cdn/themes/tokyo-night-dark.tokens.json +472 -0
- package/dist/cdn/themes/tokyo-night.tokens.json +608 -0
- package/dist/cdn/themes/vaporwave-dark.tokens.json +413 -0
- package/dist/cdn/themes/vaporwave.tokens.json +549 -0
- package/dist/cdn/themes/win9x-dark.tokens.json +563 -0
- package/dist/cdn/themes/win9x.tokens.json +700 -0
- package/dist/cdn/vanilla-breeze-charts.css +1 -1
- package/dist/cdn/vanilla-breeze-charts.js +58 -36
- package/dist/cdn/vanilla-breeze-core.css +1 -1
- package/dist/cdn/vanilla-breeze-core.js +246 -51
- package/dist/cdn/vanilla-breeze-dev.js +1 -1
- package/dist/cdn/vanilla-breeze-extras.js +90 -80
- package/dist/cdn/vanilla-breeze.css +1 -1
- package/dist/cdn/vanilla-breeze.js +1370 -405
- package/package.json +12 -4
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
2
|
-
`);v.replaceSync(t),document.adoptedStyleSheets=[...document.adoptedStyleSheets,v],w=1}function Q(){w--,w<=0&&v&&(document.adoptedStyleSheets=document.adoptedStyleSheets.filter(s=>s!==v),v=null,w=0)}var d=null,x=null;function Z(){return d||(d=document.createElement("div"),d.className="hn-toolbar",d.setAttribute("role","toolbar"),d.setAttribute("aria-label","Highlight tools"),d.setAttribute("popover","auto"),d.hidden=!0,document.body.appendChild(d),d.addEventListener("toggle",s=>{s.newState==="closed"&&(d.hidden=!0,x=null)}),d)}function L(s,t,e){let n=Z();n.innerHTML="",x=t;let i=t.colors,o=t.element,r=e?.color,h=document.createElement("div");if(h.className="hn-swatches",h.setAttribute("role","group"),h.setAttribute("aria-label","Highlight colors"),i.forEach((a,l)=>{let c=document.createElement("button");c.type="button",c.className="hn-swatch",c.dataset.color=a,c.setAttribute("aria-label",`Highlight ${a}${r===a?" (current)":""}`),c.setAttribute("tabindex",l===0?"0":"-1");let f=W(o,a);f&&(c.style.backgroundColor=f),r===a&&c.setAttribute("aria-pressed","true"),c.addEventListener("click",()=>{e?t._changeColor(e.id,a):t._createFromSelection(a),A()}),h.appendChild(c)}),n.appendChild(h),e){let a=document.createElement("span");a.className="hn-separator",a.setAttribute("aria-hidden","true"),n.appendChild(a);let l=document.createElement("button");l.type="button",l.className="hn-action",l.textContent=e.note?"Edit Note":"Add Note",l.addEventListener("click",()=>{X(t,e),A()}),n.appendChild(l);let c=document.createElement("button");c.type="button",c.className="hn-action hn-action-remove",c.textContent="Remove",c.addEventListener("click",()=>{t.removeHighlight(e.id),A()}),n.appendChild(c)}h.addEventListener("keydown",a=>{let l=[...h.querySelectorAll("button")],c=l.indexOf(document.activeElement);if(c<0)return;let f=-1;if(a.key==="ArrowRight"||a.key==="ArrowDown")a.preventDefault(),f=(c+1)%l.length;else if(a.key==="ArrowLeft"||a.key==="ArrowUp")a.preventDefault(),f=(c-1+l.length)%l.length;else if(a.key==="Escape"){A();return}f>=0&&(l[c].setAttribute("tabindex","-1"),l[f].setAttribute("tabindex","0"),l[f].focus())}),n.hidden=!1;try{n.showPopover()}catch{}tt(s),requestAnimationFrame(()=>{let a=n.querySelector(".hn-swatch");a&&a.focus()})}var u=null;function X(s,t){y();let e=s.element,n=b(e,t.startOffset,t.endOffset);if(!n)return;u=document.createElement("div"),u.className="hn-note-panel",u.setAttribute("role","dialog"),u.setAttribute("aria-label","Private note");let i=document.createElement("header");i.className="hn-note-header",i.innerHTML="<small>PRIVATE NOTE</small>",u.appendChild(i);let o=document.createElement("blockquote");o.className="hn-note-quote",o.textContent=t.text.length>80?t.text.slice(0,80)+"\u2026":t.text,u.appendChild(o);let r=document.createElement("textarea");r.className="hn-note-textarea",r.placeholder="Add a note\u2026",r.value=t.note||"",r.rows=3,r.setAttribute("aria-label","Note for highlighted text"),u.appendChild(r);let h=document.createElement("footer");h.className="hn-note-actions";let a=document.createElement("button");a.type="button",a.className="hn-action hn-action-save",a.textContent="Save",a.addEventListener("click",()=>{s._updateNote(t.id,r.value.trim()),y()});let l=document.createElement("button");l.type="button",l.className="hn-action",l.textContent="Cancel",l.addEventListener("click",()=>y()),h.append(a,l),u.appendChild(h),r.addEventListener("keydown",m=>{m.key==="Escape"&&(m.preventDefault(),y()),m.key==="Enter"&&(m.metaKey||m.ctrlKey)&&(m.preventDefault(),s._updateNote(t.id,r.value.trim()),y())}),e.style.position="relative",e.appendChild(u);let c=n.getClientRects()[0],f=e.getBoundingClientRect();if(c){let m=c.top-f.top;u.style.top=`${m}px`}requestAnimationFrame(()=>{r.focus(),document.addEventListener("pointerdown",K)})}function K(s){u&&!u.contains(s.target)&&y()}function y(){u&&(document.removeEventListener("pointerdown",K),u.remove(),u=null)}function tt(s){d&&requestAnimationFrame(()=>{let t=d.getBoundingClientRect(),e=t.width||200,n=t.height||40,i=s.top-n-D,o=s.left+s.width/2-e/2;i<O&&(i=s.bottom+D);let r=window.innerWidth-e-O;o=Math.max(O,Math.min(o,r)),d.style.top=`${i}px`,d.style.left=`${o}px`})}function A(){if(d){try{d.hidePopover()}catch{}d.hidden=!0,x=null}}var p=null;function R(s){p||(p=document.createElement("div"),p.setAttribute("aria-live","polite"),p.setAttribute("aria-atomic","true"),p.className="hn-sr-only",document.body.appendChild(p)),p.textContent="",requestAnimationFrame(()=>{p.textContent=s})}function V(s,t,e){let n=document.createTreeWalker(s,NodeFilter.SHOW_TEXT),i=0;for(;n.nextNode();){if(n.currentNode===t)return i+e;i+=(n.currentNode.textContent??"").length}return-1}function b(s,t,e){let n=document.createTreeWalker(s,NodeFilter.SHOW_TEXT),i=0,o=null,r=0,h=null,a=0;for(;n.nextNode();){let l=n.currentNode,c=(l.textContent??"").length;if(!o&&i+c>t&&(o=l,r=t-i),i+c>=e){h=l,a=e-i;break}i+=c}if(!o||!h)return null;try{let l=document.createRange();return l.setStart(o,Math.min(r,(o.textContent??"").length)),l.setEnd(h,Math.min(a,(h.textContent??"").length)),l}catch{return null}}var B=class{#t;#s;#i;#n;#e=[];#a=!J;#l;#c;#h=!1;#d=[];constructor(t){this.#t=t,this.#n=t.hasAttribute("data-highlights-readonly");let e=t.dataset.highlights;this.#s=e&&e!==""?e:location.pathname;let n=t.dataset.highlightsColors;this.#i=n?n.split(",").map(i=>i.trim()).filter(Boolean):[...j],this.#a||Y(this.#i),this.#r(),this.#n||(this.#l=this.#m.bind(this),this.#c=this.#p.bind(this),t.addEventListener("pointerup",this.#l),t.addEventListener("click",this.#c)),t.setAttribute("data-highlights-init",""),this.#y().then(()=>{this.#h||this.#r()})}get colors(){return[...this.#i]}get element(){return this.#t}getHighlights(){return this.#e.map(t=>({...t}))}removeHighlight(t){let e=this.#e.findIndex(n=>n.id===t);e<0||(this.#e.splice(e,1),this.#o(),this.#r(),this.#u("highlights:removed",{id:t}),R("Highlight removed"))}clearAll(){this.#e=[],this.#o(),this.#r()}exportHighlights(){return JSON.stringify({version:1,highlights:this.#e})}importHighlights(t){try{let e=typeof t=="string"?JSON.parse(t):t;if(!e.highlights||!Array.isArray(e.highlights))return;this.#e=e.highlights,this.#o(),this.#r()}catch{}}destroy(){if(!this.#h){if(this.#h=!0,this.#l&&this.#t.removeEventListener("pointerup",this.#l),this.#c&&this.#t.removeEventListener("click",this.#c),this.#a)this.#t.querySelectorAll("mark[data-hn-id]").forEach(t=>{let e=t.parentNode;for(;t.firstChild;)e.insertBefore(t.firstChild,t);e.removeChild(t),e.normalize()});else{for(let t of this.#i)CSS.highlights.delete(`hn-${t}`);Q()}this.#f(),this.#t.removeAttribute("data-highlights-init"),x===this&&A(),y()}}#m(){requestAnimationFrame(()=>{if(this.#h||this.#t.hasAttribute("data-selection-menu"))return;let t=window.getSelection();if(!t||t.isCollapsed||!t.toString().trim())return;let e=t.getRangeAt(0);if(!this.#t.contains(e.commonAncestorContainer))return;let n=e.getBoundingClientRect();L(n,this,null)})}#p(t){if(this.#t.hasAttribute("data-selection-menu"))return;let e=t.target.closest?.(".hn-margin-annotation");if(e){let i=e.dataset.hnId,o=this.#e.find(r=>r.id===i);if(o){X(this,o);return}}let n=t.target.closest?.("mark[data-hn-id]");if(n){let i=n.dataset.hnId,o=this.#e.find(r=>r.id===i);if(o){this.#u("highlights:clicked",{id:i});let r=n.getBoundingClientRect();L(r,this,o);return}}if(!this.#a){let i=this.#b(t.clientX,t.clientY);if(i){this.#u("highlights:clicked",{id:i.id});let o=b(this.#t,i.startOffset,i.endOffset);o&&L(o.getBoundingClientRect(),this,i)}}}#b(t,e){for(let n of this.#e){let i=b(this.#t,n.startOffset,n.endOffset);if(!i)continue;let o=i.getClientRects();for(let r of o)if(t>=r.left&&t<=r.right&&e>=r.top&&e<=r.bottom)return n}return null}_createFromSelection(t){let e=window.getSelection();if(!e||e.isCollapsed)return;let n=e.getRangeAt(0);if(!this.#t.contains(n.commonAncestorContainer))return;let i=V(this.#t,n.startContainer,n.startOffset),o=V(this.#t,n.endContainer,n.endOffset);if(i<0||o<0||i>=o)return;let r=e.toString().trim(),h={id:z(),startOffset:i,endOffset:o,text:r,color:t,note:"",created:Date.now()};this.#e.push(h),this.#o(),this.#r(),e.removeAllRanges(),this.#u("highlights:added",{id:h.id,text:r,color:t,note:""}),R("Highlight added")}_changeColor(t,e){let n=this.#e.find(i=>i.id===t);n&&(n.color=e,this.#o(),this.#r())}_updateNote(t,e){let n=this.#e.find(i=>i.id===t);n&&(n.note=e,this.#o(),this.#g(),this.#u("highlights:note-changed",{id:t,note:e}),R("Note saved"))}async#y(){let t=await k.get(q,this.#s);if(!t||!Array.isArray(t.highlights))return;let e=_(this.#t.textContent);t.contentHash&&t.contentHash!==e?(this.#e=t.highlights.filter(n=>{let i=b(this.#t,n.startOffset,n.endOffset);return i?i.toString().trim()===n.text:!1}),this.#o()):this.#e=t.highlights}#o(){let t={version:1,contentHash:_(this.#t.textContent),highlights:this.#e};k.set(q,this.#s,t).catch(()=>{})}#r(){this.#a?this.#E():this.#v(),this.#g()}#v(){let t=new Map;for(let e of this.#i)t.set(e,[]);for(let e of this.#e){let n=b(this.#t,e.startOffset,e.endOffset);n&&t.has(e.color)&&t.get(e.color).push(n)}for(let[e,n]of t){let i=`hn-${e}`;n.length===0?CSS.highlights.delete(i):CSS.highlights.set(i,new Highlight(...n))}}#E(){this.#t.querySelectorAll("mark[data-hn-id]").forEach(e=>{let n=e.parentNode;for(;e.firstChild;)n.insertBefore(e.firstChild,e);n.removeChild(e)}),this.#t.normalize();let t=[...this.#e].sort((e,n)=>n.startOffset-e.startOffset);for(let e of t){let n=b(this.#t,e.startOffset,e.endOffset);if(!n)continue;let i=W(this.#t,e.color),o=document.createElement("mark");o.dataset.hnId=e.id,o.dataset.hnColor=e.color,i&&(o.style.backgroundColor=i,o.style.textDecorationColor=i);try{n.surroundContents(o)}catch{let r=n.extractContents();o.appendChild(r),n.insertNode(o)}}}#f(){for(let t of this.#d)t.remove();this.#d=[]}#g(){if(this.#f(),this.#e.length===0)return;getComputedStyle(this.#t).position==="static"&&(this.#t.style.position="relative");for(let e of this.#e){let n=b(this.#t,e.startOffset,e.endOffset);if(!n)continue;let i=n.getClientRects();if(i.length===0)continue;let o=i[0],r=this.#t.getBoundingClientRect(),h=o.top-r.top,a=document.createElement("span");a.className="hn-margin-annotation",a.dataset.hnId=e.id,a.setAttribute("aria-hidden","true"),a.style.top=`${h}px`,e.note?(a.innerHTML='<span class="hn-note-indicator">*</span> You highlighted',a.classList.add("hn-has-note")):a.textContent="You highlighted",this.#t.appendChild(a),this.#d.push(a)}}#u(t,e={}){this.#t.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0}))}},T=new WeakMap;function E(s){if(T.has(s))return T.get(s);let t=new B(s);return T.set(s,t),t}function U(s=document){s.querySelectorAll($).forEach(t=>{t.hasAttribute("data-highlights-init")||E(t)})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>U()):U();var et=new MutationObserver(s=>{for(let t of s)for(let e of t.addedNodes){if(e.nodeType!==Node.ELEMENT_NODE)continue;let n=e;n.matches($)&&E(n),n.querySelectorAll($).forEach(i=>{i.hasAttribute("data-highlights-init")||E(i)})}});et.observe(document.documentElement,{childList:!0,subtree:!0});var nt=["yellow","green","blue","pink"],H=class extends C{#t=null;#s="yellow";#i=!1;#n=null;setup(){this.#i=!!this.closest("selection-menu"),this.#i?this.#e():this.#c()}teardown(){this.#t?.destroy(),this.#t=null,this.#n?.remove(),this.#n=null}#e(){let t=this.#d(),e=document.createElement("button");e.type="button",e.setAttribute("aria-label","Highlight selection");let n=document.createElement("icon-wc");n.setAttribute("name","highlighter"),n.setAttribute("size","sm"),n.setAttribute("aria-hidden","true"),e.appendChild(n),e.addEventListener("click",i=>{i.stopPropagation(),this.#a()}),this.appendChild(e),this.#n=document.createElement("div"),this.#n.className="highlight-color-dropdown",this.#n.setAttribute("role","group"),this.#n.setAttribute("aria-label","Highlight color"),this.#n.hidden=!0,t.forEach(i=>{let o=document.createElement("button");o.type="button",o.className="highlight-color-swatch",o.dataset.color=i,o.setAttribute("aria-label",`${i}`),o.setAttribute("aria-pressed",i===this.#s?"true":"false"),o.style.backgroundColor=`var(--highlight-${i})`,o.addEventListener("click",r=>{r.stopPropagation(),this.#s=i,this.#n.querySelectorAll(".highlight-color-swatch").forEach(h=>h.setAttribute("aria-pressed",h.dataset.color===i?"true":"false")),this.#n.hidden=!0,this.#l()}),this.#n.appendChild(o)}),this.appendChild(this.#n)}#a(){this.#n&&(this.#n.hidden=!this.#n.hidden)}#l(){let t=this.closest("selection-menu");if(!t)return;let e=t.getSelection();if(!e)return;let n=e.target;if(n.hasAttribute("data-highlights-init"))this.#t||(this.#t=E(n));else{let i=this.getAttribute("storage-key")||"";n.setAttribute("data-highlights",i),this.hasAttribute("colors")&&n.setAttribute("data-highlights-colors",this.getAttribute("colors")),this.#t=E(n)}this.#t._createFromSelection(this.#s),t.dismiss()}#c(){let t=this.#h();if(!t)return!1;let e=this.getAttribute("storage-key")||"";t.setAttribute("data-highlights",e),this.hasAttribute("colors")&&t.setAttribute("data-highlights-colors",this.getAttribute("colors")),this.hasAttribute("readonly")&&t.setAttribute("data-highlights-readonly",""),this.#t=E(t)}#h(){let t=this.getAttribute("for");return t?document.getElementById(t):this.firstElementChild}#d(){let t=this.getAttribute("colors");return t?t.split(",").map(e=>e.trim()).filter(Boolean):[...nt]}getHighlights(){return this.#t?.getHighlights()??[]}removeHighlight(t){this.#t?.removeHighlight(t)}clearAll(){this.#t?.clearAll()}exportHighlights(){return this.#t?.exportHighlights()??'{"version":1,"highlights":[]}'}importHighlights(t){this.#t?.importHighlights(t)}};P("highlight-wc",H);
|
|
1
|
+
var p=class extends HTMLElement{#t=[];#n;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,n){t.addEventListener(e,i,n),this.#t.push(()=>t.removeEventListener(e,i,n))}setup(){}teardown(){}setState(t,e){this.#n||(this.#n=this.attachInternals());let i=this.#n.states;try{e?i.add(t):i.delete(t)}catch{let n=`--${t}`;e?i.add(n):i.delete(n)}}_adoptInternals(t){this.#n||(this.#n=t)}};var U=window.matchMedia("(prefers-reduced-motion: reduce)");var x=new Map;function O(s,t,e={}){let i=e.priority??10,n={impl:t,bundle:e.bundle,contract:e.contract,priority:i},r=x.get(s);if(customElements.get(s)){if(!r||r.priority>=i){r&&r.priority===i&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${s}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=i){r.priority===i&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}x.set(s,n),customElements.define(s,t)}function M(){let s=globalThis.localStorage;if(!s)throw new Error("VBStore: localStorage is not available in this environment");return{async getRaw(t){return s.getItem(t)},async setRaw(t,e){s.setItem(t,e)},async removeRaw(t){s.removeItem(t)},async keys(t){let e=[];for(let i=0;i<s.length;i++){let n=s.key(i);n&&n.startsWith(t)&&e.push(n)}return e}}}var y=null;function l(){return y||(y=M()),y}function A(s,t){if(typeof s!="string"||!s)throw new TypeError("VBStore: namespace must be a non-empty string");if(typeof t!="string"||!t)throw new TypeError("VBStore: key must be a non-empty string");return`vb:${s}:${t}`}function N(s){if(typeof s!="string"||!s)throw new TypeError("VBStore: namespace must be a non-empty string");return`vb:${s}:`}function R(s){try{let t=JSON.parse(s);if(t&&typeof t=="object"&&typeof t.timestamp=="number")return t}catch{}return null}var b={configure(s={}){y=s.backend??null},async set(s,t,e){let i={data:e,timestamp:Date.now()};await l().setRaw(A(s,t),JSON.stringify(i))},async get(s,t,e){let i=await l().getRaw(A(s,t));if(i==null)return null;let n=R(i);return!n||e?.maxAge!=null&&Date.now()-n.timestamp>e.maxAge?null:n.data},async remove(s,t){await l().removeRaw(A(s,t))},async list(s){let t=N(s),e=await l().keys(t),i=[];for(let n of e){let r=await l().getRaw(n);if(r==null)continue;let o=R(r);o&&i.push({key:n.slice(t.length),data:o.data,timestamp:o.timestamp})}return i},async clear(s){let t=N(s),e=await l().keys(t);for(let i of e)await l().removeRaw(i)},async clearAll(){let s=await l().keys("vb:");for(let t of s)await l().removeRaw(t)},async setMany(s,t){for(let[e,i]of t)await b.set(s,e,i)}};var v="[data-highlights]",H="highlights",B=["yellow","green","blue","pink"];var I=typeof CSS<"u"&&"highlights"in CSS;function $(s){let t=2166136261;for(let e=0;e<s.length;e++)t^=s.charCodeAt(e),t=Math.imul(t,16777619);return(t>>>0).toString(36)}function F(){return"hn-"+crypto.randomUUID().slice(0,8)}function P(s,t){return getComputedStyle(s).getPropertyValue(`--highlight-${t}`).trim()}var u=null,m=0;function _(s){if(u){m++;return}u=new CSSStyleSheet;let t=s.map(e=>`::highlight(hn-${e}) { background-color: var(--highlight-${e}); text-decoration-line: underline; text-decoration-color: var(--highlight-${e}); text-underline-offset: 2px; }`).join(`
|
|
2
|
+
`);u.replaceSync(t),document.adoptedStyleSheets=[...document.adoptedStyleSheets,u],m=1}function q(){m--,m<=0&&u&&(document.adoptedStyleSheets=document.adoptedStyleSheets.filter(s=>s!==u),u=null,m=0)}var c=null;function w(s){c||(c=document.createElement("div"),c.setAttribute("aria-live","polite"),c.setAttribute("aria-atomic","true"),c.className="hn-sr-only",document.body.appendChild(c)),c.textContent="",requestAnimationFrame(()=>{c.textContent=s})}function T(s,t,e){let i=document.createTreeWalker(s,NodeFilter.SHOW_TEXT),n=0;for(;i.nextNode();){if(i.currentNode===t)return n+e;n+=(i.currentNode.textContent??"").length}return-1}function g(s,t,e){let i=document.createTreeWalker(s,NodeFilter.SHOW_TEXT),n=0,r=null,o=0,a=null,h=0;for(;i.nextNode();){let d=i.currentNode,S=(d.textContent??"").length;if(!r&&n+S>t&&(r=d,o=t-n),n+S>=e){a=d,h=e-n;break}n+=S}if(!r||!a)return null;try{let d=document.createRange();return d.setStart(r,Math.min(o,(r.textContent??"").length)),d.setEnd(a,Math.min(h,(a.textContent??"").length)),d}catch{return null}}var C=class{#t;#n;#s;#i;#e=[];#a=!I;#l;#c;#d=!1;#u=[];constructor(t){this.#t=t,this.#i=t.hasAttribute("data-highlights-readonly");let e=t.dataset.highlights;this.#n=e&&e!==""?e:location.pathname;let i=t.dataset.highlightsColors;this.#s=i?i.split(",").map(n=>n.trim()).filter(Boolean):[...B],this.#a||_(this.#s),this.#h(),this.#i||(this.#l=this.#m.bind(this),this.#c=this.#p.bind(this),t.addEventListener("pointerup",this.#l),t.addEventListener("click",this.#c)),t.setAttribute("data-highlights-init",""),this.#b().then(()=>{this.#d||this.#h()})}get colors(){return[...this.#s]}get element(){return this.#t}getHighlights(){return this.#e.map(t=>({...t}))}removeHighlight(t){let e=this.#e.findIndex(i=>i.id===t);e<0||(this.#e.splice(e,1),this.#o(),this.#h(),this.#r("highlights:removed",{id:t}),w("Highlight removed"))}clearAll(){this.#e=[],this.#o(),this.#h()}exportHighlights(){return JSON.stringify({version:1,highlights:this.#e})}importHighlights(t){try{let e=typeof t=="string"?JSON.parse(t):t;if(!e.highlights||!Array.isArray(e.highlights))return;this.#e=e.highlights,this.#o(),this.#h()}catch{}}destroy(){if(!this.#d){if(this.#d=!0,this.#l&&this.#t.removeEventListener("pointerup",this.#l),this.#c&&this.#t.removeEventListener("click",this.#c),this.#a)this.#t.querySelectorAll("mark[data-hn-id]").forEach(t=>{let e=t.parentNode;for(;t.firstChild;)e.insertBefore(t.firstChild,t);e.removeChild(t),e.normalize()});else{for(let t of this.#s)CSS.highlights.delete(`hn-${t}`);q()}this.#f(),this.#t.removeAttribute("data-highlights-init")}}#m(){requestAnimationFrame(()=>{if(this.#d)return;let t=window.getSelection();if(!t||t.isCollapsed||!t.toString().trim())return;let e=t.getRangeAt(0);this.#t.contains(e.commonAncestorContainer)&&this.#r("highlights:selected",{text:t.toString().trim(),rect:e.getBoundingClientRect()})})}#p(t){let e=t.target.closest?.(".hn-margin-annotation");if(e){let n=e.dataset.hnId,r=this.#e.find(o=>o.id===n);if(r){this.#r("highlights:clicked",{id:n,highlight:{...r}}),this.#r("highlights:request-note",{id:n,highlight:{...r},controller:this});return}}let i=t.target.closest?.("mark[data-hn-id]");if(i){let n=i.dataset.hnId,r=this.#e.find(o=>o.id===n);if(r){this.#r("highlights:clicked",{id:n,highlight:{...r}});return}}if(!this.#a){let n=this.#y(t.clientX,t.clientY);n&&this.#r("highlights:clicked",{id:n.id,highlight:{...n}})}}findHighlightRect(t){let e=this.#e.find(r=>r.id===t);if(!e)return null;let i=g(this.#t,e.startOffset,e.endOffset);if(!i)return null;let n=i.getClientRects();return n.length?n[0]:null}#y(t,e){for(let i of this.#e){let n=g(this.#t,i.startOffset,i.endOffset);if(!n)continue;let r=n.getClientRects();for(let o of r)if(t>=o.left&&t<=o.right&&e>=o.top&&e<=o.bottom)return i}return null}_createFromSelection(t){let e=window.getSelection();if(!e||e.isCollapsed)return;let i=e.getRangeAt(0);if(!this.#t.contains(i.commonAncestorContainer))return;let n=T(this.#t,i.startContainer,i.startOffset),r=T(this.#t,i.endContainer,i.endOffset);if(n<0||r<0||n>=r)return;let o=e.toString().trim(),a={id:F(),startOffset:n,endOffset:r,text:o,color:t,note:"",created:Date.now()};this.#e.push(a),this.#o(),this.#h(),e.removeAllRanges(),this.#r("highlights:added",{id:a.id,text:o,color:t,note:""}),w("Highlight added")}_changeColor(t,e){let i=this.#e.find(n=>n.id===t);i&&(i.color=e,this.#o(),this.#h())}_updateNote(t,e){let i=this.#e.find(n=>n.id===t);i&&(i.note=e,this.#o(),this.#g(),this.#r("highlights:note-changed",{id:t,note:e}),w("Note saved"))}async#b(){let t=await b.get(H,this.#n);if(!t||!Array.isArray(t.highlights))return;let e=$(this.#t.textContent);t.contentHash&&t.contentHash!==e?(this.#e=t.highlights.filter(i=>{let n=g(this.#t,i.startOffset,i.endOffset);return n?n.toString().trim()===i.text:!1}),this.#o()):this.#e=t.highlights}#o(){let t={version:1,contentHash:$(this.#t.textContent),highlights:this.#e};b.set(H,this.#n,t).catch(()=>{})}#h(){this.#a?this.#A():this.#S(),this.#g()}#S(){let t=new Map;for(let e of this.#s)t.set(e,[]);for(let e of this.#e){let i=g(this.#t,e.startOffset,e.endOffset);i&&t.has(e.color)&&t.get(e.color).push(i)}for(let[e,i]of t){let n=`hn-${e}`;i.length===0?CSS.highlights.delete(n):CSS.highlights.set(n,new Highlight(...i))}}#A(){this.#t.querySelectorAll("mark[data-hn-id]").forEach(e=>{let i=e.parentNode;for(;e.firstChild;)i.insertBefore(e.firstChild,e);i.removeChild(e)}),this.#t.normalize();let t=[...this.#e].sort((e,i)=>i.startOffset-e.startOffset);for(let e of t){let i=g(this.#t,e.startOffset,e.endOffset);if(!i)continue;let n=P(this.#t,e.color),r=document.createElement("mark");r.dataset.hnId=e.id,r.dataset.hnColor=e.color,n&&(r.style.backgroundColor=n,r.style.textDecorationColor=n);try{i.surroundContents(r)}catch{let o=i.extractContents();r.appendChild(o),i.insertNode(r)}}}#f(){for(let t of this.#u)t.remove();this.#u=[]}#g(){if(this.#f(),this.#e.length===0)return;getComputedStyle(this.#t).position==="static"&&(this.#t.style.position="relative");for(let e of this.#e){let i=g(this.#t,e.startOffset,e.endOffset);if(!i)continue;let n=i.getClientRects();if(n.length===0)continue;let r=n[0],o=this.#t.getBoundingClientRect(),a=r.top-o.top,h=document.createElement("span");h.className="hn-margin-annotation",h.dataset.hnId=e.id,h.setAttribute("aria-hidden","true"),h.style.top=`${a}px`,e.note?(h.innerHTML='<span class="hn-note-indicator">*</span> You highlighted',h.classList.add("hn-has-note")):h.textContent="You highlighted",this.#t.appendChild(h),this.#u.push(h)}}#r(t,e={}){this.#t.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0}))}},E=new WeakMap;function f(s){if(E.has(s))return E.get(s);let t=new C(s);return E.set(s,t),t}function L(s=document){s.querySelectorAll(v).forEach(t=>{t.hasAttribute("data-highlights-init")||f(t)})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>L()):L();var D=new MutationObserver(s=>{for(let t of s)for(let e of t.addedNodes){if(e.nodeType!==Node.ELEMENT_NODE)continue;let i=e;i.matches(v)&&f(i),i.querySelectorAll(v).forEach(n=>{n.hasAttribute("data-highlights-init")||f(n)})}});D.observe(document.documentElement,{childList:!0,subtree:!0});var V=["yellow","green","blue","pink"],k=class extends p{#t=null;#n="yellow";#s=!1;#i=null;setup(){this.#s=!!this.closest("selection-menu"),this.#s?this.#e():this.#c()}teardown(){this.#t?.destroy(),this.#t=null,this.#i?.remove(),this.#i=null}#e(){let t=this.#u(),e=document.createElement("button");e.type="button",e.setAttribute("aria-label","Highlight selection");let i=document.createElement("icon-wc");i.setAttribute("name","highlighter"),i.setAttribute("size","sm"),i.setAttribute("aria-hidden","true"),e.appendChild(i),e.addEventListener("click",r=>{r.stopPropagation(),this.#a()}),this.appendChild(e),this.#i=document.createElement("div"),this.#i.className="highlight-color-dropdown",this.#i.setAttribute("role","group"),this.#i.setAttribute("aria-label","Highlight color"),this.#i.hidden=!0;let n=this.#i;t.forEach(r=>{let o=document.createElement("button");o.type="button",o.className="highlight-color-swatch",o.dataset.color=r,o.setAttribute("aria-label",`${r}`),o.setAttribute("aria-pressed",r===this.#n?"true":"false"),o.style.backgroundColor=`var(--highlight-${r})`,o.addEventListener("click",a=>{a.stopPropagation(),this.#n=r,n.querySelectorAll(".highlight-color-swatch").forEach(h=>h.setAttribute("aria-pressed",h.dataset.color===r?"true":"false")),n.hidden=!0,this.#l()}),n.appendChild(o)}),this.appendChild(n)}#a(){this.#i&&(this.#i.hidden=!this.#i.hidden)}#l(){let t=this.closest("selection-menu");if(!t)return;let e=t.getSelection?.();if(!e)return;let i=e.target;if(i.hasAttribute("data-highlights-init"))this.#t||(this.#t=f(i));else{let n=this.getAttribute("storage-key")||"";i.setAttribute("data-highlights",n),this.hasAttribute("colors")&&i.setAttribute("data-highlights-colors",this.getAttribute("colors")??""),this.#t=f(i)}this.#t?._createFromSelection(this.#n),t.dismiss?.()}#c(){let t=this.#d();if(!t)return!1;let e=this.getAttribute("storage-key")||"";return t.setAttribute("data-highlights",e),this.hasAttribute("colors")&&t.setAttribute("data-highlights-colors",this.getAttribute("colors")??""),this.hasAttribute("readonly")&&t.setAttribute("data-highlights-readonly",""),this.#t=f(t),!0}#d(){let t=this.getAttribute("for");return t?document.getElementById(t):this.firstElementChild}#u(){let t=this.getAttribute("colors");return t?t.split(",").map(e=>e.trim()).filter(Boolean):[...V]}getHighlights(){return this.#t?.getHighlights()??[]}removeHighlight(t){this.#t?.removeHighlight(t)}clearAll(){this.#t?.clearAll()}exportHighlights(){return this.#t?.exportHighlights()??'{"version":1,"highlights":[]}'}importHighlights(t){this.#t?.importHighlights(t)}};O("highlight-wc",k);
|
|
3
3
|
//# sourceMappingURL=highlight-wc.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var l=`
|
|
1
|
+
function u({basePath:o,set:n,name:e}){return`${o}/${n}/${e}.svg`}function h(o,n=document){let e=o.getAttribute("data-icon-set");if(e)return e;let t=o.closest("[data-icon-set]");return t?t.getAttribute("data-icon-set"):n.documentElement.dataset.iconSet||"lucide"}function m(o=document){return o.documentElement.dataset.iconPath||"/cdn/icons"}function l(o){let n=o.getAttribute("data-icon");if(!n){o.style.removeProperty("--vb-icon");return}let e=u({basePath:m(document),set:h(o,document),name:n});o.style.setProperty("--vb-icon",`url("${e}")`)}function a(o=document){for(let n of o.querySelectorAll("[data-icon]"))l(n)}var f=!1;function y(){if(f)return;f=!0,a(),new MutationObserver(n=>{for(let e of n)if(e.type==="attributes"){let t=e.target;t.hasAttribute&&t.hasAttribute("data-icon")&&l(t),e.attributeName==="data-icon-set"&&t.querySelectorAll&&a(t)}else for(let t of e.addedNodes){if(t.nodeType!==1)continue;let i=t;i.hasAttribute("data-icon")&&l(i),i.querySelectorAll&&a(i)}}).observe(document.documentElement,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["data-icon","data-icon-set"]})}typeof document<"u"&&y();var b=`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-flex;
|
|
4
4
|
align-items: center;
|
|
@@ -59,8 +59,8 @@ svg {
|
|
|
59
59
|
:host([hidden]) {
|
|
60
60
|
display: none;
|
|
61
61
|
}
|
|
62
|
-
`;var
|
|
63
|
-
<style>${
|
|
62
|
+
`;var A=window.matchMedia("(prefers-reduced-motion: reduce)");var g=new Map;function p(o,n,e={}){let t=e.priority??10,i={impl:n,bundle:e.bundle,contract:e.contract,priority:t},r=g.get(o);if(customElements.get(o)){if(!r||r.priority>=t){r&&r.priority===t&&r.impl!==n&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${o}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=t){r.priority===t&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}g.set(o,i),customElements.define(o,n)}var s=new Map,c=new Map,d=class o extends HTMLElement{static#e=new Set;static#t=null;static#o(){o.#t||(o.#t=new MutationObserver(n=>{for(let e of n)if(e.attributeName==="data-icon-set")for(let t of o.#e)t.hasAttribute("set")||(t.render(),t.loadIcon())}),o.#t?.observe(document.documentElement,{attributes:!0,attributeFilter:["data-icon-set"]}))}static get observedAttributes(){return["name","set","size","label"]}constructor(){super(),this.attachShadow({mode:"open"})}get name(){return this.getAttribute("name")||""}get set(){return this.getAttribute("set")||document.documentElement.dataset.iconSet||"lucide"}get size(){return this.getAttribute("size")||"md"}get label(){return this.getAttribute("label")}get basePath(){return this.getAttribute("base-path")||document.documentElement.dataset.iconPath||"/cdn/icons"}get iconPath(){return`${this.basePath}/${this.set}/${this.name}.svg`}render(){this.shadowRoot.innerHTML=`
|
|
63
|
+
<style>${b}</style>
|
|
64
64
|
<slot></slot>
|
|
65
|
-
`}async loadIcon(){if(!this.name){this.setError("No icon name specified");return}let
|
|
65
|
+
`}async loadIcon(){if(!this.name){this.setError("No icon name specified");return}let n=`${this.set}/${this.name}`;if(s.has(n)){this.displayIcon(s.get(n));return}try{let e=await this.#n(this.set,n);this.displayIcon(e)}catch(e){let t="lucide";if(this.set!==t){let i=`${t}/${this.name}`;if(s.has(i)){this.displayIcon(s.get(i));return}try{let r=await this.#n(t,i);this.displayIcon(r);return}catch{}}this.setError(e.message)}}async#n(n,e){return c.has(e)||c.set(e,this.#i(n).then(t=>(s.set(e,t),c.delete(e),t)).catch(t=>{throw c.delete(e),t})),c.get(e)}async#i(n){let e=`${this.basePath}/${n}/${this.name}.svg`,t=await fetch(e);if(!t.ok)throw new Error(`Icon not found: ${this.name}`);let i=await t.text();if(!i.includes("<svg"))throw new Error(`Invalid SVG: ${this.name}`);return i}displayIcon(n){let i=new DOMParser().parseFromString(n,"image/svg+xml").querySelector("svg");if(!i){this.setError("Invalid SVG content");return}i.removeAttribute("width"),i.removeAttribute("height"),this.label?(i.setAttribute("role","img"),i.setAttribute("aria-label",this.label)):i.setAttribute("aria-hidden","true"),this.removeAttribute("data-error");let r=this.shadowRoot?.querySelector("slot");r&&r.replaceWith(i)}setError(n){this.setAttribute("data-error","true"),console.warn(`icon-wc: ${n}`);let e=this.shadowRoot?.querySelector("slot");e&&(e.textContent="")}connectedCallback(){o.#e.add(this),o.#o(),this.render(),this.loadIcon(),this._onThemeChange=()=>{let n=this.shadowRoot?.querySelector("svg");n&&(n.style.stroke="none",requestAnimationFrame(()=>{n.style.stroke=""}))},window.addEventListener("vb:theme-change",this._onThemeChange),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded"),o.#e.delete(this),this._onThemeChange&&window.removeEventListener("vb:theme-change",this._onThemeChange)}attributeChangedCallback(n,e,t){if(e!==t&&this.isConnected){if(n==="name"||n==="set")this.render(),this.loadIcon();else if(n==="label"){let i=this.shadowRoot?.querySelector("svg");i&&(t?(i.setAttribute("role","img"),i.setAttribute("aria-label",t)):(i.removeAttribute("role"),i.setAttribute("aria-hidden","true")))}}}};p("icon-wc",d);export{d as IconWc};
|
|
66
66
|
//# sourceMappingURL=icon-wc.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var C=Object.defineProperty;var q=(t,e)=>()=>(t&&(e=t(t=0)),e);var Y=(t,e)=>{for(var i in e)C(t,i,{get:e[i],enumerable:!0})};var $={};Y($,{addDialogDismiss:()=>k,addLongPress:()=>N,addPullToRefresh:()=>B,addSwipeListener:()=>T,haptic:()=>g,initGestures:()=>P,makeSwipeable:()=>S});function T(t,e={}){let i=e.threshold??50,s=e.restraint??100,r=e.timeout??300,n,f,c;function a(l){l.isPrimary&&(n=l.clientX,f=l.clientY,c=Date.now())}function h(l){if(!l.isPrimary)return;let d=l.clientX-n,o=l.clientY-f,m=Date.now()-c;if(m>r)return;let v=Math.abs(d),u=Math.abs(o),p;if(v>=i&&u<=s?p=d<0?"left":"right":u>=i&&v<=s&&(p=o<0?"up":"down"),p){let y=p==="left"||p==="right"?v:u;t.dispatchEvent(new CustomEvent(`swipe-${p}`,{bubbles:!0,detail:{distance:y,duration:m}}))}}return t.addEventListener("pointerdown",a,{passive:!0}),t.addEventListener("pointerup",h,{passive:!0}),()=>{t.removeEventListener("pointerdown",a),t.removeEventListener("pointerup",h)}}function S(t,e={}){let i=e.threshold??100,s=e.direction??"horizontal",r=e.removeOnDismiss??!0,n=s==="horizontal",f=0,c=0,a=!1;function h(u){!u.isPrimary||t.hasAttribute("data-dismissed")||(u.preventDefault(),a=!0,f=n?u.clientX:u.clientY,c=0,t.setPointerCapture(u.pointerId),t.setAttribute("data-swiping",""))}function l(u){if(!a||!u.isPrimary)return;c=(n?u.clientX:u.clientY)-f;let y=1-Math.min(Math.abs(c)/i,1)*.5;n?t.style.transform=`translateX(${c}px)`:t.style.transform=`translateY(${c}px)`,t.style.opacity=String(y)}function d(u){!a||!u.isPrimary||(a=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),Math.abs(c)>=i?m(c>0?"right":"left"):v())}function o(u){!a||!u.isPrimary||(a=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),v())}function m(u){let p=u==="right"?"100%":"-100%";t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform=n?`translateX(${p})`:`translateY(${p})`,t.style.opacity="0",t.setAttribute("data-dismissed",""),g.dismiss(),t.dispatchEvent(new CustomEvent("swipe-dismiss",{bubbles:!0,detail:{direction:u,distance:Math.abs(c)}})),r&&t.addEventListener("transitionend",()=>t.remove(),{once:!0})}function v(){t.style.transition="transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease",t.style.transform="",t.style.opacity="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",h),t.addEventListener("pointermove",l),t.addEventListener("pointerup",d),t.addEventListener("pointercancel",o),()=>{t.removeEventListener("pointerdown",h),t.removeEventListener("pointermove",l),t.removeEventListener("pointerup",d),t.removeEventListener("pointercancel",o)}}function B(t,e,i={}){let s=i.threshold??70,r=i.maxPull??120,n=document.createElement("div");n.setAttribute("data-pull-indicator",""),n.setAttribute("aria-hidden","true");let f=document.createElement("div");f.setAttribute("data-pull-spinner",""),n.appendChild(f),t.prepend(n);let c=0,a=!1,h=!1;function l(p){!p.isPrimary||h||t.scrollTop<=0&&(c=p.clientY,a=!0)}function d(p){if(!a||!p.isPrimary||h)return;let y=p.clientY-c;if(y<=0){n.style.transform="",n.style.opacity="";return}let L=Math.min(y,r),A=L/s;n.style.transform=`translateY(${L}px)`,n.style.opacity=String(Math.min(A,1)),A>=1?n.setAttribute("data-pull-ready",""):n.removeAttribute("data-pull-ready")}function o(p){!a||!p.isPrimary||(a=!1,n.hasAttribute("data-pull-ready")&&!h?v():u())}function m(p){!a||!p.isPrimary||(a=!1,u())}async function v(){h=!0,n.removeAttribute("data-pull-ready"),n.setAttribute("data-pull-loading",""),n.style.transform=`translateY(${s}px)`,n.style.opacity="1";try{await e()}finally{h=!1,n.removeAttribute("data-pull-loading"),u()}}function u(){n.style.transition="transform 0.3s ease, opacity 0.3s ease",n.style.transform="",n.style.opacity="",n.removeAttribute("data-pull-ready"),n.addEventListener("transitionend",()=>{n.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",l,{passive:!0}),t.addEventListener("pointermove",d,{passive:!0}),t.addEventListener("pointerup",o,{passive:!0}),t.addEventListener("pointercancel",m,{passive:!0}),()=>{t.removeEventListener("pointerdown",l),t.removeEventListener("pointermove",d),t.removeEventListener("pointerup",o),t.removeEventListener("pointercancel",m),n.remove()}}function N(t,e,i={}){let s=i.duration??500,r=i.hapticFeedback??!0,n=i.blockContextMenu??!0,f=null;function c(l){l.isPrimary&&(f=setTimeout(()=>{r&&g.tap(),e(l),f=null},s))}function a(){f&&(clearTimeout(f),f=null)}function h(l){n&&l.preventDefault()}return t.addEventListener("pointerdown",c,{passive:!0}),t.addEventListener("pointermove",a,{passive:!0}),t.addEventListener("pointerup",a,{passive:!0}),t.addEventListener("pointercancel",a,{passive:!0}),t.addEventListener("contextmenu",h),()=>{a(),t.removeEventListener("pointerdown",c),t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",a),t.removeEventListener("pointercancel",a),t.removeEventListener("contextmenu",h)}}function k(t,e={}){let i=e.threshold??80,s=0,r=0,n=!1;function f(o){if(!o.isPrimary||!t.open)return;let m=o.target;m.closest("a, button, input, select, textarea, [contenteditable]")&&!m.closest("header")||(n=!0,s=o.clientY,r=0,t.setPointerCapture(o.pointerId),t.style.transition="none")}function c(o){if(!n||!o.isPrimary)return;if(r=o.clientY-s,r<=0){t.style.transform="",t.style.opacity="";return}let v=1-Math.min(r/i,1)*.4;t.style.transform=`translateY(${r}px)`,t.style.opacity=String(v)}function a(o){!n||!o.isPrimary||(n=!1,t.releasePointerCapture(o.pointerId),r>=i?l():d())}function h(o){!n||!o.isPrimary||(n=!1,t.releasePointerCapture(o.pointerId),d())}function l(){t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform="translateY(100%)",t.style.opacity="0",g.dismiss(),t.addEventListener("transitionend",()=>{t.style.transition="",t.style.transform="",t.style.opacity="",t.close("dismiss")},{once:!0})}function d(){t.style.transition="transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease",t.style.transform="",t.style.opacity="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",f),t.addEventListener("pointermove",c),t.addEventListener("pointerup",a),t.addEventListener("pointercancel",h),()=>{t.removeEventListener("pointerdown",f),t.removeEventListener("pointermove",c),t.removeEventListener("pointerup",a),t.removeEventListener("pointercancel",h)}}function P(t=document){let e=[];for(let i of t.querySelectorAll('[data-gesture="swipe"]'))e.push(T(i));for(let i of t.querySelectorAll('[data-gesture="dismiss"]'))e.push(S(i));for(let i of t.querySelectorAll('[data-gesture="long-press"]'))e.push(N(i,()=>{i.dispatchEvent(new CustomEvent("long-press",{bubbles:!0}))}));for(let i of t.querySelectorAll('dialog[data-gesture="dismiss-down"]'))e.push(k(i));return()=>e.forEach(i=>i())}var g,D=q(()=>{g={tap:()=>navigator.vibrate?.(8),confirm:()=>navigator.vibrate?.([8,40,8]),error:()=>navigator.vibrate?.([30,60,30]),dismiss:()=>navigator.vibrate?.(15)};P()});var F=window.matchMedia("(prefers-reduced-motion: reduce)");var x=new Map;function M(t,e,i={}){let s=i.priority??10,r={impl:e,bundle:i.bundle,contract:i.contract,priority:s},n=x.get(t);if(customElements.get(t)){if(!n||n.priority>=s){n&&n.priority===s&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=s){n.priority===s&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${n.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}x.set(t,r),customElements.define(t,e)}var b=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0})))}disconnectedCallback(){for(let e of this.#t)e();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,s,r){e.addEventListener(i,s,r),this.#t.push(()=>e.removeEventListener(i,s,r))}setup(){}teardown(){}};function E(t){return document.startViewTransition?document.startViewTransition(t):t()}var H=0,w=class extends b{#t=[];#e=0;#n=null;#m=null;#i=null;#u=null;#d=null;#h=null;#a=null;#s=null;#c=null;#o="";#l=!1;setup(){if(this.#o=`gallery-lb-${++H}`,this.#l=!!document.startViewTransition,this.#v(),this.#t.length===0)return!1;this.listen(this,"click",this.#y)}teardown(){this.#c&&(this.#c(),this.#c=null),this.#n&&(this.#n.remove(),this.#n=null),this.#t=[]}open(e){if(e<0||e>=this.#t.length)return;this.#n||this.#b(),this.#p(e);let i=this.#t[e],s=this.getAttribute("transition")||"morph";if(this.#l&&s==="morph"){let r=`gallery-morph-${this.#o}`;i.thumbEl.style.viewTransitionName=r,E(()=>{i.thumbEl.style.viewTransitionName="";let n=this.#i.querySelector("img");n&&(n.style.viewTransitionName=r),this.#n.showModal()}).finished?.then(()=>{let n=this.#i.querySelector("img");n&&(n.style.viewTransitionName="")})}else this.#n.showModal();this.#f(e)}close(){if(!this.#n?.open)return;let e=this.#t[this.#e],i=this.getAttribute("transition")||"morph";if(this.#l&&i==="morph"){let s=`gallery-morph-${this.#o}`,r=this.#i.querySelector("img");r&&(r.style.viewTransitionName=s),E(()=>{r&&(r.style.viewTransitionName=""),e.thumbEl.style.viewTransitionName=s,this.#n.close()}).finished?.then(()=>{e.thumbEl.style.viewTransitionName=""})}else this.#n.close()}next(){let e=this.hasAttribute("loop");this.#e<this.#t.length-1?this.#r(this.#e+1):e&&this.#r(0)}prev(){let e=this.hasAttribute("loop");this.#e>0?this.#r(this.#e-1):e&&this.#r(this.#t.length-1)}#v(){this.#t=[];for(let e of this.children){let i=e.tagName==="FIGURE",s=i?e.querySelector("a[href]"):e.matches("a[href]")?e:null;if(!s)continue;let r=s.querySelector("img");if(!r)continue;let n=i?e.querySelector("figcaption")?.innerHTML??null:null;this.#t.push({href:s.href,thumbSrc:r.src,alt:r.alt||"",caption:n,thumbEl:r})}}#y=e=>{let i=e.target.closest("a[href]");if(!i||!this.contains(i))return;let s=i.querySelector("img"),r=this.#t.findIndex(n=>n.thumbEl===s);r!==-1&&(e.preventDefault(),this.open(r))};#b(){let e=document.createElement("dialog");e.id=this.#o,e.className="gallery-lightbox",e.dataset.size="full";let i=this.getAttribute("controls")||"edge";e.dataset.controls=i;let s=document.createElement("header"),r=document.createElement("span");r.className="gallery-counter",r.setAttribute("aria-live","polite"),r.setAttribute("aria-atomic","true"),this.#u=r;let n=document.createElement("button");n.type="button",n.className="gallery-close",n.setAttribute("commandfor",this.#o),n.setAttribute("command","close"),n.setAttribute("aria-label","Close gallery"),n.innerHTML='<icon-wc name="x" size="sm"></icon-wc>',this.listen(n,"click",()=>this.close()),s.append(r);let f=this.getAttribute("captions")||"auto";s.append(n);let c=document.createElement("section");c.className="gallery-stage",this.#m=c;let a=document.createElement("button");a.type="button",a.className="gallery-prev",a.setAttribute("aria-label","Previous image"),a.innerHTML='<icon-wc name="chevron-left" size="sm"></icon-wc>',this.#d=a;let h=document.createElement("figure");h.className="gallery-frame",this.#i=h;let l=document.createElement("button");if(l.type="button",l.className="gallery-next",l.setAttribute("aria-label","Next image"),l.innerHTML='<icon-wc name="chevron-right" size="sm"></icon-wc>',this.#h=l,c.append(a,h,l),f==="auto"){let d=document.createElement("footer");d.className="gallery-caption",d.hidden=!0;let o=document.createElement("button");o.type="button",o.className="gallery-info-btn",o.setAttribute("aria-label","Show image details"),o.setAttribute("aria-expanded","false"),o.innerHTML='<icon-wc name="info" size="sm"></icon-wc>',this.#a=o;let m=document.createElement("div");m.className="gallery-caption-text",m.hidden=!0,d.append(o,m),this.#s=m,e.append(s,c,d),this.listen(o,"click",()=>{let v=!m.hidden;m.hidden=v,o.setAttribute("aria-expanded",String(!v)),o.setAttribute("aria-label",v?"Show image details":"Hide image details")})}else e.append(s,c);this.append(e),this.#n=e,this.listen(a,"click",()=>this.prev()),this.listen(l,"click",()=>this.next()),this.listen(e,"keydown",this.#g),this.listen(e,"click",d=>{d.target===e&&this.close()}),this.listen(e,"close",()=>{let d=this.#t[this.#e];d&&(d.thumbEl.style.viewTransitionName="");let o=this.#i?.querySelector("img");o&&(o.style.viewTransitionName="")}),Promise.resolve().then(()=>(D(),$)).then(({addSwipeListener:d})=>{this.#c=d(c,{threshold:40}),this.listen(c,"swipe-left",()=>this.next()),this.listen(c,"swipe-right",()=>this.prev())})}#p(e){let i=this.#t[e];this.#e=e;let s=document.createElement("img");s.src=i.href,s.alt=i.alt,this.#i.innerHTML="",this.#i.append(s);let r=this.getAttribute("captions")||"auto";if(r==="overlay"&&i.caption){let n=document.createElement("figcaption");n.innerHTML=i.caption,this.#i.append(n)}else if(r==="auto"){let n=this.#s?.parentElement;this.#s&&this.#a&&n&&(i.caption?(this.#s.innerHTML=i.caption,n.hidden=!1,this.#s.hidden=!0,this.#a.setAttribute("aria-expanded","false"),this.#a.setAttribute("aria-label","Show image details")):(this.#s.innerHTML="",n.hidden=!0))}this.#E()}#r(e){let i=this.getAttribute("transition")||"morph";this.#l&&i!=="none"?E(()=>{this.#p(e)}):this.#p(e),this.#f(e)}#E(){let e=this.hasAttribute("loop"),i=this.#e===0,s=this.#e===this.#t.length-1;this.#d&&(this.#d.disabled=!e&&i),this.#h&&(this.#h.disabled=!e&&s),this.#u&&(this.#u.textContent=`${this.#e+1} of ${this.#t.length}`)}#g=e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),this.prev();break;case"ArrowRight":e.preventDefault(),this.next();break;case"Home":e.preventDefault(),this.#r(0);break;case"End":e.preventDefault(),this.#r(this.#t.length-1);break}};#f(e){let i=s=>{if(s>=0&&s<this.#t.length){let r=new Image;r.src=this.#t[s].href}};i(e-1),i(e+1)}};M("image-gallery",w);export{w as ImageGallery};
|
|
1
|
+
var I=Object.defineProperty;var B=(t,e)=>()=>(t&&(e=t(t=0)),e);var H=(t,e)=>{for(var i in e)I(t,i,{get:e[i],enumerable:!0})};var q={};H(q,{addDialogDismiss:()=>$,addFlickListener:()=>D,addLongPress:()=>P,addPullToRefresh:()=>X,addSwipeListener:()=>k,haptic:()=>x,initGestures:()=>C,makeSwipeable:()=>N});function k(t,e={}){let i=e.threshold??50,s=e.restraint??100,r=e.timeout??300,n=e.velocity??.5,l=e.minFlickDistance??10,a,c,f;function h(o){o.isPrimary&&(a=o.clientX,c=o.clientY,f=Date.now())}function d(o){if(!o.isPrimary)return;let m=o.clientX-a,v=o.clientY-c,u=Date.now()-f;if(u>r)return;let p=Math.abs(m),y=Math.abs(v),g=Math.max(p,y),b=u>0?g/u:0,w=b>=n&&g>=l,E;if((p>=i||w&&p>y)&&y<=s?E=m<0?"left":"right":(y>=i||w&&y>p)&&p<=s&&(E=v<0?"up":"down"),E){let F=E==="left"||E==="right"?p:y;t.dispatchEvent(new CustomEvent(`swipe-${E}`,{bubbles:!0,detail:{distance:F,duration:u,velocity:b,flick:w}}))}}return t.addEventListener("pointerdown",h,{passive:!0}),t.addEventListener("pointerup",d,{passive:!0}),()=>{t.removeEventListener("pointerdown",h),t.removeEventListener("pointerup",d)}}function D(t,e={}){let i=e.minDistance??10,s=e.velocity??.6,r=e.timeout??250,n=e.restraint??80,l,a,c;function f(d){d.isPrimary&&(l=d.clientX,a=d.clientY,c=Date.now())}function h(d){if(!d.isPrimary)return;let o=d.clientX-l,m=d.clientY-a,v=Date.now()-c;if(v===0||v>r)return;let u=Math.abs(o),p=Math.abs(m),y=Math.max(u,p);if(y<i)return;let g=y/v;if(g<s)return;let b;if(u>p&&p<=n?b=o<0?"left":"right":p>u&&u<=n&&(b=m<0?"up":"down"),b){let w=b==="left"||b==="right"?u:p;t.dispatchEvent(new CustomEvent(`swipe-${b}`,{bubbles:!0,detail:{distance:w,duration:v,velocity:g,flick:!0}}))}}return t.addEventListener("pointerdown",f,{passive:!0}),t.addEventListener("pointerup",h,{passive:!0}),()=>{t.removeEventListener("pointerdown",f),t.removeEventListener("pointerup",h)}}function N(t,e={}){let i=e.threshold??100,s=e.direction??"horizontal",r=e.removeOnDismiss??!0,n=s==="horizontal",l=0,a=0,c=!1;function f(u){!u.isPrimary||t.hasAttribute("data-dismissed")||(u.preventDefault(),c=!0,l=n?u.clientX:u.clientY,a=0,t.setPointerCapture(u.pointerId),t.setAttribute("data-swiping",""))}function h(u){if(!c||!u.isPrimary)return;a=(n?u.clientX:u.clientY)-l;let y=1-Math.min(Math.abs(a)/i,1)*.5;n?t.style.transform=`translateX(${a}px)`:t.style.transform=`translateY(${a}px)`,t.style.opacity=String(y)}function d(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),Math.abs(a)>=i?m(a>0?"right":"left"):v())}function o(u){!c||!u.isPrimary||(c=!1,t.releasePointerCapture(u.pointerId),t.removeAttribute("data-swiping"),v())}function m(u){let p=u==="right"?"100%":"-100%";t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform=n?`translateX(${p})`:`translateY(${p})`,t.style.opacity="0",t.setAttribute("data-dismissed",""),x.dismiss(),t.dispatchEvent(new CustomEvent("swipe-dismiss",{bubbles:!0,detail:{direction:u,distance:Math.abs(a)}})),r&&t.addEventListener("transitionend",()=>t.remove(),{once:!0})}function v(){t.style.transition="transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease",t.style.transform="",t.style.opacity="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",f),t.addEventListener("pointermove",h),t.addEventListener("pointerup",d),t.addEventListener("pointercancel",o),()=>{t.removeEventListener("pointerdown",f),t.removeEventListener("pointermove",h),t.removeEventListener("pointerup",d),t.removeEventListener("pointercancel",o)}}function X(t,e,i={}){let s=i.threshold??70,r=i.maxPull??120,n=document.createElement("div");n.setAttribute("data-pull-indicator",""),n.setAttribute("aria-hidden","true");let l=document.createElement("div");l.setAttribute("data-pull-spinner",""),n.appendChild(l),t.prepend(n);let a=0,c=!1,f=!1;function h(p){!p.isPrimary||f||t.scrollTop<=0&&(a=p.clientY,c=!0)}function d(p){if(!c||!p.isPrimary||f)return;let y=p.clientY-a;if(y<=0){n.style.transform="",n.style.opacity="";return}let g=Math.min(y,r),b=g/s;n.style.transform=`translateY(${g}px)`,n.style.opacity=String(Math.min(b,1)),b>=1?n.setAttribute("data-pull-ready",""):n.removeAttribute("data-pull-ready")}function o(p){!c||!p.isPrimary||(c=!1,n.hasAttribute("data-pull-ready")&&!f?v():u())}function m(p){!c||!p.isPrimary||(c=!1,u())}async function v(){f=!0,n.removeAttribute("data-pull-ready"),n.setAttribute("data-pull-loading",""),n.style.transform=`translateY(${s}px)`,n.style.opacity="1";try{await e()}finally{f=!1,n.removeAttribute("data-pull-loading"),u()}}function u(){n.style.transition="transform 0.3s ease, opacity 0.3s ease",n.style.transform="",n.style.opacity="",n.removeAttribute("data-pull-ready"),n.addEventListener("transitionend",()=>{n.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",h,{passive:!0}),t.addEventListener("pointermove",d,{passive:!0}),t.addEventListener("pointerup",o,{passive:!0}),t.addEventListener("pointercancel",m,{passive:!0}),()=>{t.removeEventListener("pointerdown",h),t.removeEventListener("pointermove",d),t.removeEventListener("pointerup",o),t.removeEventListener("pointercancel",m),n.remove()}}function P(t,e,i={}){let s=i.duration??500,r=i.hapticFeedback??!0,n=i.blockContextMenu??!0,l=null;function a(h){h.isPrimary&&(l=setTimeout(()=>{r&&x.tap(),e(h),l=null},s))}function c(){l&&(clearTimeout(l),l=null)}function f(h){n&&h.preventDefault()}return t.addEventListener("pointerdown",a,{passive:!0}),t.addEventListener("pointermove",c,{passive:!0}),t.addEventListener("pointerup",c,{passive:!0}),t.addEventListener("pointercancel",c,{passive:!0}),t.addEventListener("contextmenu",f),()=>{c(),t.removeEventListener("pointerdown",a),t.removeEventListener("pointermove",c),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",c),t.removeEventListener("contextmenu",f)}}function $(t,e={}){let i=e.threshold??80,s=0,r=0,n=!1;function l(o){if(!o.isPrimary||!t.open)return;let m=o.target;m.closest("a, button, input, select, textarea, [contenteditable]")&&!m.closest("header")||(n=!0,s=o.clientY,r=0,t.setPointerCapture(o.pointerId),t.style.transition="none")}function a(o){if(!n||!o.isPrimary)return;if(r=o.clientY-s,r<=0){t.style.transform="",t.style.opacity="";return}let v=1-Math.min(r/i,1)*.4;t.style.transform=`translateY(${r}px)`,t.style.opacity=String(v)}function c(o){!n||!o.isPrimary||(n=!1,t.releasePointerCapture(o.pointerId),r>=i?h():d())}function f(o){!n||!o.isPrimary||(n=!1,t.releasePointerCapture(o.pointerId),d())}function h(){t.style.transition="transform 0.2s ease-out, opacity 0.2s ease-out",t.style.transform="translateY(100%)",t.style.opacity="0",x.dismiss(),t.addEventListener("transitionend",()=>{t.style.transition="",t.style.transform="",t.style.opacity="",t.close("dismiss")},{once:!0})}function d(){t.style.transition="transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease",t.style.transform="",t.style.opacity="",t.addEventListener("transitionend",()=>{t.style.transition=""},{once:!0})}return t.addEventListener("pointerdown",l),t.addEventListener("pointermove",a),t.addEventListener("pointerup",c),t.addEventListener("pointercancel",f),()=>{t.removeEventListener("pointerdown",l),t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",c),t.removeEventListener("pointercancel",f)}}function C(t=document){let e=[];for(let i of t.querySelectorAll('[data-gesture="swipe"]'))e.push(k(i));for(let i of t.querySelectorAll('[data-gesture="flick"]'))e.push(D(i));for(let i of t.querySelectorAll('[data-gesture="dismiss"]'))e.push(N(i));for(let i of t.querySelectorAll('[data-gesture="long-press"]'))e.push(P(i,()=>{i.dispatchEvent(new CustomEvent("long-press",{bubbles:!0}))}));for(let i of t.querySelectorAll('dialog[data-gesture="dismiss-down"]'))e.push($(i));return()=>e.forEach(i=>i())}var x,Y=B(()=>{x={tap:()=>navigator.vibrate?.(8),confirm:()=>navigator.vibrate?.([8,40,8]),error:()=>navigator.vibrate?.([30,60,30]),dismiss:()=>navigator.vibrate?.(15)};C()});var O=window.matchMedia("(prefers-reduced-motion: reduce)");var S=new Map;function T(t,e,i={}){let s=i.priority??10,r={impl:e,bundle:i.bundle,contract:i.contract,priority:s},n=S.get(t);if(customElements.get(t)){if(!n||n.priority>=s){n&&n.priority===s&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${t}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=s){n.priority===s&&console.warn(`[VB Bundle] Tag <${t}> already registered by "${n.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}S.set(t,r),customElements.define(t,e)}var L=class extends HTMLElement{#t=[];#e;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let e of this.#t)e();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,s,r){e.addEventListener(i,s,r),this.#t.push(()=>e.removeEventListener(i,s,r))}setup(){}teardown(){}setState(e,i){this.#e||(this.#e=this.attachInternals());let s=this.#e.states;try{i?s.add(e):s.delete(e)}catch{let r=`--${e}`;i?s.add(r):s.delete(r)}}_adoptInternals(e){this.#e||(this.#e=e)}};function A(t){return document.startViewTransition?document.startViewTransition(t):t()}var z=0,M=class extends L{#t=[];#e=0;#n=null;#v=null;#i=null;#u=null;#d=null;#h=null;#a=null;#s=null;#c=null;#o="";#l=!1;setup(){return this.#o=`gallery-lb-${++z}`,this.#l=!!document.startViewTransition,this.#f(),this.#t.length===0?!1:(this.listen(this,"click",this.#y),!0)}teardown(){this.#c&&(this.#c(),this.#c=null),this.#n&&(this.#n.remove(),this.#n=null),this.#t=[]}get images(){return this.#t.map(e=>({href:e.href,thumbSrc:e.thumbSrc,alt:e.alt,caption:e.caption}))}set images(e){let i=Array.isArray(e)?e:[];for(let s of[...this.children])(s.tagName==="FIGURE"||s.tagName==="A")&&s.remove();for(let s of i){if(!s?.href||!s?.thumbSrc)continue;let r=s.caption?document.createElement("figure"):document.createElement("a"),n=r.tagName==="FIGURE"?document.createElement("a"):r;n.href=s.href;let l=document.createElement("img");if(l.src=s.thumbSrc,l.alt=s.alt||"",n.appendChild(l),r.tagName==="FIGURE"){r.appendChild(n);let a=document.createElement("figcaption");a.innerHTML=s.caption??"",r.appendChild(a)}this.appendChild(r)}this.#f(),this.dispatchEvent(new CustomEvent("image-gallery:images-changed",{detail:{images:this.images,source:"property"},bubbles:!0}))}open(e){if(e<0||e>=this.#t.length)return;this.#n||this.#b(),this.#p(e);let i=this.#t[e],s=this.getAttribute("transition")||"morph";if(this.#l&&s==="morph"&&this.#i&&this.#n){let r=`gallery-morph-${this.#o}`;i.thumbEl.style.viewTransitionName=r;let n=this.#i,l=this.#n;A(()=>{i.thumbEl.style.viewTransitionName="";let a=n.querySelector("img");a&&(a.style.viewTransitionName=r),l.showModal()}).finished?.then(()=>{let a=n.querySelector("img");a&&(a.style.viewTransitionName="")})}else this.#n?.showModal();this.#m(e)}close(){if(!this.#n?.open)return;let e=this.#t[this.#e],i=this.getAttribute("transition")||"morph";if(this.#l&&i==="morph"&&this.#i&&this.#n){let s=`gallery-morph-${this.#o}`,r=this.#i.querySelector("img");r&&(r.style.viewTransitionName=s);let n=this.#n;A(()=>{r&&(r.style.viewTransitionName=""),e.thumbEl.style.viewTransitionName=s,n.close()}).finished?.then(()=>{e.thumbEl.style.viewTransitionName=""})}else this.#n?.close()}next(){let e=this.hasAttribute("loop");this.#e<this.#t.length-1?this.#r(this.#e+1):e&&this.#r(0)}prev(){let e=this.hasAttribute("loop");this.#e>0?this.#r(this.#e-1):e&&this.#r(this.#t.length-1)}#f(){this.#t=[];for(let e of this.children){let i=e.tagName==="FIGURE",s=i?e.querySelector("a[href]"):e.matches("a[href]")?e:null;if(!s)continue;let r=s.querySelector("img");if(!r)continue;let n=i?e.querySelector("figcaption")?.innerHTML??null:null;this.#t.push({href:s.href,thumbSrc:r.src,alt:r.alt||"",caption:n,thumbEl:r})}}#y=e=>{let s=e.target?.closest("a[href]");if(!s||!this.contains(s))return;let r=s.querySelector("img"),n=this.#t.findIndex(l=>l.thumbEl===r);n!==-1&&(e.preventDefault(),this.open(n))};#b(){let e=document.createElement("dialog");e.id=this.#o,e.className="gallery-lightbox",e.dataset.size="full";let i=this.getAttribute("controls")||"edge";e.dataset.controls=i;let s=document.createElement("header"),r=document.createElement("span");r.className="gallery-counter",r.setAttribute("aria-live","polite"),r.setAttribute("aria-atomic","true"),this.#u=r;let n=document.createElement("button");n.type="button",n.className="gallery-close",n.setAttribute("commandfor",this.#o),n.setAttribute("command","close"),n.setAttribute("aria-label","Close gallery"),n.innerHTML='<icon-wc name="x" size="sm"></icon-wc>',this.listen(n,"click",()=>this.close()),s.append(r);let l=this.getAttribute("captions")||"auto";s.append(n);let a=document.createElement("section");a.className="gallery-stage",this.#v=a;let c=document.createElement("button");c.type="button",c.className="gallery-prev",c.setAttribute("aria-label","Previous image"),c.innerHTML='<icon-wc name="chevron-left" size="sm"></icon-wc>',this.#d=c;let f=document.createElement("figure");f.className="gallery-frame",this.#i=f;let h=document.createElement("button");if(h.type="button",h.className="gallery-next",h.setAttribute("aria-label","Next image"),h.innerHTML='<icon-wc name="chevron-right" size="sm"></icon-wc>',this.#h=h,a.append(c,f,h),l==="auto"){let d=document.createElement("footer");d.className="gallery-caption",d.hidden=!0;let o=document.createElement("button");o.type="button",o.className="gallery-info-btn",o.setAttribute("aria-label","Show image details"),o.setAttribute("aria-expanded","false"),o.innerHTML='<icon-wc name="info" size="sm"></icon-wc>',this.#a=o;let m=document.createElement("div");m.className="gallery-caption-text",m.hidden=!0,d.append(o,m),this.#s=m,e.append(s,a,d),this.listen(o,"click",()=>{let v=!m.hidden;m.hidden=v,o.setAttribute("aria-expanded",String(!v)),o.setAttribute("aria-label",v?"Show image details":"Hide image details")})}else e.append(s,a);this.append(e),this.#n=e,this.listen(c,"click",()=>this.prev()),this.listen(h,"click",()=>this.next()),this.listen(e,"keydown",this.#E),this.listen(e,"click",d=>{d.target===e&&this.close()}),this.listen(e,"close",()=>{let d=this.#t[this.#e];d&&(d.thumbEl.style.viewTransitionName="");let o=this.#i?.querySelector("img");o&&(o.style.viewTransitionName="")}),Promise.resolve().then(()=>(Y(),q)).then(({addSwipeListener:d})=>{this.#c=d(a,{threshold:40}),this.listen(a,"swipe-left",()=>this.next()),this.listen(a,"swipe-right",()=>this.prev())})}#p(e){let i=this.#t[e];this.#e=e;let s=document.createElement("img");if(s.src=i.href,s.alt=i.alt,!this.#i)return;let r=this.#i;r.innerHTML="",r.append(s);let n=this.getAttribute("captions")||"auto";if(n==="overlay"&&i.caption){let l=document.createElement("figcaption");l.innerHTML=i.caption,r.append(l)}else if(n==="auto"){let l=this.#s?.parentElement;this.#s&&this.#a&&l&&(i.caption?(this.#s.innerHTML=i.caption,l.hidden=!1,this.#s.hidden=!0,this.#a.setAttribute("aria-expanded","false"),this.#a.setAttribute("aria-label","Show image details")):(this.#s.innerHTML="",l.hidden=!0))}this.#g()}#r(e){let i=this.getAttribute("transition")||"morph";this.#l&&i!=="none"?A(()=>{this.#p(e)}):this.#p(e),this.#m(e)}#g(){let e=this.hasAttribute("loop"),i=this.#e===0,s=this.#e===this.#t.length-1;this.#d&&(this.#d.disabled=!e&&i),this.#h&&(this.#h.disabled=!e&&s),this.#u&&(this.#u.textContent=`${this.#e+1} of ${this.#t.length}`)}#E=e=>{switch(e.key){case"ArrowLeft":e.preventDefault(),this.prev();break;case"ArrowRight":e.preventDefault(),this.next();break;case"Home":e.preventDefault(),this.#r(0);break;case"End":e.preventDefault(),this.#r(this.#t.length-1);break}};#m(e){let i=s=>{if(s>=0&&s<this.#t.length){let r=new Image;r.src=this.#t[s].href}};i(e-1),i(e+1)}};T("image-gallery",M);export{M as ImageGallery};
|
|
2
2
|
//# sourceMappingURL=image-gallery.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var S=window.matchMedia("(prefers-reduced-motion: reduce)");var y=new Map;function b(s,i
|
|
1
|
+
var S=window.matchMedia("(prefers-reduced-motion: reduce)");var y=new Map;function b(s,e,i={}){let t=i.priority??10,r={impl:e,bundle:i.bundle,contract:i.contract,priority:t},n=y.get(s);if(customElements.get(s)){if(!n||n.priority>=t){n&&n.priority===t&&n.impl!==e&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${s}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=t){n.priority===t&&console.warn(`[VB Bundle] Tag <${s}> already registered by "${n.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}y.set(s,r),customElements.define(s,e)}var f=class extends HTMLElement{#e=[];#i;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let e of this.#e)e();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,i,t,r){e.addEventListener(i,t,r),this.#e.push(()=>e.removeEventListener(i,t,r))}setup(){}teardown(){}setState(e,i){this.#i||(this.#i=this.attachInternals());let t=this.#i.states;try{i?t.add(e):t.delete(e)}catch{let r=`--${e}`;i?t.add(r):t.delete(r)}}_adoptInternals(e){this.#i||(this.#i=e)}};var p="http://www.w3.org/2000/svg";function w(s){return s.trim().split(/[\s,]+/).map(Number)}function v(s,e){let i=w(e);switch(s){case"rect":{let[t,r,n,c]=i;return{type:"rect",x:t,y:r,width:n-t,height:c-r}}case"circle":{let[t,r,n]=i;return{type:"circle",cx:t,cy:r,r:n}}case"poly":{let t=[];for(let r=0;r<i.length;r+=2)t.push([i[r],i[r+1]]);return{type:"poly",points:t}}default:return null}}function E(s){if(!s)return null;switch(s.type){case"rect":{let e=document.createElementNS(p,"rect");return e.setAttribute("x",String(s.x)),e.setAttribute("y",String(s.y)),e.setAttribute("width",String(s.width)),e.setAttribute("height",String(s.height)),e}case"circle":{let e=document.createElementNS(p,"circle");return e.setAttribute("cx",String(s.cx)),e.setAttribute("cy",String(s.cy)),e.setAttribute("r",String(s.r)),e}case"poly":{let e=document.createElementNS(p,"polygon");return e.setAttribute("points",s.points.map(i=>i.join(",")).join(" ")),e}default:return null}}function x(s){if(!s)return{x:0,y:0,width:0,height:0};switch(s.type){case"rect":return{x:s.x,y:s.y,width:s.width,height:s.height};case"circle":return{x:s.cx-s.r,y:s.cy-s.r,width:s.r*2,height:s.r*2};case"poly":{let e=100,i=100,t=0,r=0;for(let[n,c]of s.points)n<e&&(e=n),c<i&&(i=c),n>t&&(t=n),c>r&&(r=c);return{x:e,y:i,width:t-e,height:r-i}}default:return{x:0,y:0,width:0,height:0}}}var m=class extends HTMLElement{get shape(){return this.getAttribute("shape")||"rect"}get coords(){return this.getAttribute("coords")||""}get label(){return this.getAttribute("label")||""}get href(){return this.getAttribute("href")}get target(){return this.getAttribute("target")||""}get tooltipMode(){return this.getAttribute("tooltip")||"hover"}get disabled(){return this.hasAttribute("disabled")}connectedCallback(){this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded")}},g=class extends f{#e=null;#i=null;#t=null;#n=[];#c=[];#r=null;#h=null;#o=null;setup(){if(this.#e=this.querySelector(":scope > img"),!this.#e){let e=this.getAttribute("src"),i=this.getAttribute("alt");if(e)this.#e=document.createElement("img"),this.#e.src=e,this.#e.alt=i||"",this.prepend(this.#e);else return!1}return this.#e.classList.add("image-map-img"),this.#e.complete?this.#u():this.#e.addEventListener("load",()=>this.#u(),{once:!0}),!0}teardown(){this.#h?.disconnect(),this.#s(),this.#i?.remove(),this.#t?.remove();for(let e of this.#c)e.anchor?.remove();this.#c=[],this.#n=[]}get regions(){return[...this.querySelectorAll(":scope > map-area")].map(e=>({shape:e.getAttribute("shape")||void 0,coords:e.getAttribute("coords")||void 0,label:e.getAttribute("label")||e.textContent?.trim()||void 0,href:e.getAttribute("href")||void 0,target:e.getAttribute("target")||void 0}))}set regions(e){let i=Array.isArray(e)?e:[];for(let t of[...this.querySelectorAll(":scope > map-area")])t.remove();for(let t of i){let r=document.createElement("map-area");t.shape&&r.setAttribute("shape",t.shape),t.coords&&r.setAttribute("coords",t.coords),t.label&&r.setAttribute("label",t.label),t.href&&r.setAttribute("href",t.href),t.target&&r.setAttribute("target",t.target),this.appendChild(r)}this.teardown(),this.removeAttribute("data-upgraded"),this.setup(),this.dispatchEvent(new CustomEvent("image-map:regions-changed",{detail:{regions:i,source:"property"},bubbles:!0}))}#u(){let e=[...this.querySelectorAll(":scope > map-area")];if(e.length===0){this.setAttribute("data-upgraded","");return}this.#i=document.createElementNS(p,"svg"),this.#i.setAttribute("viewBox","0 0 100 100"),this.#i.setAttribute("preserveAspectRatio","none"),this.#i.setAttribute("aria-hidden","true"),this.#i.classList.add("image-map-overlay"),this.#t=document.createElement("div"),this.#t.className="image-map-tooltip",this.#t.setAttribute("role","tooltip"),this.#t.setAttribute("aria-live","polite"),this.#t.id=`imap-tip-${crypto.randomUUID().slice(0,8)}`;for(let i of e){let t=i,r=t.shape,n=t.coords,c=v(r,n),a=E(c);if(!a)continue;let h=x(c),o=t.href?document.createElement("a"):document.createElement("button");t.href&&(o.href=t.href,t.target&&(o.target=t.target)),o.className="image-map-anchor",o.setAttribute("aria-label",t.label),o.setAttribute("aria-describedby",this.#t.id),o.textContent=t.label,o.style.left=`${h.x}%`,o.style.top=`${h.y}%`,o.style.width=`${h.width}%`,o.style.height=`${h.height}%`,t.disabled&&(a.setAttribute("data-disabled",""),o.setAttribute("tabindex","-1"),o.setAttribute("aria-disabled","true"));let d=i.innerHTML,l={area:i,parsed:c,svgShape:a,anchor:o,contentHTML:d};if(!t.disabled){let u=t.tooltipMode;this.listen(a,"pointerenter",()=>{u==="hover"&&this.#a(l),a.setAttribute("data-hover",""),this.#l("image-map:area-enter",t)}),this.listen(a,"pointerleave",()=>{u==="hover"&&this.#s(),a.removeAttribute("data-hover"),this.#l("image-map:area-leave",t)}),this.listen(a,"click",()=>{u==="click"&&(this.#r===l?this.#s():this.#a(l)),this.#l("image-map:area-activate",t),t.href&&u!=="click"&&(t.target==="_blank"?window.open(t.href,"_blank","noopener"):window.location.href=t.href)}),this.listen(a,"touchstart",A=>{u==="hover"&&(this.#o!==l?(A.preventDefault(),this.#o=l,this.#a(l)):this.#o=null)},{passive:!1}),this.listen(o,"focus",()=>{this.#a(l),a.setAttribute("data-hover","")}),this.listen(o,"blur",()=>{this.#s(),a.removeAttribute("data-hover")})}this.#i.appendChild(a),this.#c.push(l),this.#n.push(o)}this.appendChild(this.#i);for(let i of this.#n)this.appendChild(i);this.appendChild(this.#t),this.listen(this,"keydown",this.#f),this.#h=new ResizeObserver(()=>{this.#r&&this.#d(this.#r.svgShape)}),this.#h.observe(this.#e),this.setAttribute("role","group"),this.hasAttribute("aria-label")||this.setAttribute("aria-label",this.#e.alt||"Image map"),this.setAttribute("data-upgraded","")}#a(e){this.#t&&(this.#r=e,this.#t.innerHTML=e.contentHTML,this.#t.setAttribute("data-visible",""),this.#d(e.svgShape))}#s(){this.#t&&(this.#r=null,this.#t.removeAttribute("data-visible"))}#d(e){if(!this.#t||!e)return;let i=e.getBoundingClientRect(),t=this.#t.getBoundingClientRect(),r=8,n=8,c=window.innerWidth,a=window.innerHeight,h,o,d=i.top-t.height-r;d>=n?(h=d,o=i.left+(i.width-t.width)/2):i.bottom+r+t.height<=a-n?(h=i.bottom+r,o=i.left+(i.width-t.width)/2):i.right+r+t.width<=c-n?(h=i.top+(i.height-t.height)/2,o=i.right+r):(h=i.top+(i.height-t.height)/2,o=i.left-t.width-r),o=Math.max(n,Math.min(o,c-t.width-n)),h=Math.max(n,Math.min(h,a-t.height-n)),this.#t.style.top=`${h}px`,this.#t.style.left=`${o}px`}#f=e=>{let i=this.#n.filter(r=>!r.hasAttribute("aria-disabled")),t=i.indexOf(document.activeElement);switch(e.key){case"ArrowDown":case"ArrowRight":{e.preventDefault();let r=t<i.length-1?t+1:0;i[r]?.focus();break}case"ArrowUp":case"ArrowLeft":{e.preventDefault();let r=t>0?t-1:i.length-1;i[r]?.focus();break}case"Escape":this.#s(),this.#o=null;break}};#l(e,i){this.dispatchEvent(new CustomEvent(e,{detail:{area:i},bubbles:!0}))}};b("map-area",m);b("image-map",g);export{g as ImageMapWc,m as MapAreaWc};
|
|
2
2
|
//# sourceMappingURL=image-map.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var S=window.matchMedia("(prefers-reduced-motion: reduce)");var y=new Map;function w(n,r,i={}){let e=i.priority??10,a={impl:r,bundle:i.bundle,contract:i.contract,priority:e},t=y.get(n);if(customElements.get(n)){if(!t||t.priority>=e){t&&t.priority===e&&t.impl!==r&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${t.bundle}" (priority ${t.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${t.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(t&&t.priority>=e){t.priority===e&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${t.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}y.set(n,a),customElements.define(n,r)}var g=class extends HTMLElement{#i=[];#e;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let r of this.#i)r();this.#i=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(r,i,e,a){r.addEventListener(i,e,a),this.#i.push(()=>r.removeEventListener(i,e,a))}setup(){}teardown(){}setState(r,i){this.#e||(this.#e=this.attachInternals());let e=this.#e.states;try{i?e.add(r):e.delete(r)}catch{let a=`--${r}`;i?e.add(a):e.delete(a)}}_adoptInternals(r){this.#e||(this.#e=r)}};var C=0;function v(n,r,i="vb-vt"){if(!n?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return r(),null;let e=`${i}-${++C}`;n.style.viewTransitionName=e;let a=document.startViewTransition(r);return a.finished.finally(()=>{n.style.viewTransitionName===e&&(n.style.viewTransitionName="")}),a}function q({newItems:n,nodes:r,keyOf:i,renderItem:e,containerFor:a}){let t=[],u=[],f=[],m=new Set;for(let s of n)m.add(i(s));for(let[s,c]of[...r])m.has(s)||(c.remove(),r.delete(s),f.push(s));let o=new Map;for(let s of n){let c=i(s),d=r.get(c)||null,l=a(s,d);o.has(l)||o.set(l,[]),o.get(l)?.push({item:s,key:c,existing:d})}for(let[s,c]of o)for(let d=0;d<c.length;d++){let{item:l,key:h,existing:b}=c[d],p=b;p?(p.parentElement!==s||s.children[d]!==p)&&u.push(h):(p=e(l),r.set(h,p),t.push(h));let E=s.children[d];E!==p&&s.insertBefore(p,E||null)}return{added:t,moved:u,removed:f}}var A=class n extends g{static QUADRANTS=["quick-wins","big-bets","fill-ins","money-pit"];static LABELS={"quick-wins":"Quick Wins","big-bets":"Big Bets","fill-ins":"Fill-Ins","money-pit":"Money Pit"};static DESCRIPTIONS={"quick-wins":"High impact \xB7 Low effort","big-bets":"High impact \xB7 High effort","fill-ins":"Low impact \xB7 Low effort","money-pit":"Low impact \xB7 High effort"};static#i=0;static get observedAttributes(){return["src","compact","title"]}#e=null;#t={};#r=null;#a="";#s=null;setup(){this.#a=`ie-${++n.#i}`;let r=[...this.querySelectorAll(":scope > [data-quadrant], :scope > [draggable]")],i=document.createElement("div");i.className="ie-wrapper";let e=document.createElement("div");e.className="ie-y-label",e.setAttribute("aria-hidden","true"),e.textContent="Impact \u2191";let a=document.createElement("div");a.style.cssText="display:flex;flex-direction:column;flex:1;min-width:0;";let t=document.createElement("div");t.className="ie-grid",t.setAttribute("role","region"),t.setAttribute("aria-label","Impact-Effort prioritization matrix");let u=document.createElement("div");u.className="ie-x-label",u.setAttribute("aria-hidden","true"),u.textContent="Effort \u2192";for(let s of n.QUADRANTS){let c=document.createElement("section");c.className="ie-quadrant",c.dataset.quadrantZone=s,c.setAttribute("aria-label",`${n.LABELS[s]}: ${n.DESCRIPTIONS[s]}`);let d=document.createElement("header");d.className="ie-quadrant-label",d.innerHTML=`${n.LABELS[s]}<br><span class="ie-quadrant-desc">${n.DESCRIPTIONS[s]}</span>`;let l=document.createElement("drag-surface");l.setAttribute("group",this.#a),l.setAttribute("aria-label",n.LABELS[s]),l.setAttribute("data-layout","stack"),l.setAttribute("data-layout-gap","xs"),c.appendChild(d),c.appendChild(l),t.appendChild(c),this.#t[s]=l}r.forEach((s,c)=>{let d=s,l=d.getAttribute("data-quadrant")||"quick-wins",h=this.#t[l]||this.#t["quick-wins"];d.hasAttribute("draggable")||d.setAttribute("draggable","true"),d.hasAttribute("data-id")||(d.dataset.id=`ie-item-${c}`),h.appendChild(d)});let f=document.createElement("div");f.className="ie-live-region",f.setAttribute("role","status"),f.setAttribute("aria-live","polite"),f.setAttribute("aria-atomic","true");let m=this.getAttribute("title");if(m){let s=document.createElement("h3");s.className="ie-title",s.textContent=m,this.prepend(s)}a.appendChild(t),a.appendChild(u),i.appendChild(e),i.appendChild(a),this.appendChild(i),this.appendChild(f),this.#e=t,this.#r=f,this.#s=i,this.listen(this,"drag-surface:transfer",s=>{let{item:c,fromSurface:d,toSurface:l}=s.detail,h=this.#d(d),b=this.#d(l);!h||!b||(c.setAttribute("data-quadrant",b),this.#l(`Moved ${this.#f(c)} to ${n.LABELS[b]}`),this.dispatchEvent(new CustomEvent("impact-effort:move",{bubbles:!0,detail:{itemId:c.dataset.id,from:h,to:b,item:c}})))});let o=this.getAttribute("src");o&&this.#c(o),this.#u()}teardown(){this.#s&&(this.#s.remove(),this.#s=null),this.#r&&(this.#r.remove(),this.#r=null),this.#e=null,this.#t={},this.#o.clear(),this.#n=[]}#n=[];#o=new Map;get items(){if(this.#n.length)return this.#n;let r=[];for(let[i,e]of Object.entries(this.#t))for(let a of e.querySelectorAll(':scope > [draggable="true"]'))r.push({id:a.getAttribute("data-id")||void 0,quadrant:i,text:a.textContent?.trim()||void 0});return r}set items(r){if(!this.#e)return;let i=Array.isArray(r)?r:[];q({newItems:i,nodes:this.#o,keyOf:e=>e.id??`${e.quadrant}:${e.text}`,renderItem:e=>{let a=this;if(typeof a.renderItem=="function"){let u=a.renderItem(e);if(u instanceof Element)return u.hasAttribute("draggable")||u.setAttribute("draggable","true"),u.hasAttribute("data-id")||u.setAttribute("data-id",String(e.id??"")),u}let t=document.createElement("article");return t.className="ie-card",t.setAttribute("draggable","true"),e.id&&t.setAttribute("data-id",String(e.id)),t.textContent=e.text||e.id||"",t},containerFor:e=>this.#t[e.quadrant]||this.#t["quick-wins"]}),this.#n=i,this.dispatchEvent(new CustomEvent("impact-effort:items-changed",{detail:{items:i,source:"property"},bubbles:!0}))}attributeChangedCallback(r,i,e){this.hasAttribute("data-upgraded")&&r==="src"&&e&&e!==i&&this.#c(e)}async#c(r){try{let i=await fetch(r);if(!i.ok)throw new Error(`HTTP ${i.status}`);let e=await i.json();if(!Array.isArray(e))return;let a=()=>{for(let t of n.QUADRANTS){let u=this.#t[t];if(u)for(let f of[...u.querySelectorAll("[draggable]")])f.remove()}e.forEach((t,u)=>{let f=t.quadrant||"quick-wins",m=t.id||`ie-item-${u}`,o;t.persona||t.action||t.storyId?(o=document.createElement("user-story"),o.setAttribute("detail","minimal"),t.storyId&&o.setAttribute("story-id",t.storyId),t.persona&&o.setAttribute("persona",t.persona),t.action&&o.setAttribute("action",t.action),t.benefit&&o.setAttribute("benefit",t.benefit),t.priority&&o.setAttribute("priority",t.priority),t.status&&o.setAttribute("status",t.status),t.points&&o.setAttribute("points",String(t.points))):(o=document.createElement("article"),o.textContent=t.label||t.text||""),o.setAttribute("draggable","true"),o.dataset.id=m,o.dataset.quadrant=f,(this.#t[f]||this.#t["quick-wins"]).appendChild(o)})};this.hasAttribute("data-upgraded")&&this.#e?v(this,a,"ie-vt"):a(),this.#u()}catch(i){console.warn(`[impact-effort] Failed to load src="${r}":`,i)}}#d(r){for(let[i,e]of Object.entries(this.#t))if(e===r)return i;return null}#l(r){let i=this.#r;i&&(i.textContent="",requestAnimationFrame(()=>{i.textContent=r}))}#f(r){return r.dataset.id||r.textContent.trim().slice(0,40)}#u(){let r={};for(let i of n.QUADRANTS){let e=this.#t[i];r[i]=e?e.querySelectorAll('[draggable="true"]').length:0}this.dispatchEvent(new CustomEvent("impact-effort:ready",{bubbles:!0,detail:{quadrantCounts:r}}))}};w("impact-effort",A);export{A as ImpactEffort};
|
|
2
2
|
//# sourceMappingURL=impact-effort.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var h=window.matchMedia("(prefers-reduced-motion: reduce)");var l=new Map;function u(
|
|
1
|
+
var h=window.matchMedia("(prefers-reduced-motion: reduce)");var l=new Map;function u(n,t,e={}){let r=e.priority??10,i={impl:t,bundle:e.bundle,contract:e.contract,priority:r},s=l.get(n);if(customElements.get(n)){if(!s||s.priority>=r){s&&s.priority===r&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=r){s.priority===r&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}l.set(n,i),customElements.define(n,t)}var o=class extends HTMLElement{#e=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,r,i){t.addEventListener(e,r,i),this.#e.push(()=>t.removeEventListener(e,r,i))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let r=this.#t.states;try{e?r.add(t):r.delete(t)}catch{let i=`--${t}`;e?r.add(i):r.delete(i)}}_adoptInternals(t){this.#t||(this.#t=t)}};var a=class extends o{#e;#t;#r=null;#i=!1;setup(){if(this.#i)return;let t=this.getAttribute("src");return t?(this.#r===null&&(this.#r=this.innerHTML),this.hasAttribute("lazy")?this.#n():this.#s(t),!0):!1}teardown(){this.#e?.disconnect(),this.#t?.abort()}get src(){return this.getAttribute("src")||""}set src(t){let e=t==null?"":String(t);this.src!==e&&(e?this.setAttribute("src",e):this.removeAttribute("src"),this.dispatchEvent(new CustomEvent("include-file:src-changed",{detail:{src:e,source:"property"},bubbles:!0})))}static get observedAttributes(){return["src"]}attributeChangedCallback(t,e,r){t==="src"&&r&&e!==r&&this.isConnected&&(this.hasAttribute("lazy")&&!this.#o()?this.#n():this.#s(r))}#o(){let t=this.getBoundingClientRect();return t.top<window.innerHeight+200&&t.bottom>-200}#n(){this.#e?.disconnect(),this.#e=new IntersectionObserver(t=>{for(let e of t)if(e.isIntersecting){this.#e.disconnect();let r=this.getAttribute("src");r&&this.#s(r)}},{rootMargin:"200px"}),this.#e.observe(this)}async#s(t){this.#t?.abort(),this.#t=new AbortController,this.setAttribute("data-loading",""),this.removeAttribute("data-loaded"),this.removeAttribute("data-error");try{let e=await fetch(t,{signal:this.#t.signal});if(!e.ok)throw new Error(`HTTP ${e.status}: ${e.statusText}`);let r=await e.text(),i=this.getAttribute("mode")||"replace";i==="replace"?this.innerHTML=r:i==="append"?this.insertAdjacentHTML("beforeend",r):i==="prepend"&&this.insertAdjacentHTML("afterbegin",r),this.hasAttribute("allow-scripts")?this.querySelectorAll("script").forEach(s=>{let c=document.createElement("script");for(let d of s.attributes)c.setAttribute(d.name,d.value);c.textContent=s.textContent,s.replaceWith(c)}):this.querySelectorAll("script").forEach(s=>s.remove()),this.removeAttribute("data-loading"),this.setAttribute("data-loaded",""),this.#i=!0,this.dispatchEvent(new CustomEvent("include-file:loaded",{bubbles:!0,detail:{src:t,html:r}}))}catch(e){if(e.name==="AbortError")return;this.removeAttribute("data-loading"),this.setAttribute("data-error",""),(this.getAttribute("mode")||"replace")==="replace"&&this.#r!==null&&!this.#i&&(this.innerHTML=this.#r),this.dispatchEvent(new CustomEvent("include-file:error",{bubbles:!0,detail:{src:t,error:e.message}}))}}reload(){let t=this.getAttribute("src");t&&this.#s(t)}};u("include-file",a);export{a as IncludeFile};
|
|
2
2
|
//# sourceMappingURL=include-file.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var E=class extends HTMLElement{#i=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#i)t();this.#i=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,r){t.addEventListener(e,i,r),this.#i.push(()=>t.removeEventListener(e,i,r))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let i=this.#t.states;try{e?i.add(t):i.delete(t)}catch{let r=`--${t}`;e?i.add(r):i.delete(r)}}_adoptInternals(t){this.#t||(this.#t=t)}};var X=window.matchMedia("(prefers-reduced-motion: reduce)");var $=new Map;function C(n,t,e={}){let i=e.priority??10,r={impl:t,bundle:e.bundle,contract:e.contract,priority:i},s=$.get(n);if(customElements.get(n)){if(!s||s.priority>=i){s&&s.priority===i&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=i){s.priority===i&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${s.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}$.set(n,r),customElements.define(n,t)}function N(n,t,e){let i=g(n?.sprintCount)>0?g(n.sprintCount)*(g(n.sprintWeeks)||1):g(n?.sprintWeeks),r=g(t?.teamFTE),s=L(g(e),0,1);return!(i>0)||!(r>0)||!(s>0)?0:Math.ceil(i*r*s)}function D(n){let t=2166136261;for(let e=0;e<n.length;e++)t^=n.charCodeAt(e),t=Math.imul(t,16777619);return(t>>>0).toString(36)}function x(n){return n===null||typeof n!="object"?JSON.stringify(n):Array.isArray(n)?"["+n.map(x).join(",")+"]":"{"+Object.keys(n).sort().map(e=>JSON.stringify(e)+":"+x(n[e])).join(",")+"}"}function T({time:n,cost:t,scope:e}){return D(x({time:n||{},cost:t||{},scope:e||{}}))}function g(n){if(n===""||n==null)return 0;let t=Number(n);return Number.isFinite(t)?t:0}function L(n,t,e){return Math.max(t,Math.min(e,n))}function P({time:n={},cost:t={},scope:e={}}={}){return{t:f(n.sprintCount,1)*f(n.sprintWeeks,1),c:f(t.teamFTE,0)*f(t.hoursPerWeek,40),s:f(e.mustHaveCount,0)+.5*f(e.shouldHaveCount,0)}}function O(n){let t=[n.t,n.c,n.s].filter(r=>r>0);if(t.length===0)return{time:1,cost:1,scope:1};let e=Math.max(...t),i=r=>r<=0?.55:.55+(1.45-.55)*(r/e);return{time:i(n.t),cost:i(n.c),scope:i(n.s)}}function k(n,t=80){let e={scope:-Math.PI/2,time:5*Math.PI/6,cost:Math.PI/6},i=O(P(n)),r=s=>({x:Math.cos(e[s])*t*i[s],y:Math.sin(e[s])*t*i[s],factor:i[s]});return{scope:r("scope"),time:r("time"),cost:r("cost")}}function H(n={}){let t=f(n.sprintCount,0),e=f(n.sprintWeeks,0);if(t>0&&e>0){let i=t*e;return t>1?`${i} weeks (${t} \xD7 ${e}wk)`:`${i} week${i===1?"":"s"}`}return e>0?`${e} week${e===1?"":"s"}`:n.deadline?`until ${n.deadline}`:"TBD"}function _(n={}){let t=Number(n.teamFTE),e=n.budgetTier,i=[];return Number.isFinite(t)&&t>0&&i.push(`${t} FTE`),e&&e!=="unset"&&i.push(e),i.length>0?i.join(" \xB7 "):"TBD"}function B(n={}){let t=f(n.mustHaveCount,0),e=f(n.shouldHaveCount,0);return t>0&&e>0?`${t} must \xB7 ${e} should`:t>0?`${t} must-have`:e>0?`${e} should-have`:"TBD"}function M(n){return typeof n=="string"&&n.trim().length>0?n:"TBD \u2014 click to set"}var l="http://www.w3.org/2000/svg",I={scope:{dx:0,dy:-22,anchor:"middle"},time:{dx:-10,dy:14,anchor:"end"},cost:{dx:10,dy:14,anchor:"start"}},j={scope:{dx:0,dy:-8,anchor:"middle"},time:{dx:-10,dy:28,anchor:"end"},cost:{dx:10,dy:28,anchor:"start"}},W={scope:{name:"Scope",unit:"# features / story points"},time:{name:"Time",unit:"hours / days / weeks"},cost:{name:"Cost",unit:"FTE / $"}};function F({value:n={},vertices:t,capacityPoints:e=0,capacitySource:i="formula",qualitySummary:r=""}={}){let s=t||k(n),o=document.createElementNS(l,"svg");o.setAttribute("viewBox","-220 -170 440 340"),o.setAttribute("role","group"),o.setAttribute("aria-label",`Project shape: ${e||0} capacity points. Click each corner to edit, or the center to open the quality compass.`);let c=document.createElementNS(l,"polygon");c.setAttribute("class","triangle"),c.setAttribute("points",[`${h(s.scope.x)},${h(s.scope.y)}`,`${h(s.time.x)},${h(s.time.y)}`,`${h(s.cost.x)},${h(s.cost.y)}`].join(" ")),o.append(c);let a=document.createElementNS(l,"g");a.setAttribute("class","center"),a.setAttribute("data-target","quality"),a.setAttribute("tabindex","0"),a.setAttribute("role","button"),a.setAttribute("aria-label",`Quality \u2014 ${M(r)}. Activate to open the NFR compass.`);let u=document.createElementNS(l,"circle");u.setAttribute("class","capacity-backdrop"),u.setAttribute("cx","0"),u.setAttribute("cy","4"),u.setAttribute("r","32"),a.append(u);let p=document.createElementNS(l,"rect");p.setAttribute("class","hit"),p.setAttribute("x","-36"),p.setAttribute("y","-30"),p.setAttribute("width","72"),p.setAttribute("height","68"),p.setAttribute("rx","34"),a.append(p);let m=document.createElementNS(l,"text");m.setAttribute("class","quality-label"),m.setAttribute("x","0"),m.setAttribute("y","-15"),m.setAttribute("text-anchor","middle"),m.textContent="Quality",a.append(m);let y=document.createElementNS(l,"text");y.setAttribute("class","capacity"),y.setAttribute("x","0"),y.setAttribute("y","7"),y.setAttribute("text-anchor","middle"),y.setAttribute("dominant-baseline","middle"),y.textContent=e>0?String(e):"\u2014",a.append(y);let d=document.createElementNS(l,"text");d.setAttribute("class","capacity-unit"),d.setAttribute("x","0"),d.setAttribute("y","26"),d.setAttribute("text-anchor","middle"),d.textContent=i==="manual"?"pts (manual)":"pts",a.append(d);let b=document.createElementNS(l,"title");b.textContent=M(r),a.append(b),o.append(a);for(let S of["scope","time","cost"])o.append(R(S,s[S],n));return o}function R(n,t,e){let i=I[n],r=j[n],s=W[n],o=n==="scope"?B(e.scope):n==="cost"?_(e.cost):H(e.time),c=document.createElementNS(l,"g");c.setAttribute("class","vertex"),c.setAttribute("data-axis",n),c.setAttribute("tabindex","0"),c.setAttribute("role","button"),c.setAttribute("aria-label",`${s.name} \u2014 ${o}. Activate to edit.`);let a=document.createElementNS(l,"rect");a.setAttribute("class","hit");let u=160,p=50,m;i.anchor==="end"?m=t.x-u+6:i.anchor==="start"?m=t.x-6:m=t.x-u/2;let y=n==="scope"?t.y-p+6:t.y-6;a.setAttribute("x",String(h(m))),a.setAttribute("y",String(h(y))),a.setAttribute("width",String(u)),a.setAttribute("height",String(p)),a.setAttribute("rx","6"),c.append(a);let d=document.createElementNS(l,"text");d.setAttribute("class","vertex-name"),d.setAttribute("x",String(h(t.x+i.dx))),d.setAttribute("y",String(h(t.y+i.dy))),d.setAttribute("text-anchor",i.anchor),d.textContent=s.name,c.append(d);let b=document.createElementNS(l,"text");b.setAttribute("class","vertex-summary"),b.setAttribute("x",String(h(t.x+r.dx))),b.setAttribute("y",String(h(t.y+r.dy))),b.setAttribute("text-anchor",r.anchor),b.textContent=o,c.append(b);let S=document.createElementNS(l,"title");return S.textContent=`${s.name}: ${o} \u2014 ${s.unit}`,c.append(S),c}function f(n,t){if(n===""||n==null)return t;let e=Number(n);return Number.isFinite(e)&&e>0?e:t}function h(n){return Math.round(n*100)/100}var A=["time","cost","scope"],v={time:[{key:"sprintWeeks",label:"Sprint length (weeks)",type:"number",min:1,step:1,value:2,width:"6rem"},{key:"sprintCount",label:"Number of sprints",type:"number",min:1,step:1,value:3,width:"6rem"},{key:"hoursPerWeek",label:"Hours per week (per FTE)",type:"number",min:1,max:168,step:1,value:40,width:"6rem"},{key:"deadline",label:"Deadline (optional)",type:"date",width:"12rem"}],cost:[{key:"teamFTE",label:"Team size (FTE)",type:"number",min:0,step:.5,value:1,width:"6rem"},{key:"budgetTier",label:"Budget tier",type:"select",options:[["solo","Solo"],["small","Small (2-5)"],["medium","Medium (6-15)"],["large","Large (16+)"]],value:"solo",width:"14rem"},{key:"contractorBudget",label:"Contractor budget ($, optional)",type:"number",min:0,step:100,width:"10rem"}],scope:[{key:"mustHaveCount",label:"Must-have feature count",type:"number",min:0,step:1,width:"6rem"},{key:"shouldHaveCount",label:"Should-have feature count",type:"number",min:0,step:1,width:"6rem"},{key:"scopeNotes",label:"Notes",type:"textarea",rows:3,maxlength:2e3}]},q={scope:"Scope",time:"Time",cost:"Cost"},w=class extends E{static formAssociated=!0;static get observedAttributes(){return["data-focus-factor","data-min-capacity","data-quality-href","data-quality-summary","disabled","locked"]}#i;#t={time:{},cost:{},scope:{},capacityPoints:0,capacitySource:"formula",hash:""};#n=null;#o=[];#s="";#r={};constructor(){super(),this.#i=this.attachInternals(),this._adoptInternals(this.#i)}setup(){this.#s=this.getAttribute("data-quality-summary")||"",this.#p(),this.#a(),this.listen(this,"click",t=>this.#l(t)),this.listen(this,"keydown",t=>this.#d(t))}attributeChangedCallback(t){this.isConnected&&(t==="data-focus-factor"||t==="data-min-capacity"?this.#e({source:"attribute"}):t==="data-quality-summary"?(this.#s=this.getAttribute("data-quality-summary")||"",this.#a()):(t==="disabled"||t==="locked")&&this.#b())}get value(){return JSON.parse(JSON.stringify({...this.#t,revisionLog:this.#o}))}set value(t){if(!(!t||typeof t!="object")){for(let e of A)t[e]&&typeof t[e]=="object"&&(this.#t[e]={...t[e]});t.capacitySource==="manual"&&Number.isFinite(t.capacityPoints)?(this.#n=t.capacityPoints,this.#t.capacitySource="manual"):(this.#n=null,this.#t.capacitySource="formula"),Array.isArray(t.revisionLog)&&(this.#o=[...t.revisionLog]),this.#u(),this.#e({source:"property"})}}get capacityPoints(){return this.#t.capacityPoints}get capacitySource(){return this.#t.capacitySource}get hash(){return this.#t.hash}get revisionLog(){return JSON.parse(JSON.stringify(this.#o))}get qualitySummary(){return this.#s}set qualitySummary(t){this.#s=String(t??""),this.#a()}openEditor(t){if(!A.includes(t))return;let e=this.#h(t);typeof e.showModal=="function"?e.showModal():e.setAttribute("open","")}revise(t,e,i){if(!t||typeof i!="string"||i.length<10)throw new Error("iron-triangle: revise() requires field and a reason of at least 10 characters");let r=this.#g(t);this.#S(t,e);let s={field:t,from:r,to:e,reason:i};this.#o.push({revisedAt:new Date().toISOString(),changes:[s]}),this.dispatchEvent(new CustomEvent("iron-triangle:revise",{bubbles:!0,composed:!0,detail:s})),this.#u(),this.#e({source:"revise"})}setManual(t){let e=Math.max(1,Math.floor(Number(t)||0));this.#n=e;let i=this.#t.capacitySource;this.#t.capacitySource="manual",i!=="manual"&&this.dispatchEvent(new CustomEvent("iron-triangle:mode",{bubbles:!0,composed:!0,detail:{from:i,to:"manual"}})),this.setState("manual",!0),this.setState("formula",!1),this.#e({source:"manual"})}setFormula(){this.#n=null;let t=this.#t.capacitySource;this.#t.capacitySource="formula",t!=="formula"&&this.dispatchEvent(new CustomEvent("iron-triangle:mode",{bubbles:!0,composed:!0,detail:{from:t,to:"formula"}})),this.setState("manual",!1),this.setState("formula",!0),this.#e({source:"formula"})}recalc(){this.#e({source:"recalc"})}#l(t){let e=t.target.closest?.(".vertex[data-axis]");if(e&&this.contains(e)){t.preventDefault(),this.openEditor(e.dataset.axis);return}let i=t.target.closest?.('.center[data-target="quality"]');i&&this.contains(i)&&(t.preventDefault(),this.#c())}#d(t){if(t.key!=="Enter"&&t.key!==" ")return;let e=t.target.closest?.(".vertex[data-axis]");if(e&&this.contains(e)){t.preventDefault(),this.openEditor(e.dataset.axis);return}let i=t.target.closest?.('.center[data-target="quality"]');i&&this.contains(i)&&(t.preventDefault(),this.#c())}#c(){let t=new CustomEvent("iron-triangle:open-quality",{bubbles:!0,composed:!0,cancelable:!0,detail:{qualitySummary:this.#s,capacityPoints:this.#t.capacityPoints}});if(this.dispatchEvent(t)){let i=this.getAttribute("data-quality-href");i&&window.location.assign(i)}}#h(t){if(this.#r[t])return this.#r[t];let e=document.createElement("dialog");e.className=`iron-triangle-dialog iron-triangle-dialog--${t}`,e.setAttribute("aria-label",`${q[t]} \u2014 edit`);let i=document.createElement("form");i.method="dialog",i.setAttribute("data-layout","stack"),i.setAttribute("data-layout-gap","m");let r=document.createElement("h3");r.textContent=q[t],i.append(r);for(let a of v[t])i.append(J(t,a,this.#t[t]?.[a.key]));let s=document.createElement("div");s.setAttribute("data-layout","cluster"),s.setAttribute("data-layout-gap","s"),s.setAttribute("data-layout-justify","end");let o=document.createElement("button");o.type="button",o.value="cancel",o.textContent="Cancel",o.addEventListener("click",()=>e.close("cancel"));let c=document.createElement("button");return c.type="submit",c.value="save",c.textContent="Save",s.append(o,c),i.append(s),e.append(i),this.append(e),this.#r[t]=e,i.addEventListener("submit",a=>{a.preventDefault(),this.#m(t,i),e.close("save"),this.#e({source:"dialog",field:t})}),e}#m(t,e){let i={};for(let r of v[t]){let s=e.querySelector(`[name="${t}.${r.key}"]`);if(!s)continue;let o=s.type==="checkbox"?s.checked:s.value;if(!(o===""||o==null))if(r.type==="number"){let c=Number(o);Number.isFinite(c)&&(i[r.key]=c)}else i[r.key]=o}this.#t[t]=i}#u(){for(let t of A){let e=this.#r[t];if(e)for(let i of v[t]){let r=e.querySelector(`[name="${t}.${i.key}"]`);if(!r)continue;let s=this.#t[t]?.[i.key];r.value=s==null?"":String(s)}}}#p(){for(let t of A)for(let e of v[t])e.value!==void 0&&this.#t[t][e.key]===void 0&&(this.#t[t][e.key]=e.value);this.#e({source:"init"})}#e({source:t,field:e}={}){let i=Number(this.dataset.focusFactor??.6),r=Number(this.dataset.minCapacity??1),s;this.#t.capacitySource==="manual"&&this.#n!=null?s=this.#n:s=N(this.#t.time,this.#t.cost,i),Number.isFinite(r)&&s>0&&s<r&&(s=r),this.#t.capacityPoints=s,this.#t.hash=T(this.#t),this.#a(),this.#f(),this.#y(),this.dispatchEvent(new CustomEvent("iron-triangle:change",{bubbles:!0,composed:!0,detail:{...this.value,source:t,field:e}}))}#a(){let t=F({value:this.#t,vertices:k(this.#t),capacityPoints:this.#t.capacityPoints,capacitySource:this.#t.capacitySource,qualitySummary:this.#s}),e=this.querySelector(":scope > svg");e?e.replaceWith(t):this.prepend(t),this.dataset.capacityPoints=String(this.#t.capacityPoints),this.dataset.capacitySource=this.#t.capacitySource}#f(){this.setState("formula",this.#t.capacitySource==="formula"),this.setState("manual",this.#t.capacitySource==="manual"),this.setState("unbudgeted",!(this.#t.capacityPoints>0));let t=this.#t.time?.deadline,e=!1;if(t){let i=new Date(t).getTime();Number.isFinite(i)&&(e=i<Date.now())}this.setState("over-deadline",e)}#y(){try{this.#i.setFormValue(JSON.stringify(this.value))}catch{}}#b(){let t=this.hasAttribute("disabled")||this.hasAttribute("locked");for(let e of Object.values(this.#r))for(let i of e.querySelectorAll("input, select, textarea, button"))i.disabled=t}#g(t){if(t==="capacityPoints")return this.#t.capacityPoints;let[e,i]=t.split(".");return e&&i?this.#t[e]?.[i]:void 0}#S(t,e){if(t==="capacityPoints"){this.setManual(e);return}let[i,r]=t.split(".");!i||!r||(this.#t[i]||(this.#t[i]={}),this.#t[i][r]=e)}};function J(n,t,e){let i=document.createElement("form-field"),r=`${n}-${t.key}`,s=document.createElement("label");s.setAttribute("for",r),s.textContent=t.label,i.append(s);let o;if(t.type==="select"){o=document.createElement("select");for(let[c,a]of t.options){let u=document.createElement("option");u.value=c,u.textContent=a,(e===c||e==null&&t.value===c)&&(u.selected=!0),o.append(u)}}else t.type==="textarea"?(o=document.createElement("textarea"),t.rows&&(o.rows=t.rows),t.maxlength&&(o.maxLength=t.maxlength),e!=null&&(o.value=String(e))):(o=document.createElement("input"),o.type=t.type,t.min!=null&&(o.min=String(t.min)),t.max!=null&&(o.max=String(t.max)),t.step!=null&&(o.step=String(t.step)),e!=null?o.value=String(e):t.value!=null&&(o.value=String(t.value)));return o.id=r,o.name=`${n}.${t.key}`,t.width&&(o.style.inlineSize=t.width),i.append(o),i}C("iron-triangle",w);export{w as IronTriangle};
|
|
2
|
+
//# sourceMappingURL=iron-triangle.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var v=window.matchMedia("(prefers-reduced-motion: reduce)");var A=new Map;function E(u,t,n={}){let s=n.priority??10,o={impl:t,bundle:n.bundle,contract:n.contract,priority:s},e=A.get(u);if(customElements.get(u)){if(!e||e.priority>=s){e&&e.priority===s&&e.impl!==t&&console.warn(`[VB Bundle] Tag <${u}> already registered by "${e.bundle}" (priority ${e.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${u}> defined by "${e.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(e&&e.priority>=s){e.priority===s&&console.warn(`[VB Bundle] Tag <${u}> already registered by "${e.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}A.set(u,o),customElements.define(u,t)}var y=class extends HTMLElement{#i=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0})))}disconnectedCallback(){for(let t of this.#i)t();this.#i=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,n,s,o){t.addEventListener(n,s,o),this.#i.push(()=>t.removeEventListener(n,s,o))}setup(){}teardown(){}};function k({newItems:u,nodes:t,keyOf:n,renderItem:s,containerFor:o}){let e=[],i=[],r=[],c=new Set;for(let a of u)c.add(n(a));for(let[a,l]of[...t])c.has(a)||(l.remove(),t.delete(a),r.push(a));let d=new Map;for(let a of u){let l=n(a),h=t.get(l)||null,f=o(a,h);d.has(f)||d.set(f,[]),d.get(f).push({item:a,key:l,existing:h})}for(let[a,l]of d)for(let h=0;h<l.length;h++){let{item:f,key:b,existing:w}=l[h],m=w;m?(m.parentElement!==a||a.children[h]!==m)&&i.push(b):(m=s(f),t.set(b,m),e.push(b));let p=a.children[h];p!==m&&a.insertBefore(m,p||null)}return{added:e,moved:i,removed:r}}function x(u){return class extends u{static keyOf(t){return t.id}#i=[];#t=new Map;get items(){return this.#i}set items(t){let n=t||[],s=k({newItems:n,nodes:this.#t,keyOf:this.constructor.keyOf,renderItem:o=>this._renderItem(o),containerFor:(o,e)=>this._containerFor(o,e)});this.#i=n,this._postRender({...s,items:n}),this._emit("items-changed",{items:n},"api")}_renderItem(t){throw new Error(`${this.constructor.name}: must implement _renderItem(item)`)}_containerFor(t,n){return this}_postRender(t){}_emit(t,n,s="api"){this.dispatchEvent(new CustomEvent(`${this.localName}:${t}`,{detail:{...n,source:s},bubbles:!0}))}_nodeFor(t){return this.#t.get(t)||null}_seedCollection(t,n){this.#i=t,this.#t.clear();for(let[s,o]of n)this.#t.set(s,o)}_setItemsSilently(t){this.#i=t}}}var C=class u extends x(y){static get observedAttributes(){return["src","compact","title"]}static keyOf(t){return t.id??t.storyId}static#i=0;#t=null;#n={};#o={};#e=null;#l="";#s=[];#r=null;setup(){this.#l=`kb-${++u.#i}`;let t=[...this.querySelectorAll(":scope > section[data-column]")];this.#s=t.map(e=>{let i=e.getAttribute("data-column")||"",c=e.getAttribute("data-column-label")||""||this.#d(i),d=e.getAttribute("data-wip"),a=d?parseInt(d,10):null,l=e.getAttribute("data-column-color")||null,h=[...e.children];return{id:i,label:c,wip:a,color:l,children:h}});for(let e of t)e.remove();this.#t=document.createElement("div"),this.#t.className="kb-columns",this.#t.setAttribute("role","region"),this.#t.setAttribute("aria-label","Kanban board");let n=0;for(let e of this.#s){let i=document.createElement("section");i.className="kb-column",i.setAttribute("data-column-id",e.id),e.color&&i.setAttribute("data-column-tint",e.color);let r=document.createElement("header");r.className="kb-column-header";let c=document.createElement("h3");c.textContent=e.label;let d=document.createElement("output");if(d.className="kb-count",d.textContent=String(e.children.length),c.appendChild(d),e.wip!==null&&!isNaN(e.wip)){let l=document.createElement("span");l.className="kb-wip",l.textContent=`/ ${e.wip}`,l.setAttribute("aria-label",`WIP limit ${e.wip}`),c.appendChild(l)}r.appendChild(c),i.appendChild(r);let a=document.createElement("drag-surface");if(a.setAttribute("group",this.#l),a.setAttribute("aria-label",`${e.label} items`),a.setAttribute("data-layout","stack"),a.setAttribute("data-layout-gap","xs"),e.children.length>0){for(let l of e.children)l.hasAttribute("draggable")||l.setAttribute("draggable","true"),l.hasAttribute("data-id")||(l.dataset.id=`kb-item-${n}`),a.appendChild(l);n+=e.children.length}else{let l=document.createElement("p");l.className="kb-empty",l.textContent="No items",a.appendChild(l)}i.appendChild(a),this.#t.appendChild(i),this.#n[e.id]=a,this.#o[e.id]=i,e.wip!==null&&e.children.length>e.wip&&i.setAttribute("data-wip-exceeded","")}let s=this.getAttribute("title");if(s){let e=document.createElement("h2");e.className="kb-title",e.textContent=s,this.appendChild(e)}this.appendChild(this.#t),this.#e=document.createElement("div"),this.#e.className="kb-live-region",this.#e.setAttribute("role","status"),this.#e.setAttribute("aria-live","polite"),this.#e.setAttribute("aria-atomic","true"),this.appendChild(this.#e),this.listen(this,"drag-surface:reorder",e=>{let i=e.detail,r=e.target.closest("drag-surface"),c=this.#c(r);c&&(this.#a(c),this.#u("drag"),this.dispatchEvent(new CustomEvent("kanban-board:reorder",{bubbles:!0,detail:{itemId:i.itemId,column:c,oldIndex:i.oldIndex,newIndex:i.newIndex}})))}),this.listen(this,"drag-surface:transfer",e=>{let i=e.detail,r=i.fromSurface,c=i.toSurface,d=this.#c(r),a=this.#c(c);if(!d||!a)return;i.item&&i.item.setAttribute("data-column",a),this.#a(d),this.#a(a);let l=c.querySelector(".kb-empty");if(l&&l.remove(),r.querySelectorAll(':scope > [draggable="true"]').length===0&&!r.querySelector(".kb-empty")){let g=document.createElement("p");g.className="kb-empty",g.textContent="No items",r.appendChild(g)}let f=this.#g(i.item),b=this.#h(d),w=this.#h(a);this.#b(`${f} moved from ${b} to ${w}`),this.#u("drag"),this.dispatchEvent(new CustomEvent("kanban-board:transfer",{bubbles:!0,detail:{itemId:i.itemId,fromColumn:d,toColumn:a,newIndex:i.newIndex,item:i.item}}));let m=c.querySelectorAll(':scope > [draggable="true"]').length,p=this.#s.find(g=>g.id===a);p?.wip!==null&&p?.wip!==void 0&&m>p.wip&&this.dispatchEvent(new CustomEvent("kanban-board:wip-exceeded",{bubbles:!0,detail:{column:a,limit:p.wip,count:m}}))}),this.#m();let o=this.getAttribute("src");if(o){this._loadSrc(o);return}this.dispatchEvent(new CustomEvent("kanban-board:ready",{bubbles:!0,detail:{columnCount:this.#s.length,itemCount:n}}))}#m(){let t=[],n=new Map;for(let[s,o]of Object.entries(this.#n)){let e=o.querySelectorAll(':scope > [draggable="true"]');for(let i of e){let r=i.getAttribute("data-id");r&&(t.push({id:r,column:s}),n.set(r,i))}}this._seedCollection(t,n)}#u(t){let n=[],s=new Map;for(let o of this.items){let e=String(o.id??o.storyId??"");e&&s.set(e,o)}for(let[o,e]of Object.entries(this.#n)){let i=e.querySelectorAll(':scope > [draggable="true"]');for(let r of i){let c=r.getAttribute("data-id");if(!c)continue;let d=s.get(c);n.push(d?{...d,column:o}:{id:c,column:o})}}this._setItemsSilently(n),this._emit("items-changed",{items:n},t)}teardown(){let t=this.querySelector(".kb-title");t&&t.remove(),this.#t&&(this.#t.remove(),this.#t=null),this.#e&&(this.#e.remove(),this.#e=null),this.#n={},this.#o={},this.#s=[]}get columns(){return this.#s.map(t=>({id:t.id,label:t.label,wip:t.wip??void 0,color:t.color??void 0}))}set columns(t){let n=(t||[]).map(s=>({id:s.id,label:s.label||this.#d(s.id),wip:s.wip??null,color:s.color??null,children:[]}));this.#t&&(this.#t.remove(),this.#t=null),this.#n={},this.#o={},this.#s=n,this.#p()}get renderItem(){return this.#r}set renderItem(t){this.#r=typeof t=="function"?t:null}_renderItem(t){let n;if(this.#r){let s=this.#r(t);if(!(s instanceof Element))throw new Error("kanban-board: renderItem must return an Element");n=s}else n=this.#f(t);return n.hasAttribute("draggable")||n.setAttribute("draggable","true"),n.hasAttribute("data-id")||n.setAttribute("data-id",String(u.keyOf(t))),n}_containerFor(t,n){let s=this.#n[t.column];if(!s)throw new Error(`kanban-board: no column "${t.column}" \u2014 set .columns first or include item.column matching an existing column id`);let o=s.querySelector(":scope > .kb-empty");return o&&o.remove(),s}_postRender(){for(let t of Object.keys(this.#n)){this.#a(t);let n=this.#n[t],s=n.querySelectorAll(':scope > [draggable="true"]'),o=n.querySelector(":scope > .kb-empty");if(s.length===0&&!o){let e=document.createElement("p");e.className="kb-empty",e.textContent="No items",n.appendChild(e)}else s.length>0&&o&&o.remove()}}#f(t){let n=customElements.get("work-item")?"work-item":"article",s=document.createElement(n);return n==="work-item"?s.data={itemId:t.id??t.storyId,type:t.type,priority:t.priority,status:t.status,estimate:t.estimate!=null?String(t.estimate):void 0,assignee:t.assignee,title:t.title,description:t.description,checklist:t.checklist,notes:t.notes,detail:t.detail}:(s.className="kb-card",s.textContent=t.title||t.label||t.id),s}#p(){this.#t=document.createElement("div"),this.#t.className="kb-columns",this.#t.setAttribute("role","region"),this.#t.setAttribute("aria-label","Kanban board");for(let t of this.#s){let n=document.createElement("section");n.className="kb-column",n.setAttribute("data-column-id",t.id),t.color&&n.setAttribute("data-column-tint",t.color);let s=document.createElement("header");s.className="kb-column-header";let o=document.createElement("h3");o.textContent=t.label;let e=document.createElement("output");if(e.className="kb-count",e.textContent="0",o.appendChild(e),t.wip!=null&&!isNaN(t.wip)){let c=document.createElement("span");c.className="kb-wip",c.textContent=`/ ${t.wip}`,c.setAttribute("aria-label",`WIP limit ${t.wip}`),o.appendChild(c)}s.appendChild(o),n.appendChild(s);let i=document.createElement("drag-surface");i.setAttribute("group",this.#l),i.setAttribute("aria-label",`${t.label} items`),i.setAttribute("data-layout","stack"),i.setAttribute("data-layout-gap","xs");let r=document.createElement("p");r.className="kb-empty",r.textContent="No items",i.appendChild(r),n.appendChild(i),this.#t.appendChild(n),this.#n[t.id]=i,this.#o[t.id]=n}this.appendChild(this.#t)}attributeChangedCallback(t,n,s){n===s||!this.isConnected||t==="src"&&this._loadSrc(s)}async _loadSrc(t){if(t)try{let n=await fetch(t);if(!n.ok)throw new Error(`HTTP ${n.status}`);let s=await n.json();for(;this.firstChild;)this.firstChild.remove();for(let o of s.columns||[]){let e=document.createElement("section");e.setAttribute("data-column",o.id),o.label&&e.setAttribute("data-column-label",o.label),o.wip!=null&&e.setAttribute("data-wip",String(o.wip)),o.color&&e.setAttribute("data-column-color",o.color);for(let i of o.items||[]){let r;i.persona||i.action||i.storyId?(r=document.createElement("user-story"),r.setAttribute("detail",i.detail||"minimal"),i.storyId&&r.setAttribute("story-id",i.storyId),i.persona&&r.setAttribute("persona",i.persona),i.action&&r.setAttribute("action",i.action),i.benefit&&r.setAttribute("benefit",i.benefit),i.priority&&r.setAttribute("priority",i.priority),i.status&&r.setAttribute("status",i.status),i.points&&r.setAttribute("points",String(i.points))):(r=document.createElement("article"),r.className="kb-card",r.textContent=i.text||i.label||""),r.setAttribute("draggable","true"),r.dataset.id=i.id||i.storyId||"",e.appendChild(r)}this.appendChild(e)}this.teardown(),this.removeAttribute("data-upgraded"),this.setup()}catch(n){console.warn(`[kanban-board] Failed to load src="${t}":`,n)}}#c(t){if(!t)return null;for(let[n,s]of Object.entries(this.#n))if(s===t)return n;return null}#a(t){let n=this.#n[t],s=this.#o[t];if(!n||!s)return;let o=n.querySelectorAll(':scope > [draggable="true"]').length,e=s.querySelector(".kb-count");e&&(e.textContent=String(o));let i=this.#s.find(r=>r.id===t);i?.wip!==null&&i?.wip!==void 0&&(o>i.wip?s.setAttribute("data-wip-exceeded",""):s.removeAttribute("data-wip-exceeded"))}#h(t){return this.#s.find(s=>s.id===t)?.label||this.#d(t)}#b(t){this.#e&&(this.#e.textContent="",requestAnimationFrame(()=>{this.#e&&(this.#e.textContent=t)}))}#g(t){return t.getAttribute("story-id")||t.getAttribute("data-id")||t.textContent?.trim().slice(0,40)||"item"}#d(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,n=>n.toUpperCase())}};E("kanban-board",C);export{C as KanbanBoard};
|
|
1
|
+
var I=window.matchMedia("(prefers-reduced-motion: reduce)");var E=new Map;function k(u,t,e={}){let i=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:i},n=E.get(u);if(customElements.get(u)){if(!n||n.priority>=i){n&&n.priority===i&&n.impl!==t&&console.warn(`[VB Bundle] Tag <${u}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${u}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=i){n.priority===i&&console.warn(`[VB Bundle] Tag <${u}> already registered by "${n.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}E.set(u,o),customElements.define(u,t)}var y=class extends HTMLElement{#i=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#i)t();this.#i=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,o){t.addEventListener(e,i,o),this.#i.push(()=>t.removeEventListener(e,i,o))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let i=this.#t.states;try{e?i.add(t):i.delete(t)}catch{let o=`--${t}`;e?i.add(o):i.delete(o)}}_adoptInternals(t){this.#t||(this.#t=t)}};function v({newItems:u,nodes:t,keyOf:e,renderItem:i,containerFor:o}){let n=[],s=[],r=[],a=new Set;for(let l of u)a.add(e(l));for(let[l,c]of[...t])a.has(l)||(c.remove(),t.delete(l),r.push(l));let d=new Map;for(let l of u){let c=e(l),h=t.get(c)||null,f=o(l,h);d.has(f)||d.set(f,[]),d.get(f)?.push({item:l,key:c,existing:h})}for(let[l,c]of d)for(let h=0;h<c.length;h++){let{item:f,key:b,existing:w}=c[h],m=w;m?(m.parentElement!==l||l.children[h]!==m)&&s.push(b):(m=i(f),t.set(b,m),n.push(b));let p=l.children[h];p!==m&&l.insertBefore(m,p||null)}return{added:n,moved:s,removed:r}}function x(u){let t=u;return class extends t{static keyOf(e){return e.id}#i=[];#t=new Map;get items(){return this.#i}set items(e){let i=e||[],o=v({newItems:i,nodes:this.#t,keyOf:this.constructor.keyOf,renderItem:n=>this._renderItem(n),containerFor:(n,s)=>this._containerFor(n,s)});this.#i=i,this._postRender({...o,items:i}),this._emit("items-changed",{items:i},"api")}_renderItem(e){throw new Error(`${this.constructor.name}: must implement _renderItem(item)`)}_containerFor(e,i){return this}_postRender(e){}_emit(e,i,o="api"){this.dispatchEvent(new CustomEvent(`${this.localName}:${e}`,{detail:{...i,source:o},bubbles:!0}))}_nodeFor(e){return this.#t.get(e)||null}_seedCollection(e,i){this.#i=e,this.#t.clear();for(let[o,n]of i)this.#t.set(o,n)}_setItemsSilently(e){this.#i=e}}}var S=0;function A(u,t,e="vb-vt"){if(!u?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return t(),null;let i=`${e}-${++S}`;u.style.viewTransitionName=i;let o=document.startViewTransition(t);return o.finished.finally(()=>{u.style.viewTransitionName===i&&(u.style.viewTransitionName="")}),o}var C=class u extends x(y){static get observedAttributes(){return["src","compact","title"]}static keyOf(t){return t.id??t.storyId}static#i=0;#t=null;#n={};#r={};#e=null;#l="";#s=[];#o=null;setup(){this.#l=`kb-${++u.#i}`;let t=[...this.querySelectorAll(":scope > section[data-column]")];this.#s=t.map(n=>{let s=n.getAttribute("data-column")||"",a=n.getAttribute("data-column-label")||""||this.#d(s),d=n.getAttribute("data-wip"),l=d?parseInt(d,10):null,c=n.getAttribute("data-column-color")||null,h=[...n.children];return{id:s,label:a,wip:l,color:c,children:h}});for(let n of t)n.remove();this.#t=document.createElement("div"),this.#t.className="kb-columns",this.#t.setAttribute("role","region"),this.#t.setAttribute("aria-label","Kanban board");let e=0;for(let n of this.#s){let s=document.createElement("section");s.className="kb-column",s.setAttribute("data-column-id",n.id),n.color&&s.setAttribute("data-column-tint",n.color);let r=document.createElement("header");r.className="kb-column-header";let a=document.createElement("h3");a.textContent=n.label;let d=document.createElement("output");if(d.className="kb-count",d.textContent=String(n.children.length),a.appendChild(d),n.wip!==null&&!isNaN(n.wip)){let c=document.createElement("span");c.className="kb-wip",c.textContent=`/ ${n.wip}`,c.setAttribute("aria-label",`WIP limit ${n.wip}`),a.appendChild(c)}r.appendChild(a),s.appendChild(r);let l=document.createElement("drag-surface");if(l.setAttribute("group",this.#l),l.setAttribute("aria-label",`${n.label} items`),l.setAttribute("data-layout","stack"),l.setAttribute("data-layout-gap","xs"),n.children.length>0){for(let c of n.children)c.hasAttribute("draggable")||c.setAttribute("draggable","true"),c.hasAttribute("data-id")||(c.dataset.id=`kb-item-${e}`),l.appendChild(c);e+=n.children.length}else{let c=document.createElement("p");c.className="kb-empty",c.textContent="No items",l.appendChild(c)}s.appendChild(l),this.#t.appendChild(s),this.#n[n.id]=l,this.#r[n.id]=s,n.wip!==null&&n.children.length>n.wip&&s.setAttribute("data-wip-exceeded","")}let i=this.getAttribute("title");if(i){let n=document.createElement("h2");n.className="kb-title",n.textContent=i,this.appendChild(n)}this.appendChild(this.#t),this.#e=document.createElement("div"),this.#e.className="kb-live-region",this.#e.setAttribute("role","status"),this.#e.setAttribute("aria-live","polite"),this.#e.setAttribute("aria-atomic","true"),this.appendChild(this.#e),this.listen(this,"drag-surface:reorder",n=>{let s=n.detail,r=n.target.closest("drag-surface"),a=this.#c(r);a&&(this.#a(a),this.#u("drag"),this.dispatchEvent(new CustomEvent("kanban-board:reorder",{bubbles:!0,detail:{itemId:s.itemId,column:a,oldIndex:s.oldIndex,newIndex:s.newIndex}})))}),this.listen(this,"drag-surface:transfer",n=>{let s=n.detail,r=s.fromSurface,a=s.toSurface,d=this.#c(r),l=this.#c(a);if(!d||!l)return;s.item&&s.item.setAttribute("data-column",l),this.#a(d),this.#a(l);let c=a.querySelector(".kb-empty");if(c&&c.remove(),r.querySelectorAll(':scope > [draggable="true"]').length===0&&!r.querySelector(".kb-empty")){let g=document.createElement("p");g.className="kb-empty",g.textContent="No items",r.appendChild(g)}let f=this.#g(s.item),b=this.#h(d),w=this.#h(l);this.#b(`${f} moved from ${b} to ${w}`),this.#u("drag"),this.dispatchEvent(new CustomEvent("kanban-board:transfer",{bubbles:!0,detail:{itemId:s.itemId,fromColumn:d,toColumn:l,newIndex:s.newIndex,item:s.item}}));let m=a.querySelectorAll(':scope > [draggable="true"]').length,p=this.#s.find(g=>g.id===l);p?.wip!==null&&p?.wip!==void 0&&m>p.wip&&this.dispatchEvent(new CustomEvent("kanban-board:wip-exceeded",{bubbles:!0,detail:{column:l,limit:p.wip,count:m}}))}),this.#m();let o=this.getAttribute("src");if(o){this._loadSrc(o);return}this.dispatchEvent(new CustomEvent("kanban-board:ready",{bubbles:!0,detail:{columnCount:this.#s.length,itemCount:e}}))}#m(){let t=[],e=new Map;for(let[i,o]of Object.entries(this.#n)){let n=o.querySelectorAll(':scope > [draggable="true"]');for(let s of n){let r=s.getAttribute("data-id");r&&(t.push({id:r,column:i}),e.set(r,s))}}this._seedCollection(t,e)}#u(t){let e=[],i=new Map;for(let o of this.items){let n=String(o.id??o.storyId??"");n&&i.set(n,o)}for(let[o,n]of Object.entries(this.#n)){let s=n.querySelectorAll(':scope > [draggable="true"]');for(let r of s){let a=r.getAttribute("data-id");if(!a)continue;let d=i.get(a);e.push(d?{...d,column:o}:{id:a,column:o})}}this._setItemsSilently(e),this._emit("items-changed",{items:e},t)}teardown(){let t=this.querySelector(".kb-title");t&&t.remove(),this.#t&&(this.#t.remove(),this.#t=null),this.#e&&(this.#e.remove(),this.#e=null),this.#n={},this.#r={},this.#s=[]}get columns(){return this.#s.map(t=>({id:t.id,label:t.label,wip:t.wip??void 0,color:t.color??void 0}))}set columns(t){let e=(t||[]).map(s=>({id:s.id,label:s.label||this.#d(s.id),wip:s.wip??null,color:s.color??null,children:[]})),i=this.#t;this.#n={},this.#r={},this.#s=e;let o=this.#p();this.#t=o;let n=()=>{i&&i.remove(),this.appendChild(o)};this.hasAttribute("data-upgraded")&&i?A(this,n,"kb-vt"):n()}get renderItem(){return this.#o}set renderItem(t){this.#o=typeof t=="function"?t:null}_renderItem(t){let e;if(this.#o){let i=this.#o(t);if(!(i instanceof Element))throw new Error("kanban-board: renderItem must return an Element");e=i}else e=this.#f(t);return e.hasAttribute("draggable")||e.setAttribute("draggable","true"),e.hasAttribute("data-id")||e.setAttribute("data-id",String(u.keyOf(t))),e}_containerFor(t,e){let i=this.#n[t.column];if(!i)throw new Error(`kanban-board: no column "${t.column}" \u2014 set .columns first or include item.column matching an existing column id`);let o=i.querySelector(":scope > .kb-empty");return o&&o.remove(),i}_postRender(){for(let t of Object.keys(this.#n)){this.#a(t);let e=this.#n[t],i=e.querySelectorAll(':scope > [draggable="true"]'),o=e.querySelector(":scope > .kb-empty");if(i.length===0&&!o){let n=document.createElement("p");n.className="kb-empty",n.textContent="No items",e.appendChild(n)}else i.length>0&&o&&o.remove()}}#f(t){let e=customElements.get("work-item")?"work-item":"article",i=document.createElement(e);return e==="work-item"?i.data={itemId:t.id??t.storyId,type:t.type,priority:t.priority,status:t.status,estimate:t.estimate!=null?String(t.estimate):void 0,assignee:t.assignee,title:t.title,description:t.description,checklist:t.checklist,notes:t.notes,detail:t.detail}:(i.className="kb-card",i.textContent=t.title||t.label||t.id),i}#p(){let t=document.createElement("div");t.className="kb-columns",t.setAttribute("role","region"),t.setAttribute("aria-label","Kanban board");for(let e of this.#s){let i=document.createElement("section");i.className="kb-column",i.setAttribute("data-column-id",e.id),e.color&&i.setAttribute("data-column-tint",e.color);let o=document.createElement("header");o.className="kb-column-header";let n=document.createElement("h3");n.textContent=e.label;let s=document.createElement("output");if(s.className="kb-count",s.textContent="0",n.appendChild(s),e.wip!=null&&!isNaN(e.wip)){let d=document.createElement("span");d.className="kb-wip",d.textContent=`/ ${e.wip}`,d.setAttribute("aria-label",`WIP limit ${e.wip}`),n.appendChild(d)}o.appendChild(n),i.appendChild(o);let r=document.createElement("drag-surface");r.setAttribute("group",this.#l),r.setAttribute("aria-label",`${e.label} items`),r.setAttribute("data-layout","stack"),r.setAttribute("data-layout-gap","xs");let a=document.createElement("p");a.className="kb-empty",a.textContent="No items",r.appendChild(a),i.appendChild(r),t.appendChild(i),this.#n[e.id]=r,this.#r[e.id]=i}return t}attributeChangedCallback(t,e,i){e===i||!this.isConnected||t==="src"&&this._loadSrc(i)}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let i=await e.json();for(;this.firstChild;)this.firstChild.remove();for(let n of i.columns||[]){let s=document.createElement("section");s.setAttribute("data-column",n.id),n.label&&s.setAttribute("data-column-label",n.label),n.wip!=null&&s.setAttribute("data-wip",String(n.wip)),n.color&&s.setAttribute("data-column-color",n.color);for(let r of n.items||[]){let a;r.persona||r.action||r.storyId?(a=document.createElement("user-story"),a.setAttribute("detail",r.detail||"minimal"),r.storyId&&a.setAttribute("story-id",r.storyId),r.persona&&a.setAttribute("persona",r.persona),r.action&&a.setAttribute("action",r.action),r.benefit&&a.setAttribute("benefit",r.benefit),r.priority&&a.setAttribute("priority",r.priority),r.status&&a.setAttribute("status",r.status),r.points&&a.setAttribute("points",String(r.points))):(a=document.createElement("article"),a.className="kb-card",a.textContent=r.text||r.label||""),a.setAttribute("draggable","true"),a.dataset.id=r.id||r.storyId||"",s.appendChild(a)}this.appendChild(s)}let o=()=>{this.teardown(),this.removeAttribute("data-upgraded"),this.setup()};this.hasAttribute("data-upgraded")&&this.#t?A(this,o,"kb-vt"):o()}catch(e){console.warn(`[kanban-board] Failed to load src="${t}":`,e)}}#c(t){if(!t)return null;for(let[e,i]of Object.entries(this.#n))if(i===t)return e;return null}#a(t){let e=this.#n[t],i=this.#r[t];if(!e||!i)return;let o=e.querySelectorAll(':scope > [draggable="true"]').length,n=i.querySelector(".kb-count");n&&(n.textContent=String(o));let s=this.#s.find(r=>r.id===t);s?.wip!==null&&s?.wip!==void 0&&(o>s.wip?i.setAttribute("data-wip-exceeded",""):i.removeAttribute("data-wip-exceeded"))}#h(t){return this.#s.find(i=>i.id===t)?.label||this.#d(t)}#b(t){this.#e&&(this.#e.textContent="",requestAnimationFrame(()=>{this.#e&&(this.#e.textContent=t)}))}#g(t){return t.getAttribute("story-id")||t.getAttribute("data-id")||t.textContent?.trim().slice(0,40)||"item"}#d(t){return t.replace(/[-_]/g," ").replace(/\b\w/g,e=>e.toUpperCase())}};k("kanban-board",C);export{C as KanbanBoard};
|
|
2
2
|
//# sourceMappingURL=kanban-board.js.map
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
var m=window.matchMedia("(prefers-reduced-motion: reduce)");var u=new Map;function p(i,t,n={}){let r=n.priority??10,o={impl:t,bundle:n.bundle,contract:n.contract,priority:r},s=u.get(i);if(customElements.get(i)){if(!s||s.priority>=r){s&&s.priority===r&&s.impl!==t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${n.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${n.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=r){s.priority===r&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${s.bundle}". Skipping "${n.bundle}" (first wins at equal priority).`);return}u.set(i,o),customElements.define(i,t)}var l=class extends HTMLElement{#e=[];#t;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,n,r,o){t.addEventListener(n,r,o),this.#e.push(()=>t.removeEventListener(n,r,o))}setup(){}teardown(){}setState(t,n){this.#t||(this.#t=this.attachInternals());let r=this.#t.states;try{n?r.add(t):r.delete(t)}catch{let o=`--${t}`;n?r.add(o):r.delete(o)}}_adoptInternals(t){this.#t||(this.#t=t)}};var y=[{name:"layout-stack",desc:"Vertical stack with consistent gap between children.",snippet:`<layout-stack data-layout-gap="m">
|
|
2
|
+
<p>One</p>
|
|
3
|
+
<p>Two</p>
|
|
4
|
+
<p>Three</p>
|
|
5
|
+
</layout-stack>`,render:()=>e("layout-stack",{"data-layout-gap":"s"},[a("One"),a("Two"),a("Three")])},{name:"layout-cluster",desc:"Horizontal cluster that wraps; for tag rows, button groups.",snippet:`<layout-cluster data-layout-gap="s">
|
|
6
|
+
<button>One</button> <button>Two</button> <button>Three</button>
|
|
7
|
+
</layout-cluster>`,render:()=>e("layout-cluster",{"data-layout-gap":"s"},[d("One"),d("Two"),d("Three"),d("Four")])},{name:"layout-grid",desc:"Auto-fit responsive grid; columns flow based on min-item-size.",snippet:`<layout-grid data-layout-min="12rem">
|
|
8
|
+
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
|
|
9
|
+
</layout-grid>`,render:()=>e("layout-grid",{"data-layout-min":"6rem","data-layout-gap":"s"},[a("1"),a("2"),a("3"),a("4"),a("5"),a("6")])},{name:"layout-center",desc:"Center a block horizontally with optional max-width.",snippet:`<layout-center data-layout-max="readable">
|
|
10
|
+
<p>Centered prose.</p>
|
|
11
|
+
</layout-center>`,render:()=>e("layout-center",{"data-layout-max":"narrow",style:"border: 1px dashed var(--color-border); padding: var(--size-2xs)"},[a("Centered")])},{name:"layout-cover",desc:"Vertical cover layout: optional header + main area + optional footer, with main filling available space.",snippet:`<layout-cover style="block-size: 12rem">
|
|
12
|
+
<header>Top</header>
|
|
13
|
+
<main>Center</main>
|
|
14
|
+
<footer>Bottom</footer>
|
|
15
|
+
</layout-cover>`,render:()=>e("layout-cover",{style:"block-size: 9rem; border: 1px dashed var(--color-border); padding: var(--size-2xs)"},[e("header",{},[a("Top")]),e("main",{},[a("Center","main")]),e("footer",{},[a("Bottom")])])},{name:"layout-imposter",desc:"Absolute centering \u2014 child sits in the dead center of the parent.",snippet:`<div style="position:relative; block-size:8rem">
|
|
16
|
+
<layout-imposter><span>Centered</span></layout-imposter>
|
|
17
|
+
</div>`,render:()=>e("div",{style:"position:relative; block-size: 6rem; border: 1px dashed var(--color-border)"},[e("layout-imposter",{},[a("Imposter")])])},{name:"layout-columns",desc:"Multi-column text layout (CSS columns); good for newspapery prose.",snippet:`<layout-columns data-layout-columns="3">
|
|
18
|
+
<p>Long prose flows across columns\u2026</p>
|
|
19
|
+
</layout-columns>`,render:()=>e("layout-columns",{"data-layout-columns":"3"},[e("p",{style:"margin: 0; font-size: 0.85em"},["One two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen."])])},{name:"layout-card",desc:"Stack of header + body + actions with card chrome (border + padding).",snippet:`<layout-card>
|
|
20
|
+
<h3>Title</h3>
|
|
21
|
+
<p>Body text.</p>
|
|
22
|
+
<div data-layout-card-actions><button>OK</button></div>
|
|
23
|
+
</layout-card>`,render:()=>e("layout-card",{},[e("h3",{style:"margin: 0; font-size: 0.9em"},["Card title"]),e("p",{style:"margin: 0; font-size: 0.85em"},["Card body content."])])},{name:"layout-canvas",desc:"Full-bleed canvas section that breaks the centered max-width.",snippet:`<layout-canvas>
|
|
24
|
+
<p>Edge-to-edge content.</p>
|
|
25
|
+
</layout-canvas>`,render:()=>e("layout-canvas",{style:"background: var(--color-surface-sunken, oklch(94% 0 0)); padding: var(--size-2xs)"},[a("Full-bleed")])},{name:"layout-badge",desc:"Tiny inline badge / pill for inline labels.",snippet:"<layout-badge>NEW</layout-badge>",render:()=>e("layout-cluster",{"data-layout-gap":"xs"},[e("layout-badge",{},["NEW"]),e("layout-badge",{},["BETA"]),e("layout-badge",{},["v2.0"])])},{name:"layout-reel",desc:"Horizontal scrollable reel with snap points.",snippet:`<layout-reel>
|
|
26
|
+
<article>1</article> <article>2</article> <article>3</article>
|
|
27
|
+
</layout-reel>`,render:()=>e("layout-reel",{},[a("1","reel"),a("2","reel"),a("3","reel"),a("4","reel"),a("5","reel"),a("6","reel")])},{name:"layout-sidebar",desc:"Sidebar + main split that collapses to a stack on narrow viewports.",snippet:`<layout-sidebar>
|
|
28
|
+
<aside>Side</aside>
|
|
29
|
+
<main>Main</main>
|
|
30
|
+
</layout-sidebar>`,render:()=>e("layout-sidebar",{},[e("aside",{style:"background: var(--color-surface-sunken, oklch(94% 0 0)); padding: var(--size-2xs)"},["Side"]),e("main",{},[a("Main")])])},{name:"layout-switcher",desc:"Container that switches from a row to a stack at a configurable threshold.",snippet:`<layout-switcher data-layout-threshold="30rem">
|
|
31
|
+
<div>One</div> <div>Two</div>
|
|
32
|
+
</layout-switcher>`,render:()=>e("layout-switcher",{"data-layout-threshold":"20rem"},[a("One"),a("Two")])},{name:"layout-text",desc:"Constrains line length to a readable measure (~60ch).",snippet:`<layout-text>
|
|
33
|
+
<p>Constrained-measure prose for comfortable reading.</p>
|
|
34
|
+
</layout-text>`,render:()=>e("layout-text",{},[e("p",{style:"margin: 0; font-size: 0.85em"},["This paragraph is constrained to a comfortable reading measure (~60ch) regardless of the parent width."])])}];function e(i,t={},n=[]){let r=document.createElement(i);for(let[o,s]of Object.entries(t))s!=null&&(o==="style"?r.setAttribute("style",s):r.setAttribute(o,s===!0?"":String(s)));for(let o of n)typeof o=="string"?r.appendChild(document.createTextNode(o)):o&&r.appendChild(o);return r}function a(i,t){return e("div",{class:`ls-box${t?` ls-box-${t}`:""}`},[i])}function d(i){return e("span",{class:"ls-chip"},[i])}var c=class extends l{setup(){let t=this.getAttribute("data-only"),n=t?new Set(t.split(",").map(o=>o.trim())):null,r=y.filter(o=>!n||n.has(o.name)||n.has(o.name.replace(/^layout-/,"")));this.replaceChildren();for(let o of r)this.appendChild(this.#e(o))}#e(t){let n=e("section",{class:"ls-entry"}),r=e("header",{class:"ls-entry-head"},[e("h3",{class:"ls-entry-name"},[t.name]),e("p",{class:"ls-entry-desc"},[t.desc])]),o=e("div",{class:"ls-live"});o.appendChild(t.render());let s=e("pre",{class:"ls-snippet"},[e("code",{},[t.snippet])]);return n.append(r,o,s),n}};p("layout-specimen",c);export{c as LayoutSpecimen};
|
|
35
|
+
//# sourceMappingURL=layout-specimen.js.map
|