@hazem3500/komo 0.9.0 → 0.9.1

package/dist/tag-editor-VDPZ6CO3.js

@@ -1 +0,0 @@
-import"./chunk-I7AUKTXE.js";var t=12,e=/^[\p{L}\p{N}][\p{L}\p{N} ._-]{0,31}$/u;function a(t){let a=t.trim().replace(/^#/,"").toLocaleLowerCase("en-US");return e.test(a)?a:null}function n(t,e){let n=[...e.tags],r=!1,o=!1,i=(...e)=>{o=!0,t.replaceChildren(...e),o=!1},l=`komo-tags-${Math.random().toString(36).slice(2)}`;!function t(d=!1){let p=document.createElement("style");p.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-row .tag-options {\n  flex-basis: 100%; display: grid; gap: 1px; max-height: 172px; overflow: auto; padding: 4px; border-radius: 8px;\n  background: #ffffff07; box-shadow: inset 0 0 0 1px #ffffff0a;\n}\n.tag-row .tag-options:empty { display: none; }\n.tag-row .tag-option {\n  display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 8px; border-radius: 5px;\n  color: #ddd; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;\n}\n.tag-row .tag-option[aria-selected="true"] { background: #ffffff12; color: #fff; }\n.tag-row .tag-option-hint, .tag-row .tag-option-empty { color: #858585; }\n.tag-row .tag-option-empty { padding: 5px 8px; }\n.new-comment-composer .draft-body .tag-slot { grid-row: 2; grid-column: 2; align-self: center; min-width: 0; }\n.new-comment-composer .draft-body:not(:has(.avatar)) .tag-slot { grid-column: 1; }\n/* Line up with message text: 16px gutter plus the 24px avatar and 8px gap. */\n.thread-tags { padding: 0 16px 12px 48px; margin-top: -6px; }\n';let s=document.createElement("div");s.className="tag-row",s.setAttribute("role","group"),s.setAttribute("aria-label","Tags");for(let a of n){let r=document.createElement("span");r.className="tag-chip";let o=document.createElement("span");o.textContent=`#${a}`;let i=document.createElement("button");i.type="button",i.textContent="×",i.setAttribute("aria-label",`Remove tag ${a}`),i.addEventListener("click",()=>{n=n.filter(t=>t!==a),e.onRemove(a),t()}),r.append(o,i),s.append(r)}if(r){let c=document.createElement("input");c.className="tag-input",c.placeholder="Add tag…",c.maxLength=33,c.autocomplete="off",c.setAttribute("role","combobox"),c.setAttribute("aria-label","Add tag"),c.setAttribute("aria-autocomplete","list"),c.setAttribute("aria-controls",l);let g=document.createElement("div");g.className="tag-options",g.id=l,g.setAttribute("role","listbox"),g.setAttribute("aria-label","Tags");let u=[],f=-1,m=a=>{!n.includes(a)&&n.length<12&&(n=[...n,a].sort(),e.onAdd(a)),r=n.length<12,t(r)},x=t=>{f=t,g.querySelectorAll("[role=option]").forEach((e,a)=>{e.setAttribute("aria-selected",String(a===t)),a===t&&e.scrollIntoView?.({block:"nearest"})}),t>=0?c.setAttribute("aria-activedescendant",`${l}-${t}`):c.removeAttribute("aria-activedescendant")},b=()=>{let t=c.value.trim().replace(/^#/,"").toLocaleLowerCase("en-US"),r=a(c.value),o=e.suggestions.filter(t=>!n.includes(t));u=(t?[...o.filter(e=>e.startsWith(t)),...o.filter(e=>!e.startsWith(t)&&e.includes(t))]:o).map(t=>({tag:t,create:!1})),r&&!n.includes(r)&&!o.includes(r)&&u.push({tag:r,create:!0}),g.replaceChildren(...u.map(({tag:t,create:e},a)=>{let n=document.createElement("div");return n.id=`${l}-${a}`,n.className="tag-option",n.setAttribute("role","option"),e&&n.append(Object.assign(document.createElement("span"),{className:"tag-option-hint",textContent:"Create"})),n.append(Object.assign(document.createElement("span"),{textContent:`#${t}`})),n.addEventListener("pointerdown",t=>t.preventDefault()),n.addEventListener("click",()=>m(t)),n.addEventListener("pointermove",()=>x(a)),n})),u.length||g.append(Object.assign(document.createElement("div"),{className:"tag-option-empty",textContent:t?n.includes(r??"")?"Already added":"Use letters, numbers, spaces, . _ or -":"Type to create a tag"})),c.setAttribute("aria-expanded",String(u.length>0)),x(t&&u.length?0:-1)};return c.addEventListener("input",b),c.addEventListener("keydown",o=>{if(o.stopPropagation(),!o.isComposing)if("ArrowDown"===o.key||"ArrowUp"===o.key){if(o.preventDefault(),!u.length)return;let t=u.length-1;x("ArrowDown"===o.key?f>=t?0:f+1:f<=0?t:f-1)}else if("Enter"===o.key||","===o.key)if(o.preventDefault(),f>=0&&u[f])m(u[f].tag);else if(c.value.trim()){let t=a(c.value);t?m(t):c.setAttribute("aria-invalid","true")}else r=!1,t();else if("Escape"===o.key)o.preventDefault(),r=!1,t();else if("Backspace"===o.key&&!c.value&&n.length){let a=n.at(-1);n=n.slice(0,-1),e.onRemove(a),t(!0)}}),c.addEventListener("input",()=>c.removeAttribute("aria-invalid")),c.addEventListener("blur",()=>{o||!c.isConnected||!r||(r=!1,t())}),s.append(c,g),i(p,s),b(),void((d||r)&&c.focus({preventScroll:!0}))}if(n.length<12){let e=document.createElement("button");e.type="button",e.className="tag-add",e.textContent=n.length?"+":"+ Add tag",e.setAttribute("aria-label","Add tag"),e.addEventListener("click",()=>{r=!0,t(!0)}),s.append(e)}i(p,s)}()}export{t as MAX_TAGS,a as normalizeTag,n as tagEditor};