1import{br as P,bD as A,bF as I,bj as p,bb as a,aV as L,O as D,ae as F}from"./index-CNZVeRkL.js";import{c as R}from"./canalConfigs-CKeeOXys.js";import{b as O,u as G,c as B,a as V}from"./useTagClouds--BYC-O_R.js";import{u as K}from"./usePageTitle-BjMLwBTV.js";import{a as q}from"./layout-nFu2HVh5.js";const f=20,H=` 2 .va-main { flex: 1; padding: 24px 32px 40px; max-width: 1280px; width: 100%; margin: 0 auto; box-sizing: border-box; } 3 .icn { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } 4 5 /* PAGE HEADER */ 6 .lt-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } 7 .lt-head__left { display: flex; align-items: center; gap: 12px; } 8 .lt-head__back { 9 width: 36px; height: 36px; border-radius: var(--va-radius-sm); 10 border: 1px solid var(--va-neutral-300); background: white; 11 display: inline-flex; align-items: center; justify-content: center; 12 color: var(--va-neutral-600); cursor: pointer; flex-shrink: 0; text-decoration: none; 13 transition: background var(--va-dur-1), border-color var(--va-dur-1); 14 } 15 .lt-head__back:hover { background: var(--va-neutral-50); border-color: var(--va-neutral-400); color: var(--va-neutral-800); } 16 .lt-head__title { font-size: 22px; font-weight: 600; color: var(--va-neutral-700); letter-spacing: -0.015em; margin: 0; } 17 .lt-head__spacer { flex: 1 1 auto; } 18 19 /* ROW CARDS */ 20 .lt-list { display: flex; flex-direction: column; gap: 14px; } 21 .lt-row { 22 background: white; border: 1px solid var(--va-neutral-200); 23 border-radius: var(--va-radius-md); box-shadow: var(--va-shadow-xs); 24 display: grid; grid-template-columns: minmax(180px, 260px) 1fr auto; 25 align-items: center; gap: 24px; padding: 20px 28px; 26 transition: box-shadow var(--va-dur-1), border-color var(--va-dur-1); 27 } 28 .lt-row:hover { box-shadow: var(--va-shadow-sm); border-color: var(--va-neutral-300); } 29 .lt-row__name { font-size: 15px; font-weight: 500; color: var(--va-neutral-700); min-width: 0; } 30 .lt-tags { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } 31 .lt-tag { 32 display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; line-height: 1; 33 padding: 5px 10px; border-radius: var(--va-radius-sm); 34 background: var(--va-brand-blue); color: white; white-space: nowrap; 35 } 36 .lt-row__actions { display: flex; align-items: center; gap: 22px; justify-content: flex-end; flex-shrink: 0; } 37 .lt-action { background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; padding: 4px 2px; transition: opacity var(--va-dur-1); } 38 .lt-action:hover { opacity: 0.72; text-decoration: underline; } 39 .lt-action--edit { color: var(--va-brand-blue); } 40 .lt-action--delete { color: var(--va-danger); } 41 42 /* EMPTY / LOADING */ 43 .lt-empty { 44 text-align: center; padding: 48px 0; color: var(--va-neutral-500); font-size: 14px; 45 background: white; border: 1px solid var(--va-neutral-200); border-radius: var(--va-radius-md); box-shadow: var(--va-shadow-xs); 46 } 47 48 /* SKELETON */ 49 @keyframes lt-shimmer { 50 0% { background-position: 200% 0; } 51 100% { background-position: -200% 0; } 52 } 53 .lt-skel { 54 display: block; border-radius: var(--va-radius-xs); 55 background: linear-gradient(90deg, var(--va-neutral-100) 25%, var(--va-neutral-200) 50%, var(--va-neutral-100) 75%); 56 background-size: 200% 100%; 57 animation: lt-shimmer 1.4s ease-in-out infinite; 58 } 59 .lt-skel--name { width: 140px; height: 15px; } 60 .lt-skel--tag { width: 64px; height: 24px; border-radius: var(--va-radius-sm); } 61 .lt-skel--act { width: 48px; height: 14px; } 62 63 /* PAGINATOR */ 64 .lt-paginator { margin-top: 22px; } 65 .va-paginator { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; flex-wrap: wrap; } 66 .va-paginator__count { font-size: 13px; color: var(--va-neutral-600); } 67 .va-paginator__pages { display: flex; gap: 4px; align-items: center; } 68 .va-paginator__btn { min-width: 32px; height: 32px; padding: 0 8px; background: white; border: 1px solid var(--va-neutral-200); border-radius: var(--va-radius-sm); font-size: 13px; font-weight: 500; color: var(--va-neutral-700); cursor: pointer; font-family: inherit; } 69 .va-paginator__btn:hover:not(:disabled) { background: var(--va-neutral-50); border-color: var(--va-neutral-300); } 70 .va-paginator__btn--active { background: var(--va-brand-blue); color: white; border-color: var(--va-brand-blue); } 71 .va-paginator__btn:disabled { opacity: 0.4; cursor: default; } 72 .va-paginator__ellipsis { font-size: 13px; color: var(--va-neutral-400); padding: 0 4px; } 73 .va-paginator__perpage { font-size: 13px; color: var(--va-neutral-600); display: flex; align-items: center; gap: 8px; } 74 .va-paginator__perpage select { height: 32px; padding: 0 8px; border: 1px solid var(--va-neutral-200); border-radius: var(--va-radius-sm); font-size: 13px; font-family: inherit; background: white; color: var(--va-neutral-700); cursor: pointer; } 75 .va-paginator__perpage select:hover { border-color: var(--va-neutral-300); } 76 77 /* MODAL */ 78 .lt-overlay { 79 position: fixed; inset: 0; background: rgba(15,23,42,0.45); 80 z-index: var(--va-z-modal); display: flex; align-items: center; justify-content: center; 81 padding: 24px; animation: ltFade var(--va-dur-2) var(--va-ease-standard); 82 } 83 @keyframes ltFade { from { opacity: 0; } to { opacity: 1; } } 84 .lt-modal { 85 background: white; border-radius: var(--va-radius-lg); box-shadow: var(--va-shadow-xl); 86 width: 100%; max-width: 600px; max-height: calc(100vh - 48px); 87 display: flex; flex-direction: column; 88 animation: ltSlide var(--va-dur-3) var(--va-ease-emphasized); 89 } 90 @keyframes ltSlide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } 91 .lt-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px 18px; border-bottom: 1px solid var(--va-neutral-100); } 92 .lt-modal__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--va-brand-blue); } 93 .lt-modal__close { width: 32px; height: 32px; border-radius: var(--va-radius-sm); background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--va-neutral-400); flex-shrink: 0; transition: background var(--va-dur-1), color var(--va-dur-1); } 94 .lt-modal__close:hover { background: var(--va-neutral-100); color: var(--va-neutral-700); } 95 .lt-modal__body { padding: 22px 28px 8px; overflow-y: auto; } 96 .lt-modal__foot { padding: 18px 28px 24px; display: flex; justify-content: center; gap: 12px; border-top: 1px solid var(--va-neutral-100); } 97 .lt-modal__foot .va-btn { min-width: 132px; } 98 .lt-prompt { margin: 0 0 16px; font-size: 15px; color: var(--va-neutral-800); } 99 .lt-field { margin-bottom: 18px; } 100 .lt-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--va-neutral-700); margin-bottom: 6px; } 101 102 /* TAG PILL INPUT */ 103 .tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; padding: 9px 12px; border: 1px solid var(--va-neutral-200); border-radius: var(--va-radius-md); background: #fff; cursor: text; transition: border-color 140ms, box-shadow 140ms; } 104 .tag-input.is-focused { border-color: var(--va-brand-blue); box-shadow: var(--va-shadow-focus); } 105 .tag-input__pill { display: inline-flex; align-items: center; gap: 6px;
105 height: 26px; padding: 0 6px 0 10px; background: var(--va-brand-blue); color: #fff; font-size: 13px; font-weight: 500; border-radius: 6px; white-space: nowrap; } 106 .tag-input__remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: 4px; background: transparent; color: rgba(255,255,255,0.85); cursor: pointer; transition: background 120ms, color 120ms; } 107 .tag-input__remove:hover { background: rgba(255,255,255,0.22); color: #fff; } 108 .tag-input__remove svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.4; fill: none; } 109 .tag-input__entry { flex: 1 1 90px; min-width: 90px; border: none; outline: none; font-size: 14px; color: var(--va-neutral-900); background: transparent; height: 26px; } 110 .tag-input__entry::placeholder { color: var(--va-neutral-400); } 111 .tag-hint { display: block; margin-top: 8px; font-size: 12.5px; color: var(--va-brand-blue); line-height: 1.4; } 112 .tag-hint.is-max { color: var(--va-danger); } 113 114 /* DELETE MODAL */ 115 .lt-modal--confirm { max-width: 440px; } 116 .lt-confirm__body { padding: 24px 28px; text-align: center; } 117 .lt-confirm__icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--va-danger-50); display: flex; align-items: center; justify-content: center; color: var(--va-danger); } 118 .lt-confirm__icon svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } 119 .lt-confirm__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--va-neutral-900); } 120 .lt-confirm__text { margin: 0; font-size: 14px; color: var(--va-neutral-600); line-height: 1.5; } 121 .lt-confirm__text strong { color: var(--va-neutral-900); } 122 123 /* RESPONSIVE */ 124 @media (max-width: 720px) { 125 .va-main { padding: 16px 16px 32px; } 126 .lt-head__title { font-size: 19px; } 127 .lt-row { grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; } 128 .lt-row__actions { justify-content: flex-start; } 129 .lt-modal__foot { flex-direction: column-reverse; } 130 .lt-modal__foot .va-btn { width: 100%; } 131 } 132`,U=()=>a.jsxs("svg",{className:"icn",viewBox:"0 0 24 24",children:[a.jsx("path",{d:"m12 19-7-7 7-7"}),a.jsx("path",{d:"M19 12H5"})]}),Y=()=>a.jsxs("svg",{className:"icn",viewBox:"0 0 24 24",children:[a.jsx("path",{d:"M5 12h14"}),a.jsx("path",{d:"M12 5v14"})]}),$=()=>a.jsxs("svg",{viewBox:"0 0 24 24",children:[a.jsx("path",{d:"M18 6 6 18"}),a.jsx("path",{d:"m6 6 12 12"})]}),W=()=>a.jsxs("svg",{viewBox:"0 0 24 24",children:[a.jsx("path",{d:"M3 6h18"}),a.jsx("path",{d:"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"})]});function X({page:t,pages:s,total:o,perPage:l,onPage:r,onPerPage:c}){const i=[];if(s<=7)for(let n=1;n<=s;n++)i.push(n);else{i.push(1),t>3&&i.push("â¦");for(let n=Math.max(2,t-1);n<=Math.min(s-1,t+1);n++)i.push(n);t<s-2&&i.push("â¦"),i.push(s)}return a.jsxs("div",{className:"va-paginator",children:[a.jsxs("div",{className:"va-paginator__count",children:["Página ",a.jsx("strong",{children:t})," de ",a.jsx("strong",{children:s||1})," · ",a.jsx("strong",{children:o})," nubes de tags"]}),a.jsxs("div",{className:"va-paginator__pages",children:[a.jsx("button",{className:"va-paginator__btn",disabled:t===1,onClick:()=>r(t-1),children:"â¹"}),i.map((n,m)=>n==="â¦"?a.jsx("span",{className:"va-paginator__ellipsis",children:"â¦"},`e${m}`):a.jsx("button",{className:`va-paginator__btn${t===n?" va-paginator__btn--active":""}`,onClick:()=>r(n),children:n},n)),a.jsx("button",{className:"va-paginator__btn",disabled:t>=(s||1),onClick:()=>r(t+1),children:"âº"})]}),a.jsxs("div",{className:"va-paginator__perpage",children:["Por página",a.jsxs("select",{value:l,onChange:n=>{c(Number(n.target.value)),r(1)},children:[a.jsx("option",{value:25,children:"25"}),a.jsx("option",{value:50,children:"50"}),a.jsx("option",{value:100,children:"100"})]})]})]})}function Q({tags:t,setTags:s}){const[o,l]=p.useState(!1),[r,c]=p.useState(""),i=p.useRef(null),n=t.length>=f,m=e=>{const u=(e||"").trim().replace(/^#/,"");if(!u||n){c("");return}if(t.some(v=>v.toLowerCase()===u.toLowerCase())){c("");return}s([...t,u]),c("")},h=e=>{(e.key==="Tab"||e.key==="Enter")&&r.trim()?(e.preventDefault(),m(r)):e.key==="Backspace"&&!r&&t.length&&s(t.slice(0,-1))};return a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"tag-input"+(o?" is-focused":""),onClick:()=>{var e;return(e=i.current)==null?void 0:e.focus()},children:[t.map((e,u)=>a.jsxs("span",{className:"tag-input__pill",children:[a.jsx("span",{children:e}),a.jsx("button",{type:"button",className:"tag-input__remove","aria-label":"Quitar "+e,onClick:v=>{v.stopPropagation(),s(t.filter((b,x)=>x!==u))},children:a.jsx($,{})})]},e+u)),!n&&a.jsx("input",{ref:i,type:"text",className:"tag-input__entry",placeholder:"Agregar Tag","aria-label":"Agregar tag",autoComplete:"off",value:r,onChange:e=>c(e.target.value),onKeyDown:h,onFocus:()=>l(!0),onBlur:()=>l(!1)})]}),a.jsx("span",{className:"tag-hint"+(n?" is-max":""),children:n?a.jsxs(a.Fragment,{children:["*Alcanzaste el máximo de ",a.jsx("strong",{children:f})," tags. Elimina alguno para agregar otro."]}):a.jsxs(a.Fragment,{children:["*Escribe la palabra y presiona ",a.jsx("strong",{children:"Tab"})," para sumar el tag. Se pueden ingresar hasta ",a.jsx("strong",{children:f})," tags."]})})]})}function J({mode:t,initial:s,onSave:o,onClose:l,saving:r}
132){const[c,i]=p.useState(s.cloudName),[n,m]=p.useState(s.tags);p.useEffect(()=>{const e=u=>{u.key==="Escape"&&l()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[l]);const h=!!c.trim()&&n.length>0&&!r;return a.jsx("div",{className:"lt-overlay",onMouseDown:e=>{e.target===e.currentTarget&&l()},children:a.jsxs("div",{className:"lt-modal",role:"dialog","aria-modal":"true","aria-label":t==="edit"?"Editar nube de tags":"Crear nube de tags",children:[a.jsxs("header",{className:"lt-modal__head",children:[a.jsx("h2",{className:"lt-modal__title",children:"Tags Tiendanube"}),a.jsx("button",{className:"lt-modal__close va-btn--icon va-btn--ghost","aria-label":"Cerrar",onClick:l,children:a.jsxs("svg",{className:"icn",viewBox:"0 0 24 24",children:[a.jsx("path",{d:"M18 6 6 18"}),a.jsx("path",{d:"m6 6 12 12"})]})})]}),a.jsxs("div",{className:"lt-modal__body",children:[a.jsx("p",{className:"lt-prompt",children:"Ingresa una palabra para buscar una nube de tags"}),a.jsxs("div",{className:"lt-field",children:[a.jsx("label",{className:"lt-field__label",htmlFor:"lt-nombre",children:"Nombre de la nube"}),a.jsx("input",{id:"lt-nombre",type:"text",className:"va-input",placeholder:"Ej. Materiales escolares",value:c,onChange:e=>i(e.target.value),autoFocus:!0})]}),a.jsx("div",{className:"lt-field",children:a.jsx(Q,{tags:n,setTags:m})})]}),a.jsxs("footer",{className:"lt-modal__foot",children:[a.jsx("button",{className:"va-btn va-btn--secondary",onClick:l,disabled:r,children:"Cancelar"}),a.jsx("button",{className:"va-btn va-btn--primary",disabled:!h,onClick:()=>o({cloudName:c.trim(),tags:n}),children:r?"Guardandoâ¦":"Guardar"})]})]})})}function Z({cloudName:t,onConfirm:s,onClose:o,deleting:l}){return p.useEffect(()=>{const r=c=>{c.key==="Escape"&&o()};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o]),a.jsx("div",{className:"lt-overlay",onMouseDown:r=>{r.target===r.currentTarget&&o()},children:a.jsxs("div",{className:"lt-modal lt-modal--confirm",role:"dialog","aria-modal":"true","aria-label":"Eliminar nube de tags",children:[a.jsxs("div",{className:"lt-confirm__body",children:[a.jsx("div",{className:"lt-confirm__icon",children:a.jsx(W,{})}),a.jsx("h2",{className:"lt-confirm__title",children:"Eliminar nube de tags"}),a.jsxs("p",{className:"lt-confirm__text",children:["¿Seguro que deseas eliminar ",a.jsx("strong",{children:t}),"? Esta acción no se puede deshacer."]})]}),a.jsxs("footer",{className:"lt-modal__foot",children:[a.jsx("button",{className:"va-btn va-btn--secondary",onClick:o,disabled:l,children:"Cancelar"}),a.jsx("button",{className:"va-btn va-btn--destructive",onClick:s,disabled:l,children:l?"Eliminandoâ¦":"Eliminar"})]})]})})}const aa=[56,80,64,72,48,68,60,76];function ea({rows:t=5}){return a.jsx("div",{className:"lt-list",children:Array.from({length:t},(s,o)=>a.jsxs("div",{className:"lt-row",children:[a.jsx("span",{className:"lt-skel lt-skel--name"}),a.jsx("div",{className:"lt-tags",children:aa.slice(0,3+o%3).map((l,r)=>a.jsx("span",{className:"lt-skel lt-skel--tag",style:{width:l}},r))}),a.jsxs("div",{style:{display:"flex",gap:22},children:[a.jsx("span",{className:"lt-skel lt-skel--act"}),a.jsx("span",{className:"lt-skel lt-skel--act"})]})]},o))})}function ta({integracionId:t,empresaIntegracionId:s}){K("Etiquetas");const{data:o}=P(),l=A("/listing-tags");q();const r=I(),c=p.useMemo(()=>{var d;return((d=Object.entries(R).find(([,g])=>g.integracionId===t))==null?void 0:d[0])??"tiendanube"},[t]),[i,n]=p.useState(1),[m,h]=p.useState(25),[e,u]=p.useState(null),[v,b]=p.useState(null),{data:x,isLoading:_,isError:j}=O({page:i,perPage:m,integracionId:t,empresaIntegracionId:s}),w=G(),N=B(),y=V(),C=x?Math.max(1,Math.ceil(x.total/x.perPage)):1,k=(d,g)=>({cloudName:d,tags:g,integracionId:t,empresaIntegracionId:s??null}),S=d=>{(e==null?void 0:e.mode)==="edit"?N.mutate({id:e.row.internalId,body:k(d.cloudName,d.tags)},{onSuccess:()=>{u(null),r.success("Nube de tags actualizada")},onError:()=>r.error("No se pudo actualizar la nube de tags. Intenta de nuevo.")}):w.mutate(k(d.cloudName,d.tags),{onSuccess:()=>{u(null),r.success("Nube de tags creada")},onError:()=>r.error("No se pudo crear la nube de tags. Intenta de nuevo.")})},T=()=>{v&&y.mutate(v.internalId,{onSuccess:()=>{b(null),r.success("Nube de tags eliminada")},onError:()=>r.error("No se pudo eliminar la nube de tags. Intenta de nuevo.")})},z=w.isPending||N.isPending,E=(x==null?void 0:x.items)??[];return o&&!l?null:a.jsxs(a.Fragment,{children:[a.jsx("style",{children:H}),a.jsxs("div",{className:"va-main",children:[a.jsx(L,{}),a.jsxs("div",{className:"lt-head",children:[a.jsxs("div",{className:"lt-head__left",children:[a.jsx(D,{to:"/publicador/$canal",params:{canal:c},className:"lt-head__back",title:"Volver al publicador",children:a.jsx(U,{})}),a.jsx("h1",{className:"lt-head__title",children:"Listado de tags"})]}),a.jsx("div",{className:"lt-head__spacer"}),a.jsxs("button",{className:"va-btn va-btn--primary",onClick:()=>u({mode:"create"}),children:[a.jsx(Y,{})," Crear nube de tags"]})]}),_&&a.jsx(ea,{}),j&&a.jsx("div",{className:"lt-empty",style:{color:"var(--va-danger)"},children:"Error al cargar las nubes de tags."}),!_&&!j&&a.jsxs(a.Fragment,{children:[E.length===0?a.jsx("div",{className:"lt-empty",children:"No se encontraron nubes de tags."}):a.jsx("div",{className:"lt-list",children:E.map(d=>a.jsxs("div",{className:"lt-row",children:[a.jsx("span",{className:"lt-row__name",children:d.cloudName}),a.jsx("div",{className:"lt-tags",children:d.tags.map((g,M)=>a.jsx("span",{className:"lt-tag",children:g},g+M))}),a.jsxs("div",{className:"lt-row__actions",children:[a.jsx("button",{className:"lt-action lt-action--edit",onClick:()=>u({mode:"edit",row:d}),children:"Editar"}),a.jsx("button",{className:"lt-action lt-action--delete",onClick:()=>b(d),children:"Eliminar"})]})]},d.internalId))}),a.jsx("div",{className:"lt-paginator",children:a.jsx(X,{page:i,pages:C,total:(x==null?void 0:x.total)??0,perPage:m,onPage:n,onPerPage:h})})]}),e&&a.jsx(J,{mode:e.mode,initial:e.mode==="edit"?{cloudName:e.row.cloudName,tags:e.row.tags}:{cloudName:"",tags:[]},onSave:S,onClose:()=>u(null),saving:z}),v&&a.jsx(Z,{cloudName:v.cloudName,onConfirm:T,onClose:()=>b(null),deleting:y.isPending})]})]})}const ia=function(){const{integracionId:s,empresaIntegracionId:o}=F.useSearch();return a.jsx(ta,{integracionId:s,empresaIntegracionId:o})};export{ia as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.