@hazem3500/komo 0.9.16 → 0.9.17

package/dist/tag-editor-ES4VZCEQ.js

@@ -1 +0,0 @@
-var t=12,e=/^[\p{L}\p{N}][\p{L}\p{N} ._-]{0,31}$/u;function n(t){let n=t.trim().replace(/^#/,"").toLocaleLowerCase("en-US");return e.test(n)?n:null}function a(t,e){let a=[...e.tags],o=!1,r=!1,i=(...e)=>{r=!0,t.replaceChildren(...e),r=!1},l=`komo-tags-${Math.random().toString(36).slice(2)}`,d=null,s=0,p=()=>{cancelAnimationFrame(s),d?.remove(),d=null};function c(g=!1){if(p(),t.hidden=!!e.trigger&&!a.length&&!o,e.trigger){let t=a.length?"Manage tags":"Add tag";e.trigger.title=t,e.trigger.setAttribute("aria-label",t),e.trigger.setAttribute("aria-expanded",String(o))}let u=document.createElement("style");u.textContent='\n.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; min-height: 24px; font-size: 12px; }\n.tag-row .tag-chip {\n  display: inline-flex; align-items: center; gap: 2px; max-width: 160px; height: 22px; padding: 0 2px 0 7px;\n  border-radius: 6px; font-weight: 500; line-height: 1; color: var(--accent, #bda6ef);\n  background: color-mix(in srgb, var(--accent, #bda6ef) 14%, transparent);\n}\n.tag-row .tag-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tag-row .tag-chip button, .tag-row .tag-add {\n  display: inline-flex; align-items: center; border: 0; padding: 0; color: inherit; background: none; cursor: pointer; font-family: inherit;\n}\n.tag-row .tag-chip button { justify-content: center; width: 18px; height: 18px; border-radius: 4px; opacity: .6; }\n.tag-row .tag-chip button:hover, .tag-row .tag-chip button:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }\n.tag-row .tag-add {\n  gap: 4px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 12px; color: #858585;\n  transition: color var(--duration-quick, 150ms), background var(--duration-quick, 150ms);\n}\n.tag-row .tag-add:hover, .tag-row .tag-add:focus-visible { color: #eee; background: #ffffff0d; }\n.tag-row .tag-input {\n  width: 96px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; outline: none;\n  font-family: inherit; font-size: 12px; color: #eee; background: #ffffff07; box-shadow: inset 0 0 0 1px #ffffff05;\n}\n.tag-row .tag-input::placeholder { color: #858585; }\n.tag-row .tag-input:focus { box-shadow: inset 0 0 0 1px #ffffff20; }\n.tag-row .tag-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #f28b8299; }\n.tag-options {\n  position: fixed; z-index: 40; pointer-events: auto; display: grid; gap: 1px; width: 220px; max-height: 220px; overflow: auto;\n  padding: 4px; border-radius: 10px; background: #2a2a2a; box-shadow: 0 0 0 1px #ffffff14, 0 12px 32px #0007;\n  font-size: 12px;\n}\n.tag-options:empty { display: none; }\n.tag-option {\n  display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border-radius: 6px;\n  color: #ddd; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n.tag-option[aria-selected="true"] { background: #ffffff14; color: #fff; }\n.tag-option-hint, .tag-option-empty { color: #858585; }\n.tag-option-empty { padding: 6px 8px; }\n.new-comment-composer .draft-body:has(.tag-slot) { grid-template-rows: minmax(28px, auto) minmax(28px, auto); }\n.new-comment-composer .draft-body .tag-slot { grid-row: 2; grid-column: 2; align-self: start; min-width: 0; padding-top: 2px; }\n.new-comment-composer .draft-body:has(.tag-slot) .send { align-self: start; }\n.new-comment-composer .draft-body:not(:has(.avatar)) .tag-slot { grid-column: 1; }\n';let f=document.createElement("div");f.className="tag-row",f.setAttribute("role","group"),f.setAttribute("aria-label","Tags");for(let n of a){let r=document.createElement("span");r.className="tag-chip";let i=document.createElement("span");i.textContent=`#${n}`;let l=document.createElement("button");l.type="button",l.textContent="×",l.setAttribute("aria-label",`Remove tag ${n}`),l.addEventListener("pointerdown",t=>t.preventDefault()),l.addEventListener("click",()=>{let r=t.getRootNode()instanceof ShadowRoot?t.getRootNode().activeElement===l:document.activeElement===l,i=a.indexOf(n);a=a.filter(t=>t!==n),e.onRemove(n),c(o),r&&!o&&(t.querySelectorAll(".tag-chip button")[Math.min(i,a.length-1)]??e.trigger??t.querySelector(".tag-add"))?.focus()}),r.append(i,l),f.append(r)}if(o){let m=document.createElement("input");m.className="tag-input",m.placeholder="Add tag…",m.maxLength=33,m.autocomplete="off",m.setAttribute("role","combobox"),m.setAttribute("aria-label","Add tag"),m.setAttribute("aria-autocomplete","list"),m.setAttribute("aria-controls",l);let h=document.createElement("div");h.className="tag-options",h.id=l,h.setAttribute("role","listbox"),h.setAttribute("aria-label","Tags");let x=[],b=-1,v=t=>{!a.includes(t)&&a.length<12&&(a=[...a,t].sort(),e.onAdd(t)),o=a.length<12,c(o),o||e.trigger?.focus({preventScroll:!0})},w=t=>{b=t,h.querySelectorAll("[role=option]").forEach((e,n)=>{e.setAttribute("aria-selected",String(n===t)),n===t&&e.scrollIntoView?.({block:"nearest"})}),t>=0?m.setAttribute("aria-activedescendant",`${l}-${t}`):m.removeAttribute("aria-activedescendant")},y=()=>{let t=m.value.trim().replace(/^#/,"").toLocaleLowerCase("en-US"),o=n(m.value),r=e.suggestions.filter(t=>!a.includes(t));x=(t?[...r.filter(e=>e.startsWith(t)),...r.filter(e=>!e.startsWith(t)&&e.includes(t))]:r).map(t=>({tag:t,create:!1})),o&&!a.includes(o)&&!r.includes(o)&&x.push({tag:o,create:!0}),h.replaceChildren(...x.map(({tag:t,create:e},n)=>{let a=document.createElement("div");return a.id=`${l}-${n}`,a.className="tag-option",a.setAttribute("role","option"),e&&a.append(Object.assign(document.createElement("span"),{className:"tag-option-hint",textContent:"Create"})),a.append(Object.assign(document.createElement("span"),{textContent:`#${t}`})),a.addEventListener("click",()=>v(t)),a.addEventListener("pointermove",()=>w(n)),a})),x.length||h.append(Object.assign(document.createElement("div"),{className:"tag-option-empty",textContent:t?a.includes(o??"")?"Already added":"Use letters, numbers, spaces, . _ or -":"Type to create a tag"})),m.setAttribute("aria-expanded",String(x.length>0)),w(t&&x.length?0:-1)};m.addEventListener("input",y),m.addEventListener("keydown",t=>{if(t.stopPropagation(),!t.isComposing)if("ArrowDown"===t.key||"ArrowUp"===t.key){if(t.preventDefault(),!x.length)return;let e=x.length-1;w("ArrowDown"===t.key?b>=e?0:b+1:b<=0?e:b-1)}else if("Enter"===t.key||","===t.key)if(t.preventDefault(),b>=0&&x[b])v(x[b].tag);else if(m.value.trim()){let t=n(m.value);t?v(t):m.setAttribute("aria-invalid","true")}else o=!1,c(),e.trigger?.focus({preventScroll:!0});else if("Escape"===t.key)t.preventDefault(),o=!1,c(),e.trigger?.focus({preventScroll:!0});else if("Backspace"===t.key&&!m.value&&a.length){let t=a.at(-1);a=a.slice(0,-1),e.onRemove(t),c(!0)}}),m.addEventListener("input",()=>m.removeAttribute("aria-invalid"));let A=!1;h.addEventListener("pointerdown",t=>{t.preventDefault(),A=!0}),m.addEventListener("blur",()=>{if(A)return A=!1,void requestAnimationFrame(()=>m.isConnected&&m.focus({preventScroll:!0}));r||!m.isConnected||!o||(o=!1,c())}),f.append(m),i(u,f);let E=t.getRootNode();(E instanceof ShadowRoot?E:document.body).append(h),d=h;let k=()=>{if(!m.isConnected)return p();let t=m.getBoundingClientRect(),e=h.offsetHeight,n=window.innerHeight-t.bottom-8,a=e+4<=n||t.top-8<n?t.bottom+4:t.top-4-e;h.style.top=`${Math.max(8,a)}px`,h.style.left=`${Math.max(8,Math.min(t.left,window.innerWidth-h.offsetWidth-8))}px`,s=requestAnimationFrame(k)};return y(),k(),void((g||o)&&m.focus({preventScroll:!0}))}if(!e.trigger&&a.length<12){let t=document.createElement("button");t.type="button",t.className="tag-add",t.textContent=a.length?"+":"+ Add tag",t.setAttribute("aria-label","Add tag"),t.addEventListener("click",()=>{o=!0,c(!0)}),f.append(t)}i(u,f)}e.trigger&&(e.trigger.onclick=()=>{o=a.length<12,c(o),o||t.querySelector(".tag-chip button")?.focus()}),c()}export{t as MAX_TAGS,n as normalizeTag,a as tagEditor};