@devix-tecnologia/timeline-vue 2.0.2 → 2.1.0

package/dist/timeline-vue.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as m, reactive as S, computed as E, openBlock as a, createElementBlock as i, createElementVNode as u, normalizeClass as q, normalizeStyle as H, toDisplayString as c, resolveComponent as l, createVNode as _, createBlock as b, createCommentVNode as C, ref as W, Fragment as V, renderList as F, renderSlot as B, createTextVNode as R, pushScopeId as M, popScopeId as w, withCtx as D, Transition as z } from "vue";
-const X = m({
+import { defineComponent as m, reactive as T, computed as A, openBlock as i, createElementBlock as c, createElementVNode as u, normalizeClass as P, normalizeStyle as w, toDisplayString as _, resolveComponent as p, createVNode as v, createBlock as b, createCommentVNode as y, ref as M, Fragment as Y, renderList as U, pushScopeId as V, popScopeId as j, renderSlot as I, createTextVNode as L, withCtx as E, Transition as q, withDirectives as te, vModelText as oe, toRef as B } from "vue";
+const ne = m({
   name: "Icone Categoria",
   props: {
     iconeCategoria: {
@@ -24,37 +24,37 @@ const X = m({
     }
   },
   setup(e) {
-    return e = S(e), {
-      classes: E(() => ({
+    return e = T(e), {
+      classes: A(() => ({
         "bg-escuro": e.escuro,
         "bg-claro": !e.escuro,
         [`borda-${e.tipo || "padrao"}`]: !0
       })),
-      style: E(() => ({
+      style: A(() => ({
         borderColor: e.borderColor,
         backgroundColor: e.backgroundColor
       }))
     };
   }
 });
-const v = (e, t) => {
-  const s = e.__vccOpts || e;
-  for (const [o, n] of t)
-    s[o] = n;
-  return s;
-}, Z = { class: "areaCategoria" }, x = ["alt"], ee = { class: "material-symbols-outlined" };
-function te(e, t, s, o, n, d) {
-  return a(), i("div", Z, [
+const f = (e, a) => {
+  const o = e.__vccOpts || e;
+  for (const [s, t] of a)
+    o[s] = t;
+  return o;
+}, ie = { class: "areaCategoria" }, se = ["alt"], re = { class: "material-symbols-outlined" };
+function le(e, a, o, s, t, r) {
+  return i(), c("div", ie, [
     u("div", {
-      class: q(["iconeCategoria", e.classes]),
-      style: H(e.style),
+      class: P(["iconeCategoria", e.classes]),
+      style: w(e.style),
       alt: e.categoria
     }, [
-      u("span", ee, c(e.iconeCategoria), 1)
-    ], 14, x)
+      u("span", re, _(e.iconeCategoria), 1)
+    ], 14, se)
   ]);
 }
-const L = /* @__PURE__ */ v(X, [["render", te], ["__scopeId", "data-v-f922d1fe"]]), ae = m({
+const G = /* @__PURE__ */ f(ne, [["render", le], ["__scopeId", "data-v-f922d1fe"]]), ce = m({
   name: "Icone Status",
   props: {
     status: {
@@ -63,19 +63,19 @@ const L = /* @__PURE__ */ v(X, [["render", te], ["__scopeId", "data-v-f922d1fe"]
     }
   },
   setup(e) {
-    return e = S(e), {
-      classes: E(() => ({
+    return e = T(e), {
+      classes: A(() => ({
         [`${e.status || "planejado"}`]: !0
       }))
     };
   }
 });
-function oe(e, t, s, o, n, d) {
-  return a(), i("div", {
-    class: q([e.classes, "iconeStatus"])
+function de(e, a, o, s, t, r) {
+  return i(), c("div", {
+    class: P([e.classes, "iconeStatus"])
   }, null, 2);
 }
-const J = /* @__PURE__ */ v(ae, [["render", oe], ["__scopeId", "data-v-efe84975"]]), ne = m({
+const N = /* @__PURE__ */ f(ce, [["render", de], ["__scopeId", "data-v-efe84975"]]), ue = m({
   name: "Subtítulo Evento",
   props: {
     subtitulo: {
@@ -84,11 +84,11 @@ const J = /* @__PURE__ */ v(ae, [["render", oe], ["__scopeId", "data-v-efe84975"
     }
   }
 });
-const se = { class: "subtitulo" };
-function ie(e, t, s, o, n, d) {
-  return a(), i("h4", se, c(e.subtitulo), 1);
+const pe = { class: "subtitulo" };
+function ve(e, a, o, s, t, r) {
+  return i(), c("h4", pe, _(e.subtitulo), 1);
 }
-const re = /* @__PURE__ */ v(ne, [["render", ie], ["__scopeId", "data-v-5f7c5673"]]), ce = m({
+const _e = /* @__PURE__ */ f(ue, [["render", ve], ["__scopeId", "data-v-5f7c5673"]]), me = m({
   name: "Título Evento",
   props: {
     titulo: {
@@ -97,11 +97,11 @@ const re = /* @__PURE__ */ v(ne, [["render", ie], ["__scopeId", "data-v-5f7c5673
     }
   }
 });
-const le = { class: "titulo" };
-function de(e, t, s, o, n, d) {
-  return a(), i("h3", le, c(e.titulo), 1);
+const fe = { class: "titulo" };
+function $e(e, a, o, s, t, r) {
+  return i(), c("h3", fe, _(e.titulo), 1);
 }
-const ue = /* @__PURE__ */ v(ce, [["render", de], ["__scopeId", "data-v-7369e837"]]), _e = m({
+const he = /* @__PURE__ */ f(me, [["render", $e], ["__scopeId", "data-v-7369e837"]]), Ce = m({
   name: "Descrição Evento",
   props: {
     titulo: {
@@ -113,22 +113,22 @@ const ue = /* @__PURE__ */ v(ce, [["render", de], ["__scopeId", "data-v-7369e837
       type: String
     }
   },
-  components: { TituloEvento: ue, SubtituloEvento: re }
+  components: { TituloEvento: he, SubtituloEvento: _e }
 });
-function pe(e, t, s, o, n, d) {
-  const r = l("TituloEvento"), f = l("SubtituloEvento");
-  return a(), i("div", {
+function ke(e, a, o, s, t, r) {
+  const n = p("TituloEvento"), l = p("SubtituloEvento");
+  return i(), c("div", {
     class: "descricaoEvento",
-    style: H(`${e.subtitulo ? "" : "padding-top: 3.3rem"}`)
+    style: w(`${e.subtitulo ? "" : "padding-top: 3.3rem"}`)
   }, [
-    _(r, { titulo: e.titulo }, null, 8, ["titulo"]),
-    e.subtitulo ? (a(), b(f, {
+    v(n, { titulo: e.titulo }, null, 8, ["titulo"]),
+    e.subtitulo ? (i(), b(l, {
       key: 0,
       subtitulo: e.subtitulo
-    }, null, 8, ["subtitulo"])) : C("", !0)
+    }, null, 8, ["subtitulo"])) : y("", !0)
   ], 4);
 }
-const me = /* @__PURE__ */ v(_e, [["render", pe], ["__scopeId", "data-v-793cab8b"]]), ve = m({
+const be = /* @__PURE__ */ f(Ce, [["render", ke], ["__scopeId", "data-v-793cab8b"]]), ye = m({
   name: "Hora",
   props: {
     hora: {
@@ -146,19 +146,19 @@ const me = /* @__PURE__ */ v(_e, [["render", pe], ["__scopeId", "data-v-793cab8b
   components: {},
   setup(e) {
     return {
-      horas: W(new Date(e.hora)),
-      classes: E(() => ({
+      horas: M(new Date(e.hora)),
+      classes: A(() => ({
         [`hora-${e.aparencia || ""}`]: !0
       }))
     };
   }
 });
-function fe(e, t, s, o, n, d) {
-  return a(), i("div", {
-    class: q(["hora", e.classes])
-  }, c(e.horas.getHours()) + ":" + c(e.horas.getMinutes().toString().padStart(2, "0")), 3);
+function ge(e, a, o, s, t, r) {
+  return i(), c("div", {
+    class: P(["hora", e.classes])
+  }, _(e.horas.getHours()) + ":" + _(e.horas.getMinutes().toString().padStart(2, "0")), 3);
 }
-const Y = /* @__PURE__ */ v(ve, [["render", fe], ["__scopeId", "data-v-d3082250"]]), $e = m({
+const K = /* @__PURE__ */ f(ye, [["render", ge], ["__scopeId", "data-v-d3082250"]]), Se = m({
   name: "Hora Evento",
   props: {
     horaPrevista: {
@@ -170,27 +170,27 @@ const Y = /* @__PURE__ */ v(ve, [["render", fe], ["__scopeId", "data-v-d3082250"
       type: Date
     }
   },
-  components: { Hora: Y }
+  components: { Hora: K }
 });
-const he = { class: "areaHora" }, ge = { class: "horaEvento" };
-function ye(e, t, s, o, n, d) {
-  const r = l("Hora");
-  return a(), i("div", he, [
-    u("div", ge, [
-      e.horaRealizada ? (a(), b(r, {
+const Ee = { class: "areaHora" }, Te = { class: "horaEvento" };
+function Ae(e, a, o, s, t, r) {
+  const n = p("Hora");
+  return i(), c("div", Ee, [
+    u("div", Te, [
+      e.horaRealizada ? (i(), b(n, {
         key: 0,
         hora: e.horaRealizada,
         style: { "padding-top": "0.3rem" }
-      }, null, 8, ["hora"])) : C("", !0),
-      _(r, {
+      }, null, 8, ["hora"])) : y("", !0),
+      v(n, {
         hora: e.horaPrevista,
         aparencia: e.horaRealizada ? "riscada" : "padrao",
-        style: H(e.horaRealizada ? "" : "padding-top: 1.2rem")
+        style: w(e.horaRealizada ? "" : "padding-top: 1.2rem")
       }, null, 8, ["hora", "aparencia", "style"])
     ])
   ]);
 }
-const be = /* @__PURE__ */ v($e, [["render", ye], ["__scopeId", "data-v-da519ace"]]), Ce = m({
+const De = /* @__PURE__ */ f(Se, [["render", Ae], ["__scopeId", "data-v-da519ace"]]), Oe = m({
   name: "Destaque",
   props: {
     texto: {
@@ -198,11 +198,11 @@ const be = /* @__PURE__ */ v($e, [["render", ye], ["__scopeId", "data-v-da519ace
     }
   }
 });
-const ke = { class: "destaqueEvento texto-pequeno" };
-function Se(e, t, s, o, n, d) {
-  return a(), i("div", ke, c(e.texto), 1);
+const Pe = { class: "destaqueEvento texto-pequeno" };
+function qe(e, a, o, s, t, r) {
+  return i(), c("div", Pe, _(e.texto), 1);
 }
-const Ee = /* @__PURE__ */ v(Ce, [["render", Se], ["__scopeId", "data-v-c2f02de8"]]), Te = m({
+const ze = /* @__PURE__ */ f(Oe, [["render", qe], ["__scopeId", "data-v-c2f02de8"]]), Ie = m({
   name: "Evento Timeline",
   props: {
     status: {
@@ -249,51 +249,51 @@ const Ee = /* @__PURE__ */ v(Ce, [["render", Se], ["__scopeId", "data-v-c2f02de8
     }
   },
   components: {
-    IconeStatus: J,
-    IconeCategoria: L,
-    HoraEvento: be,
-    DescricaoEvento: me,
-    Destaque: Ee
+    IconeStatus: N,
+    IconeCategoria: G,
+    HoraEvento: De,
+    DescricaoEvento: be,
+    Destaque: ze
   },
   emits: {
     click: (e) => !0
   },
-  setup(e, { emit: t }) {
+  setup(e, { emit: a }) {
     return {
-      handleClick: (o) => {
-        e.clicavel && t("click", o);
+      handleClick: (s) => {
+        e.clicavel && a("click", s);
       },
-      eventoSelecionado: E(() => ({
+      eventoSelecionado: A(() => ({
         atual: e.ehAtual,
         padrao: e.ehAtual
       }))
     };
   }
 });
-function Pe(e, t, s, o, n, d) {
-  const r = l("IconeStatus"), f = l("HoraEvento"), y = l("IconeCategoria"), $ = l("DescricaoEvento"), I = l("Destaque");
-  return a(), i("article", {
+function Be(e, a, o, s, t, r) {
+  const n = p("IconeStatus"), l = p("HoraEvento"), $ = p("IconeCategoria"), C = p("DescricaoEvento"), D = p("Destaque");
+  return i(), c("article", {
     "data-testid": "evento",
-    class: q(["eventoTimeline", [e.status, "criticidade-" + e.criticidade, e.eventoSelecionado, e.clicavel]]),
-    onClick: t[0] || (t[0] = (...p) => e.handleClick && e.handleClick(...p))
+    class: P(["eventoTimeline", [e.status, "criticidade-" + e.criticidade, e.eventoSelecionado, e.clicavel]]),
+    onClick: a[0] || (a[0] = (...h) => e.handleClick && e.handleClick(...h))
   }, [
-    _(r, { status: e.status }, null, 8, ["status"]),
-    _(f, {
+    v(n, { status: e.status }, null, 8, ["status"]),
+    v(l, {
       horaPrevista: e.previstoPara,
       horaRealizada: e.realizadoEm
     }, null, 8, ["horaPrevista", "horaRealizada"]),
-    _(y, {
+    v($, {
       iconeCategoria: e.categoria.icone,
       categoria: e.categoria.nome
     }, null, 8, ["iconeCategoria", "categoria"]),
-    _($, {
+    v(C, {
       titulo: e.titulo,
       subtitulo: e.subtitulo
     }, null, 8, ["titulo", "subtitulo"]),
-    _(I, { texto: e.textoDestaque }, null, 8, ["texto"])
+    v(D, { texto: e.textoDestaque }, null, 8, ["texto"])
   ], 2);
 }
-const G = /* @__PURE__ */ v(Te, [["render", Pe]]), De = m({
+const Q = /* @__PURE__ */ f(Ie, [["render", Be]]), Ve = m({
   name: "Box Data",
   props: {
     dataNumero: {
@@ -305,19 +305,19 @@ const G = /* @__PURE__ */ v(Te, [["render", Pe]]), De = m({
     }
   },
   setup(e) {
-    return e = S(e), {
-      classes: E(() => ({
+    return e = T(e), {
+      classes: A(() => ({
         [`${e.aparencia || "padrao"}`]: !0
       }))
     };
   }
 });
-function qe(e, t, s, o, n, d) {
-  return a(), i("h3", {
-    class: q(["boxData padrao", e.classes])
-  }, c(e.dataNumero), 3);
+function je(e, a, o, s, t, r) {
+  return i(), c("h3", {
+    class: P(["boxData padrao", e.classes])
+  }, _(e.dataNumero), 3);
 }
-const Ie = /* @__PURE__ */ v(De, [["render", qe], ["__scopeId", "data-v-385cc692"]]), ze = m({
+const He = /* @__PURE__ */ f(Ve, [["render", je], ["__scopeId", "data-v-385cc692"]]), Re = m({
   name: "SeparadorPeriodo",
   props: {
     dataSeparador: {
@@ -325,25 +325,25 @@ const Ie = /* @__PURE__ */ v(De, [["render", qe], ["__scopeId", "data-v-385cc692
       type: Date
     }
   },
-  components: { BoxData: Ie },
+  components: { BoxData: He },
   setup(e) {
-    const t = new Array(12);
-    return t[0] = "Janeiro", t[1] = "Fevereiro", t[2] = "Março", t[3] = "Abril", t[4] = "Maio", t[5] = "Junho", t[6] = "Julho", t[7] = "Agosto", t[8] = "Setembro", t[9] = "Outubro", t[10] = "Novembro", t[11] = "Dezembro", { mesCorrente: (o) => t[o] };
+    const a = new Array(12);
+    return a[0] = "Janeiro", a[1] = "Fevereiro", a[2] = "Março", a[3] = "Abril", a[4] = "Maio", a[5] = "Junho", a[6] = "Julho", a[7] = "Agosto", a[8] = "Setembro", a[9] = "Outubro", a[10] = "Novembro", a[11] = "Dezembro", { mesCorrente: (s) => a[s] };
   }
 });
-const Ae = { class: "separadorPeriodo" }, Be = { class: "areaData" }, Oe = { class: "titulo" };
-function je(e, t, s, o, n, d) {
-  const r = l("BoxData");
-  return a(), i("div", Ae, [
-    u("div", Be, [
-      _(r, {
+const we = { class: "separadorPeriodo" }, Me = { class: "areaData" }, Le = { class: "titulo" };
+function Ne(e, a, o, s, t, r) {
+  const n = p("BoxData");
+  return i(), c("div", we, [
+    u("div", Me, [
+      v(n, {
         dataNumero: e.dataSeparador.getDate()
       }, null, 8, ["dataNumero"])
     ]),
-    u("h3", Oe, c(e.mesCorrente(e.dataSeparador.getMonth())) + " de " + c(e.dataSeparador.getFullYear()), 1)
+    u("h3", Le, _(e.mesCorrente(e.dataSeparador.getMonth())) + " de " + _(e.dataSeparador.getFullYear()), 1)
   ]);
 }
-const He = /* @__PURE__ */ v(ze, [["render", je]]), Re = m({
+const Fe = /* @__PURE__ */ f(Re, [["render", Ne]]), Je = m({
   name: "Avatar Timeline",
   props: {
     imagem: {
@@ -354,23 +354,23 @@ const He = /* @__PURE__ */ v(ze, [["render", je]]), Re = m({
     }
   }
 });
-const Me = { class: "avatar" }, we = ["src"], Ne = {
+const Ye = { class: "avatar" }, Ue = ["src"], Ge = {
   key: 1,
   class: "material-symbols-outlined"
-}, Ve = {
+}, Ke = {
   key: 2,
   class: "material-symbols-outlined"
 };
-function Fe(e, t, s, o, n, d) {
-  return a(), i("div", Me, [
-    e.imagem ? (a(), i("img", {
+function Qe(e, a, o, s, t, r) {
+  return i(), c("div", Ye, [
+    e.imagem ? (i(), c("img", {
       key: 0,
       src: e.imagem
-    }, null, 8, we)) : e.icone ? (a(), i("span", Ne, c(e.icone), 1)) : (a(), i("span", Ve, " person "))
+    }, null, 8, Ue)) : e.icone ? (i(), c("span", Ge, _(e.icone), 1)) : (i(), c("span", Ke, " person "))
   ]);
 }
-const Le = /* @__PURE__ */ v(Re, [["render", Fe], ["__scopeId", "data-v-bd3d61f3"]]), Je = m({
-  components: { AvatarTimeline: Le },
+const We = /* @__PURE__ */ f(Je, [["render", Qe], ["__scopeId", "data-v-28501768"]]), Xe = m({
+  components: { AvatarTimeline: We },
   props: {
     imagemPerfil: {
       type: String
@@ -387,31 +387,31 @@ const Le = /* @__PURE__ */ v(Re, [["render", Fe], ["__scopeId", "data-v-bd3d61f3
     }
   },
   setup(e) {
-    return e = S(e), {
-      classes: E(() => ({
+    return e = T(e), {
+      classes: A(() => ({
         "formato-reduzido": e.formatoReduzido,
         "formato-normal": !e.formatoReduzido
       }))
     };
   }
 });
-const Ye = { class: "nome" };
-function Ge(e, t, s, o, n, d) {
-  const r = l("AvatarTimeline");
-  return a(), i("section", {
-    class: q(["perfilTimeline", e.classes])
+const Ze = { class: "nome" };
+function xe(e, a, o, s, t, r) {
+  const n = p("AvatarTimeline");
+  return i(), c("section", {
+    class: P(["perfilTimeline", e.classes])
   }, [
-    e.imagemPerfil ? (a(), b(r, {
+    e.imagemPerfil ? (i(), b(n, {
       key: 0,
       imagem: e.imagemPerfil
-    }, null, 8, ["imagem"])) : e.iconePerfil ? (a(), b(r, {
+    }, null, 8, ["imagem"])) : e.iconePerfil ? (i(), b(n, {
       key: 1,
       icone: e.iconePerfil
-    }, null, 8, ["icone"])) : C("", !0),
-    u("h2", Ye, c(e.nomePerfil), 1)
+    }, null, 8, ["icone"])) : y("", !0),
+    u("h2", Ze, _(e.nomePerfil), 1)
   ], 2);
 }
-const K = /* @__PURE__ */ v(Je, [["render", Ge]]), Ke = m({
+const W = /* @__PURE__ */ f(Xe, [["render", xe]]), ea = m({
   props: {
     perfilTimeline: {
       required: !1,
@@ -423,126 +423,172 @@ const K = /* @__PURE__ */ v(Je, [["render", Ge]]), Ke = m({
     }
   },
   components: {
-    PerfilTimeline: K,
-    SeparadorPeriodo: He,
-    EventoTimeline: G
+    PerfilTimeline: W,
+    SeparadorPeriodo: Fe,
+    EventoTimeline: Q
   },
   emits: {
-    eventoClick: (e, t) => !0
+    eventoClick: (e, a) => !0
   },
-  setup(e, { emit: t }) {
-    const s = (p, h) => {
-      p.clicavel !== !1 && t("eventoClick", p, h);
-    }, o = S(e.eventosTimeline);
-    let n = S(o);
-    function d() {
-      const p = y(o);
-      o.forEach((h) => {
-        const g = p.length > 0 && p[0] === h;
-        h.atual = g, h.scroll = g;
-      }), I();
+  setup(e, { emit: a }) {
+    const o = (h, k) => {
+      h.clicavel !== !1 && a("eventoClick", h, k);
+    }, s = T(e.eventosTimeline);
+    let t = T(s);
+    function r() {
+      const h = $(s);
+      s.forEach((k) => {
+        const g = h.length > 0 && h[0] === k;
+        k.atual = g, k.scroll = g;
+      }), D();
     }
-    const r = () => {
-      setInterval(d, 6e4);
-    }, f = (p, h) => {
-      const g = p.getDay() === h.getDay(), T = p.getMonth() === h.getMonth(), k = p.getFullYear() === h.getFullYear();
-      return g && T && k;
-    }, y = (p) => {
-      if (p) {
-        const h = Date.now();
-        let g = null, T = [];
-        for (const k of p) {
-          const P = k.data.getTime();
-          if (k.status === "planejado" || k.status === "atrasado") {
-            const A = Math.abs(h - k.data.getTime());
-            if (g === null || A < g && P <= h)
-              g = A, T.length = 0;
-            else if (A > g)
+    const n = () => {
+      setInterval(r, 6e4);
+    }, l = (h, k) => {
+      const g = h.getDay() === k.getDay(), O = h.getMonth() === k.getMonth(), d = h.getFullYear() === k.getFullYear();
+      return g && O && d;
+    }, $ = (h) => {
+      if (h) {
+        const k = Date.now();
+        let g = null, O = [];
+        for (const d of h) {
+          const S = d.data.getTime();
+          if (d.status === "planejado" || d.status === "atrasado") {
+            const z = Math.abs(k - d.data.getTime());
+            if (g === null || z < g && S <= k)
+              g = z, O.length = 0;
+            else if (z > g)
               continue;
-            T.push(k);
+            O.push(d);
           }
         }
-        return T;
+        return O;
       } else
         return [];
-    }, $ = E(() => {
-      r();
-      const p = n.sort((h, g) => h.data.getTime() - g.data.getTime());
-      if (p) {
-        let h = [], g = null, T = 0, k;
-        for (const P of p) {
-          const A = /* @__PURE__ */ new Date(), j = P.data;
-          k = P.status;
-          const U = P.tolerancia * 60 * 1e3;
-          k === "planejado" && j.getTime() + U < A.getTime() && (P.status = "atrasado"), (!g || !f(g, j)) && (g = j, h.push({
+    }, C = A(() => {
+      n();
+      const h = t.sort((k, g) => k.data.getTime() - g.data.getTime());
+      if (h) {
+        let k = [], g = null, O = 0, d;
+        for (const S of h) {
+          const z = /* @__PURE__ */ new Date(), R = S.data;
+          d = S.status;
+          const ae = S.tolerancia * 60 * 1e3;
+          d === "planejado" && R.getTime() + ae < z.getTime() && (S.status = "atrasado"), (!g || !l(g, R)) && (g = R, k.push({
             tipo: "dia",
-            valor: P.data,
-            key: ++T
-          })), h.push({
+            valor: S.data,
+            key: ++O
+          })), k.push({
             tipo: "evento",
-            valor: P,
-            key: ++T
+            valor: S,
+            key: ++O
           });
         }
-        return h;
+        return k;
       } else
         return [];
-    }), I = () => {
-      const p = document.querySelector(".atual");
-      !p || !p.scrollIntoView || p.scrollIntoView({
+    }), D = () => {
+      const h = document.querySelector(".atual");
+      !h || !h.scrollIntoView || h.scrollIntoView({
         behavior: "smooth",
         block: "center"
       });
     };
-    return d(), {
-      eventosPorTipo: $,
-      scrollParaItemAtual: I,
-      handleEventoClick: s
+    return r(), {
+      eventosPorTipo: C,
+      scrollParaItemAtual: D,
+      handleEventoClick: o
     };
   },
   mounted() {
     this.scrollParaItemAtual();
   }
 });
-const Qe = { class: "areaTimeline" }, Ue = { class: "timeline" };
-function We(e, t, s, o, n, d) {
-  const r = l("PerfilTimeline"), f = l("SeparadorPeriodo"), y = l("EventoTimeline");
-  return a(), i("div", Qe, [
-    e.perfilTimeline ? (a(), b(r, {
+const aa = { class: "areaTimeline" }, ta = { class: "timeline" };
+function oa(e, a, o, s, t, r) {
+  const n = p("PerfilTimeline"), l = p("SeparadorPeriodo"), $ = p("EventoTimeline");
+  return i(), c("div", aa, [
+    e.perfilTimeline ? (i(), b(n, {
       key: 0,
       nomePerfil: e.perfilTimeline.nome,
       imagemPerfil: e.perfilTimeline.imagem,
       iconePerfil: e.perfilTimeline.icone,
       "data-testid": "perfilTimeline"
-    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : C("", !0),
-    u("section", Ue, [
-      (a(!0), i(V, null, F(e.eventosPorTipo, ($, I) => (a(), i("div", {
-        key: $.key
+    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : y("", !0),
+    u("section", ta, [
+      (i(!0), c(Y, null, U(e.eventosPorTipo, (C, D) => (i(), c("div", {
+        key: C.key
       }, [
-        $.tipo === "dia" ? (a(), b(f, {
+        C.tipo === "dia" ? (i(), b(l, {
           key: 0,
-          dataSeparador: $.valor,
-          "data-testid": `evento-timeline-${I}`
-        }, null, 8, ["dataSeparador", "data-testid"])) : C("", !0),
-        $.tipo === "evento" ? (a(), b(y, {
+          dataSeparador: C.valor,
+          "data-testid": `evento-timeline-${D}`
+        }, null, 8, ["dataSeparador", "data-testid"])) : y("", !0),
+        C.tipo === "evento" ? (i(), b($, {
           key: 1,
-          status: $.valor.status,
-          criticidade: $.valor.criticidade,
-          previstoPara: $.valor.previstoPara,
-          "realizado-em": $.valor.realizado,
-          categoria: $.valor.categoria,
-          titulo: $.valor.titulo,
-          subtitulo: $.valor.subtitulo,
-          "texto-destaque": $.valor.destaque,
-          ehAtual: $.valor.atual,
-          onClick: (p) => e.handleEventoClick($.valor, p),
-          "data-testid": `evento-timeline-${I}`
-        }, null, 8, ["status", "criticidade", "previstoPara", "realizado-em", "categoria", "titulo", "subtitulo", "texto-destaque", "ehAtual", "onClick", "data-testid"])) : C("", !0)
+          status: C.valor.status,
+          criticidade: C.valor.criticidade,
+          previstoPara: C.valor.previstoPara,
+          "realizado-em": C.valor.realizado,
+          categoria: C.valor.categoria,
+          titulo: C.valor.titulo,
+          subtitulo: C.valor.subtitulo,
+          "texto-destaque": C.valor.destaque,
+          ehAtual: C.valor.atual,
+          onClick: (h) => e.handleEventoClick(C.valor, h),
+          "data-testid": `evento-timeline-${D}`
+        }, null, 8, ["status", "criticidade", "previstoPara", "realizado-em", "categoria", "titulo", "subtitulo", "texto-destaque", "ehAtual", "onClick", "data-testid"])) : y("", !0)
       ]))), 128))
     ])
   ]);
 }
-const Xe = /* @__PURE__ */ v(Ke, [["render", We]]), Ze = m({
+const X = /* @__PURE__ */ f(ea, [["render", oa]]), na = m({
+  name: "Topo",
+  props: {
+    titulo: {
+      type: String
+    },
+    escuro: {
+      type: Boolean,
+      default: !0
+    },
+    link: {}
+  },
+  emits: {
+    voltarClick: (e) => !0
+  },
+  setup(e, { emit: a }) {
+    const o = (s) => {
+      a("voltarClick", s);
+    };
+    return e = T(e), {
+      emitirVoltarClick: o,
+      classes: A(() => ({
+        "bg-escuro": e.escuro,
+        "bg-claro": !e.escuro
+      }))
+    };
+  }
+});
+const ia = (e) => (V("data-v-33d6850e"), e = e(), j(), e), sa = { class: "conteudoTitulo" }, ra = /* @__PURE__ */ ia(() => /* @__PURE__ */ u("span", { class: "material-symbols-outlined" }, " arrow_back ", -1)), la = [
+  ra
+], ca = { class: "titulo" };
+function da(e, a, o, s, t, r) {
+  return i(), c("div", {
+    class: P(["topo", e.classes]),
+    "data-testid": "topo"
+  }, [
+    u("div", sa, [
+      u("button", {
+        class: "btn_voltar",
+        onClick: a[0] || (a[0] = (...n) => e.emitirVoltarClick && e.emitirVoltarClick(...n)),
+        "data-testid": "botao-voltar"
+      }, la),
+      u("h3", ca, _(e.titulo), 1)
+    ])
+  ], 2);
+}
+const ua = /* @__PURE__ */ f(na, [["render", da], ["__scopeId", "data-v-33d6850e"]]), pa = m({
   name: "Botao",
   props: {
     titulo: {
@@ -564,38 +610,38 @@ const Xe = /* @__PURE__ */ v(Ke, [["render", We]]), Ze = m({
   emits: {
     click: (e) => !0
   },
-  setup(e, { emit: t }) {
-    e = S(e);
-    const s = (n) => {
-      t("click", n);
-    }, o = E(() => ({
+  setup(e, { emit: a }) {
+    e = T(e);
+    const o = (t) => {
+      a("click", t);
+    }, s = A(() => ({
       [`${e.aparencia}`]: !0,
       [`${e.tamanho}`]: !0
     }));
     return {
-      handleClick: s,
-      classes: o
+      handleClick: o,
+      classes: s
     };
   }
 });
-const xe = {
+const va = {
   key: 0,
   class: "material-symbols-outlined"
 };
-function et(e, t, s, o, n, d) {
-  return a(), i("button", {
+function _a(e, a, o, s, t, r) {
+  return i(), c("button", {
     class: "btn",
     "data-testid": "botao",
-    onClick: t[0] || (t[0] = (...r) => e.handleClick && e.handleClick(...r))
+    onClick: a[0] || (a[0] = (...n) => e.handleClick && e.handleClick(...n))
   }, [
-    B(e.$slots, "default", {}, () => [
-      e.icone ? (a(), i("span", xe, c(e.icone), 1)) : C("", !0),
-      R(" " + c(e.titulo), 1)
+    I(e.$slots, "default", {}, () => [
+      e.icone ? (i(), c("span", va, _(e.icone), 1)) : y("", !0),
+      L(" " + _(e.titulo), 1)
     ], !0)
   ]);
 }
-const O = /* @__PURE__ */ v(Ze, [["render", et], ["__scopeId", "data-v-ce25287c"]]), tt = m({
-  components: { Botao: O, PerfilTimeline: K, IconeCategoria: L, Hora: Y },
+const H = /* @__PURE__ */ f(pa, [["render", _a], ["__scopeId", "data-v-ce25287c"]]), ma = m({
+  components: { Botao: H, PerfilTimeline: W, IconeCategoria: G, Hora: K },
   name: "CabecalhoEventoDetalhado",
   props: {
     perfil: {
@@ -611,60 +657,60 @@ const O = /* @__PURE__ */ v(Ze, [["render", et], ["__scopeId", "data-v-ce25287c"
     return {};
   }
 });
-const Q = (e) => (M("data-v-aa43d357"), e = e(), w(), e), at = {
+const Z = (e) => (V("data-v-aa43d357"), e = e(), j(), e), fa = {
   key: 1,
   class: "criticidade"
-}, ot = { class: "titulo" }, nt = { class: "dataHora" }, st = { class: "box" }, it = /* @__PURE__ */ Q(() => /* @__PURE__ */ u("span", { class: "material-symbols-outlined" }, " calendar_month ", -1)), rt = { class: "horaEvento" }, ct = {
+}, $a = { class: "titulo" }, ha = { class: "dataHora" }, Ca = { class: "box" }, ka = /* @__PURE__ */ Z(() => /* @__PURE__ */ u("span", { class: "material-symbols-outlined" }, " calendar_month ", -1)), ba = { class: "horaEvento" }, ya = {
   key: 0,
   class: "horaRealizada texto-grande"
-}, lt = {
+}, ga = {
   key: 1,
   class: "horaPlanejada texto-pequeno"
-}, dt = {
+}, Sa = {
   key: 2,
   class: "horaRealizada texto-grande"
-}, ut = { class: "box" }, _t = /* @__PURE__ */ Q(() => /* @__PURE__ */ u("span", { class: "material-symbols-outlined" }, " schedule ", -1)), pt = { class: "horaEvento" };
-function mt(e, t, s, o, n, d) {
-  const r = l("PerfilTimeline"), f = l("IconeCategoria"), y = l("Hora");
-  return a(), i("section", {
-    class: q(["cabecalho-evento", ["criticidade-" + e.evento.criticidade]])
+}, Ea = { class: "box" }, Ta = /* @__PURE__ */ Z(() => /* @__PURE__ */ u("span", { class: "material-symbols-outlined" }, " schedule ", -1)), Aa = { class: "horaEvento" };
+function Da(e, a, o, s, t, r) {
+  const n = p("PerfilTimeline"), l = p("IconeCategoria"), $ = p("Hora");
+  return i(), c("section", {
+    class: P(["cabecalho-evento", ["criticidade-" + e.evento.criticidade]])
   }, [
-    e.perfil ? (a(), b(r, {
+    e.perfil ? (i(), b(n, {
       key: 0,
       nomePerfil: e.perfil.nome,
       imagemPerfil: e.perfil.imagem,
       iconePerfil: e.perfil.icone,
       formatoReduzido: !0
-    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : C("", !0),
-    e.evento.criticidade !== "baixa" ? (a(), i("div", at, " Criticidade: " + c(e.evento.criticidade), 1)) : C("", !0),
-    u("div", ot, [
-      _(f, {
+    }, null, 8, ["nomePerfil", "imagemPerfil", "iconePerfil"])) : y("", !0),
+    e.evento.criticidade !== "baixa" ? (i(), c("div", fa, " Criticidade: " + _(e.evento.criticidade), 1)) : y("", !0),
+    u("div", $a, [
+      v(l, {
         iconeCategoria: e.evento.categoria.icone,
         categoria: e.evento.categoria.nome
       }, null, 8, ["iconeCategoria", "categoria"]),
-      u("h1", null, c(e.evento.titulo), 1)
+      u("h1", null, _(e.evento.titulo), 1)
     ]),
-    u("div", nt, [
-      u("div", st, [
-        it,
-        u("div", rt, [
-          e.evento.realizado ? (a(), i("div", ct, c(e.evento.realizado.toLocaleDateString()), 1)) : C("", !0),
-          e.evento.realizado ? (a(), i("div", lt, c(e.evento.realizado.toLocaleDateString()), 1)) : (a(), i("div", dt, c(e.evento.previstoPara.toLocaleDateString()), 1))
+    u("div", ha, [
+      u("div", Ca, [
+        ka,
+        u("div", ba, [
+          e.evento.realizado ? (i(), c("div", ya, _(e.evento.realizado.toLocaleDateString()), 1)) : y("", !0),
+          e.evento.realizado ? (i(), c("div", ga, _(e.evento.realizado.toLocaleDateString()), 1)) : (i(), c("div", Sa, _(e.evento.previstoPara.toLocaleDateString()), 1))
         ])
       ]),
-      u("div", ut, [
-        _t,
-        u("div", pt, [
-          e.evento.realizado ? (a(), b(y, {
+      u("div", Ea, [
+        Ta,
+        u("div", Aa, [
+          e.evento.realizado ? (i(), b($, {
             key: 0,
             class: "horaRealizada texto-grande",
             hora: e.evento.realizado
-          }, null, 8, ["hora"])) : C("", !0),
-          e.evento.realizado ? (a(), b(y, {
+          }, null, 8, ["hora"])) : y("", !0),
+          e.evento.realizado ? (i(), b($, {
             key: 1,
             class: "horaPlanejada texto-pequeno",
             hora: e.evento.previstoPara
-          }, null, 8, ["hora"])) : (a(), b(y, {
+          }, null, 8, ["hora"])) : (i(), b($, {
             key: 2,
             class: "horaRealizada texto-grande",
             hora: e.evento.previstoPara
@@ -674,8 +720,8 @@ function mt(e, t, s, o, n, d) {
     ])
   ], 2);
 }
-const vt = /* @__PURE__ */ v(tt, [["render", mt], ["__scopeId", "data-v-aa43d357"]]), ft = m({
-  components: { Botao: O },
+const Oa = /* @__PURE__ */ f(ma, [["render", Da], ["__scopeId", "data-v-aa43d357"]]), Pa = m({
+  components: { Botao: H },
   name: "Observacoes",
   props: {
     tituloBotao: {
@@ -689,32 +735,32 @@ const vt = /* @__PURE__ */ v(tt, [["render", mt], ["__scopeId", "data-v-aa43d357
   emits: {
     adicionarClick: (e) => !0
   },
-  setup(e, { emit: t }) {
-    const s = (o) => {
-      t("adicionarClick", o);
+  setup(e, { emit: a }) {
+    const o = (s) => {
+      a("adicionarClick", s);
     };
-    return e.observacoes.sort((o, n) => n.criadaEm.getTime() - o.criadaEm.getTime()), e = S(e), { emitirAdicionarClick: s };
+    return e.observacoes.sort((s, t) => t.criadaEm.getTime() - s.criadaEm.getTime()), e = T(e), { emitirAdicionarClick: o };
   }
 });
-const $t = (e) => (M("data-v-27347f9c"), e = e(), w(), e), ht = {
+const qa = (e) => (V("data-v-27347f9c"), e = e(), j(), e), za = {
   class: "box box-observacoes",
   "data-testid": "observacoes"
-}, gt = /* @__PURE__ */ $t(() => /* @__PURE__ */ u("h3", null, "Observações:", -1)), yt = { class: "lista-obs" }, bt = ["data-testid"], Ct = { class: "texto" }, kt = { class: "autor" };
-function St(e, t, s, o, n, d) {
-  const r = l("Botao");
-  return a(), i("section", ht, [
-    gt,
-    u("ul", yt, [
-      (a(!0), i(V, null, F(e.observacoes, (f, y) => (a(), i("li", {
-        "data-testid": `observacao-${y}`,
-        key: y,
+}, Ia = /* @__PURE__ */ qa(() => /* @__PURE__ */ u("h3", null, "Observações:", -1)), Ba = { class: "lista-obs" }, Va = ["data-testid"], ja = { class: "texto" }, Ha = { class: "autor" };
+function Ra(e, a, o, s, t, r) {
+  const n = p("Botao");
+  return i(), c("section", za, [
+    Ia,
+    u("ul", Ba, [
+      (i(!0), c(Y, null, U(e.observacoes, (l, $) => (i(), c("li", {
+        "data-testid": `observacao-${$}`,
+        key: $,
         class: "lista-item"
       }, [
-        u("p", Ct, c(f.mensagem), 1),
-        u("div", kt, c(f.autor.nome) + " em " + c(f.criadaEm.toLocaleDateString()) + " às " + c(f.criadaEm.getHours()) + ":" + c(f.criadaEm.getMinutes().toString().padStart(2, "0")), 1)
-      ], 8, bt))), 128))
+        u("p", ja, _(l.mensagem), 1),
+        u("div", Ha, _(l.autor.nome) + " em " + _(l.criadaEm.toLocaleDateString()) + " às " + _(l.criadaEm.getHours()) + ":" + _(l.criadaEm.getMinutes().toString().padStart(2, "0")), 1)
+      ], 8, Va))), 128))
     ]),
-    _(r, {
+    v(n, {
       titulo: e.tituloBotao,
       "data-testid": "botao-adicionar",
       icone: "add",
@@ -724,8 +770,8 @@ function St(e, t, s, o, n, d) {
     }, null, 8, ["titulo", "onClick"])
   ]);
 }
-const Et = /* @__PURE__ */ v(ft, [["render", St], ["__scopeId", "data-v-27347f9c"]]), Tt = m({
-  components: { Botao: O, IconeStatus: J },
+const wa = /* @__PURE__ */ f(Pa, [["render", Ra], ["__scopeId", "data-v-27347f9c"]]), Ma = m({
+  components: { Botao: H, IconeStatus: N },
   name: "BotaoStatus",
   props: {
     aparencia: {
@@ -739,39 +785,39 @@ const Et = /* @__PURE__ */ v(ft, [["render", St], ["__scopeId", "data-v-27347f9c
   emits: {
     click: (e) => !0
   },
-  setup(e, { emit: t }) {
-    e = S(e);
-    const s = E(() => ({
+  setup(e, { emit: a }) {
+    e = T(e);
+    const o = A(() => ({
       [`${e.status}`]: !0
     }));
     return {
-      emitirClick: (n) => {
-        t("click", n);
+      emitirClick: (t) => {
+        a("click", t);
       },
-      classes: s
+      classes: o
     };
   }
 });
-function Pt(e, t, s, o, n, d) {
-  const r = l("IconeStatus"), f = l("Botao");
-  return a(), b(f, {
+function La(e, a, o, s, t, r) {
+  const n = p("IconeStatus"), l = p("Botao");
+  return i(), b(l, {
     aparencia: e.aparencia,
-    class: q(e.classes),
+    class: P(e.classes),
     onClick: e.emitirClick,
     "data-testid": "botao-status"
   }, {
-    default: D(() => [
-      _(r, {
+    default: E(() => [
+      v(n, {
         class: "icone",
         status: e.status
       }, null, 8, ["status"]),
-      R(" " + c(e.status), 1)
+      L(" " + _(e.status), 1)
     ]),
     _: 1
   }, 8, ["aparencia", "class", "onClick"]);
 }
-const Dt = /* @__PURE__ */ v(Tt, [["render", Pt], ["__scopeId", "data-v-9b0bacc7"]]), qt = m({
-  components: { BotaoStatus: Dt },
+const x = /* @__PURE__ */ f(Ma, [["render", La], ["__scopeId", "data-v-9b0bacc7"]]), Na = m({
+  components: { BotaoStatus: x },
   name: "StatusEvento",
   props: {
     aparencia: {
@@ -785,22 +831,22 @@ const Dt = /* @__PURE__ */ v(Tt, [["render", Pt], ["__scopeId", "data-v-9b0bacc7
   emits: {
     click: (e) => !0
   },
-  setup(e, { emit: t }) {
-    const s = (o) => {
-      t("click", o);
+  setup(e, { emit: a }) {
+    const o = (s) => {
+      a("click", s);
     };
-    return e = S(e), {
-      emitClick: s,
+    return e = T(e), {
+      emitClick: o,
       props: e
     };
   }
 });
-const It = (e) => (M("data-v-027bde63"), e = e(), w(), e), zt = { class: "box box-status" }, At = /* @__PURE__ */ It(() => /* @__PURE__ */ u("h3", null, "Status:", -1));
-function Bt(e, t, s, o, n, d) {
-  const r = l("BotaoStatus");
-  return a(), i("section", zt, [
-    At,
-    _(r, {
+const Fa = (e) => (V("data-v-027bde63"), e = e(), j(), e), Ja = { class: "box box-status" }, Ya = /* @__PURE__ */ Fa(() => /* @__PURE__ */ u("h3", null, "Status:", -1));
+function Ua(e, a, o, s, t, r) {
+  const n = p("BotaoStatus");
+  return i(), c("section", Ja, [
+    Ya,
+    v(n, {
       "data-testid": "botao-status",
       aparencia: e.aparencia,
       status: e.status,
@@ -808,7 +854,7 @@ function Bt(e, t, s, o, n, d) {
     }, null, 8, ["aparencia", "status", "onClick"])
   ]);
 }
-const Ot = /* @__PURE__ */ v(qt, [["render", Bt], ["__scopeId", "data-v-027bde63"]]), jt = m({
+const Ga = /* @__PURE__ */ f(Na, [["render", Ua], ["__scopeId", "data-v-027bde63"]]), Ka = m({
   name: "EventoDetalhado",
   props: {
     perfil: {
@@ -820,63 +866,63 @@ const Ot = /* @__PURE__ */ v(qt, [["render", Bt], ["__scopeId", "data-v-027bde63
       type: Object
     }
   },
-  components: { CabecalhoEventoDetalhado: vt, Observacoes: Et, StatusEvento: Ot },
+  components: { CabecalhoEventoDetalhado: Oa, Observacoes: wa, StatusEvento: Ga },
   emits: {
     statusEditarClick: (e) => !0,
     observacaoAdicionarClick: (e) => !0
   },
-  setup(e, { emit: t }) {
+  setup(e, { emit: a }) {
     return {
-      handleEditarClick: (n) => {
-        t("statusEditarClick", n);
+      handleEditarClick: (t) => {
+        a("statusEditarClick", t);
       },
-      handleAdicionarObservacaoClick: (n) => {
-        t("observacaoAdicionarClick", n);
+      handleAdicionarObservacaoClick: (t) => {
+        a("observacaoAdicionarClick", t);
       }
     };
   }
 });
-const Ht = {
+const Qa = {
   class: "evento",
   "data-testid": "evento-detalhado"
-}, Rt = { class: "descricao" };
-function Mt(e, t, s, o, n, d) {
-  const r = l("CabecalhoEventoDetalhado"), f = l("Observacoes"), y = l("StatusEvento");
-  return a(), i("div", Ht, [
-    _(z, {
+}, Wa = { class: "descricao" };
+function Xa(e, a, o, s, t, r) {
+  const n = p("CabecalhoEventoDetalhado"), l = p("Observacoes"), $ = p("StatusEvento");
+  return i(), c("div", Qa, [
+    v(q, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: D(() => [
-        _(r, {
+      default: E(() => [
+        v(n, {
           perfil: e.perfil,
           evento: e.evento
         }, null, 8, ["perfil", "evento"])
       ]),
       _: 1
     }),
-    _(z, {
+    v(q, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: D(() => [
-        u("section", Rt, [
-          B(e.$slots, "descricao", {}, () => [
-            R(c(e.evento.subtitulo), 1)
+      default: E(() => [
+        u("section", Wa, [
+          I(e.$slots, "descricao", {}, () => [
+            L(_(e.evento.subtitulo), 1)
           ])
         ])
       ]),
       _: 3
     }),
-    _(z, {
+    v(q, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: D(() => [
-        _(f, {
+      default: E(() => [
+        v(l, {
           observacoes: e.evento.observacoes,
           tituloBotao: "Inserir observação",
           onAdicionarClick: e.handleAdicionarObservacaoClick
@@ -884,13 +930,13 @@ function Mt(e, t, s, o, n, d) {
       ]),
       _: 1
     }),
-    _(z, {
+    v(q, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: D(() => [
-        _(y, {
+      default: E(() => [
+        v($, {
           "data-testid": "status-evento",
           aparencia: "preenchido",
           status: e.evento.status,
@@ -901,40 +947,40 @@ function Mt(e, t, s, o, n, d) {
     })
   ]);
 }
-const wt = /* @__PURE__ */ v(jt, [["render", Mt]]), Nt = m({
+const ee = /* @__PURE__ */ f(Ka, [["render", Xa]]), Za = m({
   name: "AreaSalvamento",
-  components: { Botao: O },
+  components: { Botao: H },
   emits: {
     salvarClick: (e) => !0,
     cancelarClick: (e) => !0
   },
-  setup(e, { emit: t }) {
+  setup(e, { emit: a }) {
     return {
-      emitirSalvarClick: (n) => {
-        t("salvarClick", n);
+      emitirSalvarClick: (t) => {
+        a("salvarClick", t);
       },
-      emitirCancelarClick: (n) => {
-        t("cancelarClick", n);
+      emitirCancelarClick: (t) => {
+        a("cancelarClick", t);
       }
     };
   }
 });
-const Vt = {
+const xa = {
   class: "area-salvamento",
   "data-testid": "area-salvamento"
 };
-function Ft(e, t, s, o, n, d) {
-  const r = l("Botao");
-  return a(), i("section", Vt, [
-    B(e.$slots, "default", {}, void 0, !0),
-    _(r, {
+function et(e, a, o, s, t, r) {
+  const n = p("Botao");
+  return i(), c("section", xa, [
+    I(e.$slots, "default", {}, void 0, !0),
+    v(n, {
       "data-testid": "botao-salvar",
       aparencia: "preenchido",
       titulo: "Salvar",
       tamanho: "grande",
       onClick: e.emitirSalvarClick
     }, null, 8, ["onClick"]),
-    _(r, {
+    v(n, {
       "data-testid": "botao-cancelar",
       aparencia: "vazio",
       titulo: "Cancelar",
@@ -943,61 +989,61 @@ function Ft(e, t, s, o, n, d) {
     }, null, 8, ["onClick"])
   ]);
 }
-const Lt = /* @__PURE__ */ v(Nt, [["render", Ft], ["__scopeId", "data-v-bffa6dc0"]]), Jt = m({
+const at = /* @__PURE__ */ f(Za, [["render", et], ["__scopeId", "data-v-bffa6dc0"]]), tt = m({
   props: {
     salvarVisivel: {
       type: Boolean
     }
   },
-  components: { AreaSalvamento: Lt },
+  components: { AreaSalvamento: at },
   emits: {
     salvarClick: (e) => !0,
     cancelarClick: (e) => !0
   },
-  setup(e, { emit: t }) {
+  setup(e, { emit: a }) {
     return {
-      emitirSalvarClick: (n) => {
-        t("salvarClick", n);
+      emitirSalvarClick: (t) => {
+        a("salvarClick", t);
       },
-      emitirCancelarClick: (n) => {
-        t("cancelarClick", n);
+      emitirCancelarClick: (t) => {
+        a("cancelarClick", t);
       }
     };
   }
 });
-const Yt = {
+const ot = {
   class: "editar-evento",
   "data-testid": "editar-evento"
-}, Gt = { class: "area-conteudo" }, Kt = { class: "salvar" };
-function Qt(e, t, s, o, n, d) {
-  const r = l("AreaSalvamento");
-  return a(), i("div", Yt, [
-    _(z, {
+}, nt = { class: "area-conteudo" }, it = { class: "salvar" };
+function st(e, a, o, s, t, r) {
+  const n = p("AreaSalvamento");
+  return i(), c("div", ot, [
+    v(q, {
       name: "fadeTopo",
       mode: "out-in",
       appear: ""
     }, {
-      default: D(() => [
-        u("div", Gt, [
-          B(e.$slots, "conteudo")
+      default: E(() => [
+        u("div", nt, [
+          I(e.$slots, "conteudo")
         ])
       ]),
       _: 3
     }),
-    _(z, {
+    v(q, {
       name: "fadeBaixo",
       mode: "out-in",
       appear: ""
     }, {
-      default: D(() => [
-        u("div", Kt, [
-          _(r, {
+      default: E(() => [
+        u("div", it, [
+          v(n, {
             "data-testid": "area-salvamento",
             onCancelarClick: e.emitirCancelarClick,
             onSalvarClick: e.emitirSalvarClick
           }, {
-            default: D(() => [
-              B(e.$slots, "salvamento")
+            default: E(() => [
+              I(e.$slots, "salvamento")
             ]),
             _: 3
           }, 8, ["onCancelarClick", "onSalvarClick"])
@@ -1007,31 +1053,292 @@ function Qt(e, t, s, o, n, d) {
     })
   ]);
 }
-const Ut = /* @__PURE__ */ v(Jt, [["render", Qt]]), Wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const F = /* @__PURE__ */ f(tt, [["render", st]]), rt = m({
+  props: {
+    salvarVisivel: {
+      type: Boolean
+    },
+    evento: {
+      required: !0,
+      type: Object
+    }
+  },
+  components: { EditarEvento: F, IconeStatus: N, BotaoStatus: x },
+  emits: {
+    salvarClick: (e, a) => !0,
+    cancelarClick: (e) => !0
+  },
+  setup(e, { emit: a }) {
+    const o = (l, $) => {
+      a("salvarClick", l, $);
+    }, s = (l) => {
+      a("cancelarClick", l);
+    }, t = M(e.evento.status);
+    function r(l) {
+      t.value = l;
+    }
+    const n = A(() => (l) => t.value === l ? "preenchido" : "outline");
+    return {
+      aoSalvar: o,
+      aoCancelar: s,
+      atualizarSelecionado: r,
+      selecionado: t,
+      getAparencia: n
+    };
+  }
+});
+const lt = /* @__PURE__ */ u("h2", null, "Alterar o Status para:", -1), ct = {
+  key: 0,
+  class: "nova-data"
+}, dt = /* @__PURE__ */ u("h2", null, "Nova Data:", -1), ut = /* @__PURE__ */ u("p", null, "componente de seleção de data deve entrar aqui.", -1), pt = [
+  dt,
+  ut
+];
+function vt(e, a, o, s, t, r) {
+  const n = p("BotaoStatus"), l = p("EditarEvento");
+  return i(), b(l, {
+    "data-testid": "editar-status",
+    salvarVisivel: e.salvarVisivel,
+    onCancelarClick: e.aoCancelar,
+    onSalvarClick: a[3] || (a[3] = ($) => e.aoSalvar(e.selecionado, $))
+  }, {
+    conteudo: E(() => [
+      lt,
+      v(n, {
+        aparencia: e.getAparencia("realizado"),
+        onClick: a[0] || (a[0] = ($) => e.atualizarSelecionado("realizado")),
+        status: "realizado",
+        "data-testid": "botao-status-realizado"
+      }, null, 8, ["aparencia"]),
+      v(n, {
+        aparencia: e.getAparencia("cancelado"),
+        onClick: a[1] || (a[1] = ($) => e.atualizarSelecionado("cancelado")),
+        status: "cancelado",
+        "data-testid": "botao-status-cancelado"
+      }, null, 8, ["aparencia"]),
+      v(n, {
+        aparencia: e.getAparencia("adiado"),
+        onClick: a[2] || (a[2] = ($) => e.atualizarSelecionado("adiado")),
+        status: "adiado",
+        "data-testid": "botao-status-adiado"
+      }, null, 8, ["aparencia"])
+    ]),
+    salvamento: E(() => [
+      v(q, {
+        name: "fadeBaixo",
+        mode: "out-in",
+        appear: ""
+      }, {
+        default: E(() => [
+          e.selecionado === "adiado" ? (i(), c("div", ct, pt)) : y("", !0)
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  }, 8, ["salvarVisivel", "onCancelarClick"]);
+}
+const _t = /* @__PURE__ */ f(rt, [["render", vt]]), mt = m({
+  props: {
+    salvarVisivel: {
+      type: Boolean
+    },
+    observacao: {
+      type: String
+    }
+  },
+  components: { EditarEvento: F },
+  emits: {
+    adicionarClick: (e, a) => !0,
+    cancelarClick: (e) => !0
+  },
+  setup(e, { emit: a }) {
+    const o = M({
+      observacaoLocal: e.observacao || ""
+    });
+    return { salvar: (r) => {
+      const n = o.value.observacaoLocal;
+      a("adicionarClick", n, r);
+    }, cancelar: (r) => {
+      a("cancelarClick", r);
+    }, state: o };
+  }
+});
+const ft = /* @__PURE__ */ u("h2", null, "Observação:", -1);
+function $t(e, a, o, s, t, r) {
+  const n = p("EditarEvento");
+  return i(), b(n, {
+    "data-testid": "adicionar-observacao",
+    salvarVisivel: e.salvarVisivel,
+    observacao: e.state.observacaoLocal,
+    "onUpdate:observacao": a[1] || (a[1] = (l) => e.state.observacaoLocal = l),
+    onSalvarClick: e.salvar,
+    onCancelarClick: e.cancelar
+  }, {
+    conteudo: E(() => [
+      ft,
+      te(u("textarea", {
+        "data-testid": "observacao-textarea",
+        "onUpdate:modelValue": a[0] || (a[0] = (l) => e.state.observacaoLocal = l),
+        placeholder: ""
+      }, null, 512), [
+        [oe, e.state.observacaoLocal]
+      ])
+    ]),
+    _: 1
+  }, 8, ["salvarVisivel", "observacao", "onSalvarClick", "onCancelarClick"]);
+}
+const ht = /* @__PURE__ */ f(mt, [["render", $t]]), Ct = m({
+  props: {
+    perfil: {
+      required: !0,
+      type: Object
+    },
+    eventos: {
+      required: !0,
+      type: Array
+    }
+  },
+  components: { Topo: ua, Evento: ee, Timeline: X, EditarStatus: _t, AdicionarObservacao: ht },
+  emits: {
+    eventoTimelineClicked: (e, a) => !0,
+    eventoStatusEditClicked: (e, a) => !0,
+    eventoDetalhadoObservacoesAddClicked: (e, a) => !0,
+    editarStatusSalvarClicked: (e, a, o) => !0,
+    editarStatusCancelarClicked: (e, a) => !0,
+    adicionarObservacaoSalvarClicked: (e, a, o) => !0,
+    adicionarObservacaoCancelarClicked: (e, a) => !0,
+    voltarClick: (e) => !0
+  },
+  setup(e, { emit: a }) {
+    const o = B(e, "eventos"), s = B(null), t = T({
+      topo: { exibir: !0 },
+      timeline: { exibir: !0 },
+      evento: { exibir: !1 },
+      editarStatus: { exibir: !1 },
+      adicionarObservacao: { exibir: !1 },
+      dados: {
+        eventos: B(e, "eventos"),
+        perfil: B(e, "perfil"),
+        eventosTimeline: o,
+        eventosDetalhados: o,
+        eventoAtual: s
+      }
+    }), r = (d) => "observacoes" in d, n = (d) => {
+      const S = ["Timeline", "Evento"];
+      t.topo.exibir = S.includes(d), t.timeline.exibir = d === "Timeline", t.evento.exibir = d === "Evento", t.editarStatus.exibir = d === "EditarStatus", t.adicionarObservacao.exibir = d === "AdicionarObservacao";
+    };
+    return {
+      selecionarEvento: (d, S) => {
+        r(d) && (a("eventoTimelineClicked", d, S), t.dados.eventoAtual = d, n("Evento"));
+      },
+      handleVoltarTela: (d) => {
+        t.dados.eventoAtual ? n("Timeline") : a("voltarClick", d);
+      },
+      handleStatusEditarClick: (d) => {
+        n("EditarStatus");
+      },
+      handleStatusCancelarClick: (d) => {
+        t.dados.eventoAtual && (n("Evento"), a("editarStatusCancelarClicked", t.dados.eventoAtual, d));
+      },
+      handleStatusSalvarClick: (d, S) => {
+        t.dados.eventoAtual && (n("Evento"), a("editarStatusSalvarClicked", t.dados.eventoAtual, d, S));
+      },
+      handleObservacaoAdicionarClick: (d) => {
+        t.dados.eventoAtual && (a(
+          "eventoDetalhadoObservacoesAddClicked",
+          t.dados.eventoAtual,
+          d
+        ), n("AdicionarObservacao"));
+      },
+      handleAdicionarObservacaoSalvarClick: (d, S) => {
+        t.dados.eventoAtual && (n("Evento"), a(
+          "adicionarObservacaoSalvarClicked",
+          t.dados.eventoAtual,
+          d,
+          S
+        ));
+      },
+      handleObservacaoAdicionarCancelarClick: (d) => {
+        t.dados.eventoAtual && (n("Evento"), a("adicionarObservacaoCancelarClicked", t.dados.eventoAtual, d));
+      },
+      TemplateTimeline: t
+    };
+  }
+});
+const kt = {
+  class: "pagina",
+  "data-testid": "template-timeline"
+};
+function bt(e, a, o, s, t, r) {
+  const n = p("Topo"), l = p("Timeline"), $ = p("Evento"), C = p("EditarStatus"), D = p("AdicionarObservacao");
+  return i(), c("div", kt, [
+    e.TemplateTimeline.topo.exibir ? (i(), b(n, {
+      key: 0,
+      titulo: e.TemplateTimeline.dados.perfil.nome,
+      escuro: !1,
+      onVoltarClick: e.handleVoltarTela
+    }, null, 8, ["titulo", "onVoltarClick"])) : y("", !0),
+    e.TemplateTimeline.timeline.exibir ? (i(), b(l, {
+      key: 1,
+      "data-testid": "timeline",
+      perfilTimeline: e.TemplateTimeline.dados.perfil,
+      eventosTimeline: e.TemplateTimeline.dados.eventosTimeline,
+      onEventoClick: e.selecionarEvento
+    }, null, 8, ["perfilTimeline", "eventosTimeline", "onEventoClick"])) : y("", !0),
+    e.TemplateTimeline.dados.eventoAtual && e.TemplateTimeline.evento.exibir ? (i(), b($, {
+      key: 2,
+      "data-testid": "evento-detalhado",
+      perfil: e.TemplateTimeline.dados.perfil,
+      evento: e.TemplateTimeline.dados.eventoAtual,
+      onObservacaoAdicionarClick: e.handleObservacaoAdicionarClick,
+      onStatusEditarClick: e.handleStatusEditarClick
+    }, null, 8, ["perfil", "evento", "onObservacaoAdicionarClick", "onStatusEditarClick"])) : y("", !0),
+    e.TemplateTimeline.dados.eventoAtual && e.TemplateTimeline.editarStatus.exibir ? (i(), b(C, {
+      key: 3,
+      "data-testid": "editar-status",
+      salvarVisivel: e.TemplateTimeline.editarStatus.exibir,
+      perfil: e.TemplateTimeline.dados.perfil,
+      evento: e.TemplateTimeline.dados.eventoAtual,
+      onSalvarClick: e.handleStatusSalvarClick,
+      onCancelarClick: e.handleStatusCancelarClick
+    }, null, 8, ["salvarVisivel", "perfil", "evento", "onSalvarClick", "onCancelarClick"])) : y("", !0),
+    e.TemplateTimeline.adicionarObservacao.exibir ? (i(), b(D, {
+      key: 4,
+      "data-testid": "adicionar-observacao",
+      salvarVisivel: e.TemplateTimeline.adicionarObservacao.exibir,
+      onAdicionarClick: e.handleAdicionarObservacaoSalvarClick,
+      onCancelarClick: e.handleObservacaoAdicionarCancelarClick
+    }, null, 8, ["salvarVisivel", "onAdicionarClick", "onCancelarClick"])) : y("", !0)
+  ]);
+}
+const yt = /* @__PURE__ */ f(Ct, [["render", bt]]), gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
-}, Symbol.toStringTag, { value: "Module" })), Xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Symbol.toStringTag, { value: "Module" })), St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
-}, Symbol.toStringTag, { value: "Module" })), N = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Symbol.toStringTag, { value: "Module" })), J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  EditarEvento: Ut,
-  EventoDetalhado: wt,
-  EventoTimeline: G,
-  Timeline: Xe,
-  Tipos: Wt,
-  TiposDetalhado: Xt
+  EditarEvento: F,
+  EventoDetalhado: ee,
+  EventoTimeline: Q,
+  TemplateTimeline: yt,
+  Timeline: X,
+  Tipos: gt,
+  TiposDetalhado: St
 }, Symbol.toStringTag, { value: "Module" }));
-const xt = {
-  install(e, ...t) {
-    for (const s in N)
-      e.component(s, N[s]);
+const Tt = {
+  install(e, ...a) {
+    for (const o in J)
+      e.component(o, J[o]);
   }
 };
 export {
-  Ut as EditarEvento,
-  wt as EventoDetalhado,
-  G as EventoTimeline,
-  Xe as Timeline,
-  Wt as Tipos,
-  Xt as TiposDetalhado,
-  xt as default
+  F as EditarEvento,
+  ee as EventoDetalhado,
+  Q as EventoTimeline,
+  yt as TemplateTimeline,
+  X as Timeline,
+  gt as Tipos,
+  St as TiposDetalhado,
+  Tt as default
 };