@trismegisto/spine 3.3.2 → 3.3.3

package/fesm2022/trismegisto-spine-layout-suggestions-page.component-xI2gDMok.mjs

@@ -0,0 +1,532 @@
+import * as i0 from '@angular/core';
+import { inject, viewChild, computed, signal, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { ViewService } from '@orfeu/angular/core';
+import { HermesToastService, AccountAvatarComponent, AlertComponent, ButtonComponent, DrawerComponent, EmptyComponent, FilterBarComponent, IconComponent, MenuButtonComponent, PaginatorComponent, RichTextComponent, SearchFieldComponent, SegmentedControlComponent, TabComponent, TabsComponent, TagComponent } from '@trismegisto/angular';
+import { pluralMessage, formatMessage } from '@trismegisto/primitives';
+import { SPINE_MESSAGES, SpinePreferencesService, SpineUserStorage, spineRoutesOf } from '@trismegisto/spine';
+import { S as SpineSuggestionsService, a as SpineInboxService, b as SpineSuggestionChatComponent, c as SPINE_SUGGESTION_STATUS_COLORS, d as SPINE_SUGGESTION_KIND_COLORS, e as SPINE_SUGGESTION_KIND_ICONS, f as SPINE_SUGGESTION_WAITING_COLORS, N as NEW_SCREEN_VALUE, g as SPINE_SUGGESTION_VISIBLE_SORTS, s as suggestionScreens, h as SPINE_SUGGESTION_REASONS, i as SPINE_SUGGESTION_STATUSES, j as SPINE_SUGGESTION_KINDS, k as SPINE_SUGGESTION_WAITING, l as SPINE_TAB, m as SPINE_SUGGESTION_PAGE_PARAM, n as SPINE_SUGGESTION_TAB_PARAM, o as SPINE_SUGGESTION_TAB_CONVERSATION, p as screenName, q as screenModule, r as SPINE_SUGGESTIONS_PAGE_PATH, t as SpineSuggestionsDialogComponent, u as SpineTagRowComponent } from './trismegisto-spine-layout-trismegisto-spine-layout-Clphrsgc.mjs';
+
+const PAGE = 20;
+/** O recorte "Precisam da sua resposta" no seletor (não é um motivo: é a vez de quem pede). */
+const NEEDS_YOU = 'precisam-de-voce';
+const MESSAGES_PAGE = 20;
+const CLOSED = ['concluida', 'recusada'];
+/** Intervalos do "há 3 dias" (segundos por unidade), do maior para o menor. */
+const AGES = [
+    ['year', 31_536_000], ['month', 2_592_000], ['week', 604_800], ['day', 86_400], ['hour', 3_600], ['minute', 60],
+];
+/**
+ * A página "Sugestões do app" de quem pede (página do próprio spine, em `/sugestoes` — ver `provideSpineSuggestionsPage`).
+ *
+ * - **O que aparece** é o que o servidor deixa a pessoa ver: as dela, as agrupadas (um pedido dela virou outro), as em
+ *   que ela está envolvida (mesmo de outro grupo) e as pedidas por alguém do grupo dela. Um grupo não vê o do outro,
+ *   a não ser por agrupamento. Cada item diz POR QUE aparece (os filtros rápidos no topo, com as contagens do servidor).
+ * - **Filtros**: busca (título, descrição, tela, "SUG-12"), o recorte (`hm-segmented-control`: Todas, os motivos e
+ *   "Precisam da sua resposta"), e no `hm-filter-bar` status, tipo, tela (as do menu e "Nova tela") e com quem está a
+ *   vez; mais a ordem. Tudo no servidor, paginado.
+ * - Apoiar direto no cartão, sem abrir a gaveta (a própria só mostra a contagem).
+ * - **Gaveta** (`hm-drawer`): clicar abre a sugestão em **Detalhes** (descrição, tela, quem pediu, os grupos em selos,
+ *   os responsáveis), com a aba **Conversa** ao lado (o chat: o que a equipe escreveu de público e o que quem pede
+ *   respondeu; quem pediu e os envolvidos escrevem, a vez passa para os responsáveis; quem só é do grupo não tem a aba).
+ *   O apoio fica no topo, fora das abas. Abrir a Conversa marca como lida.
+ * - "Sugerir melhoria" abre o mesmo modal da barra (sem tela escolhida); a nova entra na lista e abre no painel.
+ * - "?sugestao=SUG-12" abre direto na sugestão (o link do aviso de envio).
+ */
+class SpineSuggestionsPageComponent {
+    constructor() {
+        this.messages = inject(SPINE_MESSAGES);
+        this.text = this.messages.suggestions;
+        this.page = this.text.page;
+        this.service = inject(SpineSuggestionsService);
+        this.inbox = inject(SpineInboxService);
+        this.toast = inject(HermesToastService);
+        this.preferences = inject(SpinePreferencesService);
+        this.userStorage = inject(SpineUserStorage, { optional: true });
+        this.views = inject(ViewService, { optional: true });
+        this.router = inject(Router, { optional: true });
+        this.chat = viewChild(SpineSuggestionChatComponent, ...(ngDevMode ? [{ debugName: "chat" }] : /* istanbul ignore next */ []));
+        this.statusColors = SPINE_SUGGESTION_STATUS_COLORS;
+        this.kindColors = SPINE_SUGGESTION_KIND_COLORS;
+        this.kindIcons = SPINE_SUGGESTION_KIND_ICONS;
+        /** O "⋯" de cada cartão: copiar o link (abre a página já na sugestão) e a chave. */
+        this.itemMenu = [
+            { id: 'copy-link', label: this.text.menuCopyLink, icon: 'link' },
+            { id: 'copy-key', label: this.text.menuCopyKey, icon: 'copy' },
+        ];
+        this.waitingColors = SPINE_SUGGESTION_WAITING_COLORS;
+        this.newScreenValue = NEW_SCREEN_VALUE;
+        this.sortOptions = SPINE_SUGGESTION_VISIBLE_SORTS.map((s) => ({ value: s, label: this.page.sorts[s] }));
+        /** As telas do menu (o filtro de tela), da árvore que a pessoa já recebe. */
+        this.screens = suggestionScreens(spineRoutesOf(this.views?.currentView));
+        this.me = computed(() => this.userStorage?.userId() ?? '', ...(ngDevMode ? [{ debugName: "me" }] : /* istanbul ignore next */ []));
+        // --- filtros ---
+        this.search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        this.reason = signal('', ...(ngDevMode ? [{ debugName: "reason" }] : /* istanbul ignore next */ []));
+        this.status = signal('', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        this.kind = signal('', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        /** Uma rota, `NEW_SCREEN_VALUE` ou ''. */
+        this.screen = signal('', ...(ngDevMode ? [{ debugName: "screen" }] : /* istanbul ignore next */ []));
+        this.waiting = signal('', ...(ngDevMode ? [{ debugName: "waiting" }] : /* istanbul ignore next */ []));
+        this.sort = signal('activity', ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+        this.filtered = computed(() => !!(this.search().trim() || this.reason() || this.status() || this.kind()
+            || this.screen() || this.waiting()), ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+        /** O recorte no seletor: um motivo, "Precisam da sua resposta" (a vez de quem pede, sem motivo) ou '' (Todas). */
+        this.scope = computed(() => this.reason() || (this.waiting() === 'solicitante' ? NEEDS_YOU : ''), ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
+        /** As opções do recorte com a contagem ("Minhas · 2"); motivo sem nenhuma sugestão fica de fora (a não ser o escolhido). */
+        this.scopeOptions = computed(() => {
+            const counted = (label, count) => (count === null || count === undefined ? label : `${label} · ${count}`);
+            const counts = this.counts();
+            const options = [{ value: '', label: counted(this.page.allReasons, this.allTotal()) }];
+            for (const r of SPINE_SUGGESTION_REASONS) {
+                if (counts?.[r] !== 0 || this.reason() === r)
+                    options.push({ value: r, label: counted(this.page.reasons[r], counts?.[r]) });
+            }
+            if (counts?.waiting_me || this.scope() === NEEDS_YOU) {
+                options.push({ value: NEEDS_YOU, label: counted(this.page.needsYou, counts?.waiting_me), icon: 'chat-bubble' });
+            }
+            return options;
+        }, ...(ngDevMode ? [{ debugName: "scopeOptions" }] : /* istanbul ignore next */ []));
+        /** Os campos do `hm-filter-bar` (o servidor filtra): status, tipo, tela (as do menu e "Nova tela") e com quem está a vez. */
+        this.filterFields = computed(() => [
+            { key: 'status', label: this.text.statusFilter, type: 'select', options: SPINE_SUGGESTION_STATUSES.map((v) => ({ value: v, label: this.text.statuses[v] })) },
+            { key: 'kind', label: this.text.kindFilter, type: 'select', options: SPINE_SUGGESTION_KINDS.map((v) => ({ value: v, label: this.text.kinds[v] })) },
+            {
+                key: 'screen', label: this.text.screenFilter, type: 'select',
+                options: [...this.screens.map((sc) => ({ value: sc.path, label: sc.label })), { value: NEW_SCREEN_VALUE, label: this.text.newScreenTag }],
+            },
+            { key: 'waiting', label: this.text.waitingFilter, type: 'select', options: SPINE_SUGGESTION_WAITING.map((v) => ({ value: v, label: this.text.waiting[v] })) },
+        ], ...(ngDevMode ? [{ debugName: "filterFields" }] : /* istanbul ignore next */ []));
+        this.filterValue = computed(() => {
+            const value = {};
+            for (const key of ['status', 'kind', 'screen', 'waiting'])
+                if (this[key]())
+                    value[key] = this[key]();
+            return value;
+        }, ...(ngDevMode ? [{ debugName: "filterValue" }] : /* istanbul ignore next */ []));
+        // --- lista ---
+        this.list = signal([], ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+        this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        this.counts = signal(null, ...(ngDevMode ? [{ debugName: "counts" }] : /* istanbul ignore next */ []));
+        this.pagination = signal({ page: 1, size: PAGE }, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.request = 0;
+        this.countText = computed(() => pluralMessage(this.page.count, this.total(), this.messages.meta.locale), ...(ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []));
+        /** "Todas": o total da última consulta sem motivo escolhido (null antes dela). */
+        this.allTotal = signal(null, ...(ngDevMode ? [{ debugName: "allTotal" }] : /* istanbul ignore next */ []));
+        /** O título do cabeçalho: o recorte escolhido ("Todas as sugestões", "Minhas"...). */
+        this.heading = computed(() => {
+            const r = this.reason();
+            if (this.waiting() === 'solicitante' && !r)
+                return this.page.needsYou;
+            return r ? this.page.reasons[r] : this.page.allTitle;
+        }, ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+        /** "1 em desenvolvimento · 1 planejada": quantas em cada status, do que está na tela. */
+        this.statusParts = computed(() => {
+            const locale = this.messages.meta.locale;
+            return SPINE_SUGGESTION_STATUSES.map((status) => ({ status, count: this.list().filter((x) => x.status === status).length }))
+                .filter((p) => p.count)
+                .map((p) => ({ status: p.status, text: formatMessage(this.page.statusPart, { count: p.count, status: this.text.statuses[p.status].toLocaleLowerCase(locale) }) }));
+        }, ...(ngDevMode ? [{ debugName: "statusParts" }] : /* istanbul ignore next */ []));
+        // --- gaveta ---
+        this.selected = signal(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        /** A gaveta abre em Detalhes; a conversa é lida (e marcada como lida) quando a pessoa vai até ela. */
+        this.tab = signal('details', ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
+        this.drawerHeading = computed(() => {
+            const s = this.selected();
+            return s ? `${s.key} · ${s.title}` : this.page.details;
+        }, ...(ngDevMode ? [{ debugName: "drawerHeading" }] : /* istanbul ignore next */ []));
+        this.detailLoading = signal(false, ...(ngDevMode ? [{ debugName: "detailLoading" }] : /* istanbul ignore next */ []));
+        this.detailError = signal('', ...(ngDevMode ? [{ debugName: "detailError" }] : /* istanbul ignore next */ []));
+        this.conversation = signal(null, ...(ngDevMode ? [{ debugName: "conversation" }] : /* istanbul ignore next */ []));
+        this.reply = signal('', ...(ngDevMode ? [{ debugName: "reply" }] : /* istanbul ignore next */ []));
+        /** A conversa no formato do chat (do mais antigo ao mais novo). */
+        this.chatItems = computed(() => (this.conversation()?.messages ?? []).map((m) => ({
+            id: m.id, text: m.comment, created_at: m.created_at, author: m.author, from_requester: !!m.from_requester, status: m.status,
+        })), ...(ngDevMode ? [{ debugName: "chatItems" }] : /* istanbul ignore next */ []));
+        this.sending = signal(false, ...(ngDevMode ? [{ debugName: "sending" }] : /* istanbul ignore next */ []));
+        /** As sugestões com o apoio indo para o servidor (cada uma trava só o próprio botão). */
+        this.voting = signal(new Set(), ...(ngDevMode ? [{ debugName: "voting" }] : /* istanbul ignore next */ []));
+        this.panelOpen = computed(() => !!this.selected() || this.detailLoading() || !!this.detailError(), ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+        /** A vez é de quem pede e a pessoa pode responder: o destaque no topo do painel. */
+        this.waitingOnMe = computed(() => {
+            const s = this.selected();
+            return !!s && s.can_comment && s.waiting_on === 'solicitante' && !CLOSED.includes(s.status);
+        }, ...(ngDevMode ? [{ debugName: "waitingOnMe" }] : /* istanbul ignore next */ []));
+        this.dialog = signal(null, ...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
+        void this.load(1);
+        const tab = inject(SPINE_TAB, { optional: true });
+        if (!tab) {
+            const params = this.router?.parseUrl(this.router.url).queryParams ?? {};
+            const key = params[SPINE_SUGGESTION_PAGE_PARAM];
+            if (typeof key === 'string' && key)
+                void this.openByKey(key, params[SPINE_SUGGESTION_TAB_PARAM] === SPINE_SUGGESTION_TAB_CONVERSATION);
+            return;
+        }
+        // No workspace, a página fica viva na aba: "?sugestao=SUG-12" (um link, a central de notificações) pode chegar com
+        // ela já aberta. Abre a gaveta e tira o parâmetro da aba, para o mesmo link funcionar de novo.
+        effect(() => {
+            const params = tab.params();
+            const key = params[SPINE_SUGGESTION_PAGE_PARAM];
+            if (!key)
+                return;
+            const conversation = params[SPINE_SUGGESTION_TAB_PARAM] === SPINE_SUGGESTION_TAB_CONVERSATION;
+            untracked(() => {
+                void this.openByKey(key, conversation);
+                tab.navigate({ queryParams: { [SPINE_SUGGESTION_PAGE_PARAM]: null, [SPINE_SUGGESTION_TAB_PARAM]: null } });
+            });
+        });
+    }
+    // --- filtros ---
+    onSearch(term) {
+        this.search.set(term);
+        void this.load(1);
+    }
+    /**
+     * O recorte: um motivo, "Precisam da sua resposta" (a vez de quem pede, sem motivo) ou Todas. Sair de "Precisam da
+     * sua resposta" tira o "Aguardando solicitante" que ele tinha posto.
+     */
+    pickScope(value) {
+        if (value === this.scope())
+            return;
+        const leavingNeedsYou = this.scope() === NEEDS_YOU;
+        if (value === NEEDS_YOU) {
+            this.reason.set('');
+            this.waiting.set('solicitante');
+        }
+        else {
+            this.reason.set(value);
+            if (leavingNeedsYou)
+                this.waiting.set('');
+        }
+        void this.load(1);
+    }
+    /** O `hm-filter-bar` aplicou, limpou um campo ou limpou tudo. */
+    onFilters(value) {
+        const read = (key) => (typeof value[key] === 'string' ? value[key] : '');
+        this.status.set(read('status'));
+        this.kind.set(read('kind'));
+        this.screen.set(read('screen'));
+        this.waiting.set(read('waiting'));
+        void this.load(1);
+    }
+    pickTab(tab) {
+        const s = this.selected();
+        const conversation = tab === 'conversation' && !!s?.can_comment;
+        this.tab.set(conversation ? 'conversation' : 'details');
+        if (conversation && this.conversation()?.id !== s.id)
+            void this.loadConversation(s.id, true);
+    }
+    onSort(sort) {
+        if (sort === this.sort())
+            return;
+        this.sort.set(sort);
+        void this.load(1);
+    }
+    onPage(state) {
+        this.pagination.set({ page: state.page, size: state.size });
+        void this.load(state.page);
+    }
+    async load(page) {
+        const request = ++this.request;
+        const size = this.pagination().size;
+        this.loading.set(true);
+        this.error.set('');
+        const screen = this.screen();
+        try {
+            const res = await this.service.visible({
+                limit: size, offset: (page - 1) * size,
+                reason: this.reason(),
+                status: this.status(),
+                kind: this.kind(),
+                waiting: this.waiting(),
+                screen: screen && screen !== NEW_SCREEN_VALUE ? screen : undefined,
+                newScreen: screen === NEW_SCREEN_VALUE,
+                q: this.search(),
+                sort: this.sort(),
+            });
+            if (request !== this.request)
+                return;
+            this.list.set(res.suggestions);
+            this.total.set(res.total);
+            if (!this.reason())
+                this.allTotal.set(res.total);
+            if (res.counts)
+                this.counts.set(res.counts);
+            this.pagination.set({ page, size });
+        }
+        catch {
+            if (request === this.request)
+                this.error.set(this.page.error);
+        }
+        finally {
+            if (request === this.request)
+                this.loading.set(false);
+        }
+    }
+    // --- painel ---
+    open(s) {
+        if (this.selected()?.id === s.id)
+            return;
+        this.selected.set(s);
+        // Abre em Detalhes; a conversa vem ao abrir a aba (quem só vê pelo grupo nem tem a aba: o servidor recusa).
+        this.tab.set('details');
+        this.detailError.set('');
+        this.reply.set('');
+        this.conversation.set(null);
+        void this.refreshSelected(s.id);
+    }
+    /** Abre pela chave (link): `conversation` = já na aba Conversa. */
+    async openByKey(key, conversation = false) {
+        this.detailLoading.set(true);
+        try {
+            const s = await this.service.lookup(key);
+            this.detailLoading.set(false);
+            this.open(s);
+            if (conversation)
+                this.pickTab('conversation');
+        }
+        catch {
+            this.detailLoading.set(false);
+            this.detailError.set(this.page.notFound);
+        }
+    }
+    close() {
+        this.selected.set(null);
+        this.conversation.set(null);
+        this.detailError.set('');
+    }
+    /** Relê a sugestão aberta (status, a vez e os apoios mudam do outro lado) e a deixa igual na lista. */
+    async refreshSelected(id) {
+        try {
+            const fresh = await this.service.get(id);
+            if (this.selected()?.id !== id)
+                return;
+            this.selected.set(fresh);
+            this.patch(id, fresh);
+        }
+        catch {
+            /* fica o que veio da lista */
+        }
+    }
+    patch(id, change) {
+        this.list.update((list) => list.map((x) => (x.id === id ? { ...x, ...change } : x)));
+        const current = this.selected();
+        if (current?.id === id)
+            this.selected.set({ ...current, ...change });
+    }
+    loadOlder() {
+        const c = this.conversation();
+        if (c && !c.loading && c.messages.length < c.total)
+            void this.loadConversation(c.id, false);
+    }
+    async loadConversation(id, reset) {
+        const current = this.conversation();
+        const offset = reset || current?.id !== id ? 0 : current.messages.length;
+        this.conversation.set(reset || current?.id !== id
+            ? { id, messages: [], total: 0, loading: true, error: false }
+            : { ...current, loading: true, error: false });
+        try {
+            const res = await this.service.comments(id, { limit: MESSAGES_PAGE, offset });
+            const older = [...res.comments].reverse();
+            this.conversation.update((c) => (c?.id === id
+                ? { ...c, messages: reset ? older : [...older, ...c.messages], total: res.total, loading: false } : c));
+            if (reset)
+                this.markRead(id);
+        }
+        catch {
+            this.conversation.update((c) => (c?.id === id ? { ...c, loading: false, error: true } : c));
+        }
+    }
+    /**
+     * Abrir a conversa a marca como lida (o número some da lista na hora; falha não atrapalha a leitura). Vai sempre ao
+     * servidor: a central de notificações também conta a mudança de status, que o `unread` (só comentários) não vê.
+     */
+    markRead(id) {
+        const s = this.list().find((x) => x.id === id) ?? this.selected();
+        if (s?.unread) {
+            this.patch(id, { unread: 0 });
+            this.counts.update((c) => (c ? { ...c, unread: Math.max(0, c.unread - 1) } : c));
+        }
+        this.service.markRead(id).then(() => this.inbox.refresh(), () => undefined);
+    }
+    async send(text) {
+        const s = this.selected();
+        const comment = (text ?? this.reply()).trim();
+        if (!s || !comment || this.sending())
+            return;
+        this.sending.set(true);
+        try {
+            const message = await this.service.reply(s.id, comment);
+            this.reply.set('');
+            void this.inbox.refresh();
+            this.conversation.update((c) => (c?.id === s.id
+                ? { ...c, messages: [...c.messages, { ...message, from_requester: true }], total: c.total + 1 } : c));
+            const now = new Date().toISOString();
+            const wasWaitingOnMe = s.waiting_on === 'solicitante';
+            this.patch(s.id, {
+                comments_count: s.comments_count + 1,
+                last_comment: { comment, created_at: message.created_at ?? now },
+                ...(CLOSED.includes(s.status) ? {} : { waiting_on: 'responsaveis', waiting_since: now }),
+                last_activity_at: now,
+            });
+            if (wasWaitingOnMe)
+                this.counts.update((c) => (c ? { ...c, waiting_me: Math.max(0, c.waiting_me - 1) } : c));
+            this.chat()?.scrollToEnd();
+        }
+        catch {
+            this.toast.error(this.page.replyError);
+        }
+        finally {
+            this.sending.set(false);
+        }
+    }
+    /** Apoiar (quem não pediu): muda na hora e volta se o servidor falhar. */
+    isVoting(id) {
+        return this.voting().has(id);
+    }
+    /** Apoia ou tira o apoio (do cartão ou da gaveta): já na tela, e desfaz se o servidor recusar. */
+    async toggleSupport(s) {
+        if (s.mine || this.isVoting(s.id))
+            return;
+        const voted = !s.voted;
+        this.patch(s.id, { voted, votes: Math.max(0, s.votes + (voted ? 1 : -1)) });
+        this.voting.update((ids) => new Set(ids).add(s.id));
+        try {
+            if (voted)
+                await this.service.vote(s.id);
+            else
+                await this.service.unvote(s.id);
+        }
+        catch {
+            this.patch(s.id, { voted: s.voted, votes: s.votes });
+            this.toast.error(this.text.voteError);
+        }
+        finally {
+            this.voting.update((ids) => {
+                const next = new Set(ids);
+                next.delete(s.id);
+                return next;
+            });
+        }
+    }
+    suggest() {
+        this.dialog.set('new');
+    }
+    /** A nova entra no topo (relendo a lista) e abre no painel. */
+    async onCreated(created) {
+        await this.load(1);
+        const fresh = this.list().find((s) => s.id === created.id);
+        if (fresh)
+            this.open(fresh);
+        else if (created.key)
+            void this.openByKey(created.key);
+    }
+    // --- texto ---
+    reasonCount(r) {
+        return this.counts()?.[r] ?? null;
+    }
+    screenText(s) {
+        if (s.screen.new)
+            return s.screen.label || this.text.newScreenTag;
+        return s.screen.label || this.text.noScreen;
+    }
+    screenShort(s) {
+        return s.screen.new ? (s.screen.label || this.text.newScreenTag) : (screenName(s.screen.label) || this.text.noScreen);
+    }
+    /** O módulo da tela ("Vendas" de "Vendas › Pedidos"); vazio na nova, sem tela ou quando o módulo é a própria tela. */
+    screenModule(s) {
+        if (s.screen.new)
+            return '';
+        const module = screenModule(s.screen.label);
+        return module && module !== screenName(s.screen.label) ? module : '';
+    }
+    /** O trecho do cartão: a última mensagem pública (a conversa anda) ou, sem ela, a descrição. */
+    excerptOf(s) {
+        return (s.last_comment?.comment || s.description || '').replace(/\s+/g, ' ').trim();
+    }
+    commentsText(count) {
+        return pluralMessage(this.text.comments, count, this.messages.meta.locale);
+    }
+    menuLabel(s) {
+        return formatMessage(this.text.cardMenu, { key: s.key });
+    }
+    async onMenu(s, id) {
+        const value = id === 'copy-key' ? s.key : this.linkOf(s);
+        try {
+            await navigator.clipboard.writeText(value);
+            this.toast.success(id === 'copy-key' ? this.text.keyCopied : this.text.linkCopied);
+        }
+        catch {
+            this.toast.error(this.text.copyError);
+        }
+    }
+    /** O link que abre a página já na sugestão ("…/sugestoes?sugestao=SUG-12"), respeitando o `<base href>` do app. */
+    linkOf(s) {
+        const path = `${SPINE_SUGGESTIONS_PAGE_PATH.slice(1)}?${SPINE_SUGGESTION_PAGE_PARAM}=${encodeURIComponent(s.key)}`;
+        try {
+            return new URL(path, document.baseURI).toString();
+        }
+        catch {
+            return `/${path}`;
+        }
+    }
+    personName(p) {
+        return p?.name || p?.username || this.text.removedAuthor;
+    }
+    votesText(count) {
+        return pluralMessage(this.text.votes, count, this.messages.meta.locale);
+    }
+    unreadText(count) {
+        return pluralMessage(this.text.unread, count, this.messages.meta.locale);
+    }
+    supportText(s) {
+        if (s.mine)
+            return this.votesText(s.votes);
+        return formatMessage(s.voted ? this.text.supported : this.text.support, { count: s.votes });
+    }
+    mergedFromText(key, target) {
+        return formatMessage(this.text.mergedFrom, { key, target });
+    }
+    /** "há 3 dias", "ontem", "há 2 horas" (Intl.RelativeTimeFormat no idioma do catálogo). */
+    age(iso) {
+        if (!iso)
+            return '';
+        const seconds = Math.round((Date.now() - new Date(iso).getTime()) / 1000);
+        try {
+            const rtf = new Intl.RelativeTimeFormat(this.messages.meta.locale, { numeric: 'auto' });
+            for (const [unit, size] of AGES)
+                if (Math.abs(seconds) >= size)
+                    return rtf.format(-Math.floor(seconds / size), unit);
+            return rtf.format(0, 'minute');
+        }
+        catch {
+            return this.date(iso);
+        }
+    }
+    date(iso) {
+        try {
+            return new Intl.DateTimeFormat(this.messages.meta.locale, {
+                dateStyle: 'short', timeStyle: 'short', timeZone: this.preferences.effectiveTimeZone(),
+            }).format(new Date(iso));
+        }
+        catch {
+            return iso.slice(0, 16).replace('T', ' ');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineSuggestionsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SpineSuggestionsPageComponent, isStandalone: true, selector: "spine-suggestions-page", viewQueries: [{ propertyName: "chat", first: true, predicate: SpineSuggestionChatComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"ssp\" [attr.aria-label]=\"page.listLabel\">\n  <!-- Cabe\u00E7alho numa linha: o recorte, quantas (e quantas em cada status), a ordem e o \"Sugerir melhoria\". -->\n  <header class=\"ssp__head\">\n    <h2 class=\"ssp__heading\">{{ heading() }}</h2>\n    <span class=\"ssp__count\" aria-live=\"polite\">{{ countText() }}</span>\n    @for (part of statusParts(); track part.status) {\n      <span class=\"ssp__status-part\" [attr.data-status]=\"part.status\"><span class=\"ssp__dot\" aria-hidden=\"true\"></span>{{ part.text }}</span>\n    }\n    <span class=\"ssp__spacer\"></span>\n    <hm-segmented-control class=\"ssp__sort\" size=\"small\" [label]=\"text.sort\" [options]=\"sortOptions\" [value]=\"sort()\"\n                          (valueChange)=\"onSort($event)\" />\n    <hm-button size=\"small\" icon=\"plus\" (clicked)=\"suggest()\">{{ text.button }}</hm-button>\n  </header>\n\n  <!-- Busca e o recorte (por que a pessoa v\u00EA, com as contagens do servidor) na mesma linha. -->\n  <div class=\"ssp__bar\">\n    <hm-search-field class=\"ssp__search\" [label]=\"text.appSearch\" labelHidden [placeholder]=\"text.appSearch\"\n                     [landmark]=\"false\" [debounce]=\"300\" [value]=\"search()\" (search)=\"onSearch($event)\" />\n    <hm-segmented-control class=\"ssp__scope\" size=\"small\" emphasis=\"action\" [label]=\"page.reasonFilter\"\n                          [options]=\"scopeOptions()\" [value]=\"scope()\" (valueChange)=\"pickScope($event)\" />\n  </div>\n\n  <!-- Filtros do Trismegisto: um bot\u00E3o por campo e, aplicados, as fichas remov\u00EDveis com \"Limpar tudo\". -->\n  <hm-filter-bar class=\"ssp__filters\" [label]=\"page.filtersLabel\" [filters]=\"filterFields()\" [value]=\"filterValue()\"\n                 (valueChange)=\"onFilters($event)\" />\n\n  @if (error()) {\n    <hm-alert variant=\"error\">{{ error() }}</hm-alert>\n  } @else if (!loading() && list().length === 0) {\n    @if (filtered()) {\n      <hm-empty icon=\"filter\" [heading]=\"page.emptyFiltered\" />\n    } @else {\n      <hm-empty icon=\"lightbulb\" [heading]=\"page.empty\" [description]=\"page.emptyHint\" />\n    }\n  }\n\n  <ul class=\"ssp__list\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n    @for (s of list(); track s.id) {\n      <li class=\"ssp__item\" [class.ssp__item--open]=\"selected()?.id === s.id\" [class.ssp__item--unread]=\"s.unread > 0\">\n        <div class=\"ssp__item-meta\">\n          <span class=\"ssp__key\">{{ s.key }}</span>\n          <span class=\"ssp__status\" [attr.data-status]=\"s.status\"><span class=\"ssp__dot\" aria-hidden=\"true\"></span>{{ text.statuses[s.status] }}</span>\n          <span class=\"ssp__kind\" [attr.data-kind]=\"s.kind\"><hm-icon [shape]=\"kindIcons[s.kind]\" />{{ text.kinds[s.kind] }}</span>\n          @if (s.unread) { <span class=\"ssp__unread\">{{ unreadText(s.unread) }}</span> }\n          <span class=\"ssp__menu\">\n            <hm-menu-button size=\"small\" icon=\"ellipsis-vertical\" [showArrow]=\"false\" align=\"end\" [label]=\"menuLabel(s)\"\n                            [items]=\"itemMenu\" (chosen)=\"onMenu(s, $event)\" />\n          </span>\n        </div>\n        <!-- O t\u00EDtulo \u00E9 o bot\u00E3o que abre a sugest\u00E3o na gaveta. -->\n        <button type=\"button\" class=\"ssp__item-title\" aria-haspopup=\"dialog\" (click)=\"open(s)\">{{ s.title }}</button>\n        <div class=\"ssp__item-screen\">\n          <hm-icon [shape]=\"s.screen.new ? 'plus' : 'application'\" />\n          @if (screenModule(s); as module) {\n            <span class=\"ssp__screen-module\">{{ module }}</span><hm-icon class=\"ssp__screen-sep\" shape=\"angle-right\" />\n          }\n          <strong class=\"ssp__screen-name\">{{ screenShort(s) }}</strong>\n          @if (s.screen.new) { <span class=\"ssp__new-screen\">{{ text.newScreenTag }}</span> }\n          @if (s.waiting_on && s.status !== 'concluida' && s.status !== 'recusada') {\n            <hm-tag [name]=\"text.waiting[s.waiting_on]\" [color]=\"waitingColors[s.waiting_on]\" />\n          }\n        </div>\n        @if (excerptOf(s); as ex) {\n          <p class=\"ssp__excerpt\">{{ ex }}</p>\n        }\n        <div class=\"ssp__item-foot\">\n          <hm-account-avatar size=\"small\" [name]=\"personName(s.author)\" [imageUrl]=\"s.author?.picture\" />\n          <span class=\"ssp__byline\">\n            <span class=\"ssp__byline-name\">{{ personName(s.author) }}</span>\n            <time [attr.datetime]=\"s.last_activity_at || s.updated_at\">{{ age(s.last_activity_at || s.updated_at) }}</time>\n          </span>\n          <span class=\"ssp__counts\">\n            @if (s.can_comment) {\n              <span class=\"ssp__count-item\" [attr.title]=\"commentsText(s.comments_count)\">\n                <hm-icon shape=\"comment-message\" /><span aria-hidden=\"true\">{{ s.comments_count }}</span><span class=\"ssp__sr\">{{ commentsText(s.comments_count) }}</span>\n              </span>\n            }\n            <!-- Apoiar direto no cart\u00E3o (a pr\u00F3pria s\u00F3 mostra a contagem: ningu\u00E9m apoia o que pediu). -->\n            @if (s.mine) {\n              <span class=\"ssp__count-item\" [attr.title]=\"votesText(s.votes)\">\n                <hm-icon shape=\"thumbs-up\" /><span aria-hidden=\"true\">{{ s.votes }}</span><span class=\"ssp__sr\">{{ votesText(s.votes) }}</span>\n              </span>\n            } @else {\n              <hm-button class=\"ssp__support\" size=\"small\" emphasis=\"minimal\" icon=\"thumbs-up\" toggle [pressed]=\"s.voted\"\n                         [disabled]=\"isVoting(s.id)\" [attr.title]=\"supportText(s)\" (clicked)=\"toggleSupport(s)\">\n                <span aria-hidden=\"true\">{{ s.votes }}</span><span class=\"ssp__sr\">{{ supportText(s) }}</span>\n              </hm-button>\n            }\n          </span>\n        </div>\n      </li>\n    }\n  </ul>\n\n  @if (total() > pagination().size) {\n    <hm-paginator variant=\"simple\" [label]=\"text.appPagination\" [state]=\"pagination()\" [totalItems]=\"total()\"\n                  [sizes]=\"[20, 50]\" (stateChanged)=\"onPage($event)\" />\n  }\n</section>\n\n<!-- A sugest\u00E3o aberta: gaveta com as abas Conversa (o chat) e Detalhes. -->\n<hm-drawer [heading]=\"drawerHeading()\" size=\"large\" [open]=\"panelOpen()\" (openChange)=\"$event || close()\">\n  @if (detailError()) {\n    <hm-alert variant=\"error\">{{ detailError() }}</hm-alert>\n  } @else if (selected(); as s) {\n    <div class=\"ssp-detail\" [class.ssp-detail--alert]=\"waitingOnMe()\">\n      <div class=\"ssp__item-meta\">\n        <span class=\"ssp__key\">{{ s.key }}</span>\n        <span class=\"ssp__status\" [attr.data-status]=\"s.status\"><span class=\"ssp__dot\" aria-hidden=\"true\"></span>{{ text.statuses[s.status] }}</span>\n        <span class=\"ssp__kind\" [attr.data-kind]=\"s.kind\"><hm-icon [shape]=\"kindIcons[s.kind]\" />{{ text.kinds[s.kind] }}</span>\n        @if (s.archived) { <hm-tag [name]=\"text.archivedTag\" /> }\n        @if (s.waiting_on && s.status !== 'concluida' && s.status !== 'recusada') {\n          <hm-tag [name]=\"text.waiting[s.waiting_on]\" [color]=\"waitingColors[s.waiting_on]\" />\n        }\n        <!-- O apoio fica fora das abas: vale para as duas. -->\n        <hm-button class=\"ssp-detail__support\" size=\"small\" emphasis=\"medium\" icon=\"thumbs-up\" toggle [pressed]=\"s.voted\"\n                   [disabled]=\"s.mine || isVoting(s.id)\" (clicked)=\"toggleSupport(s)\">{{ supportText(s) }}</hm-button>\n      </div>\n      @if (waitingOnMe()) {\n        <hm-alert variant=\"warning\">{{ page.waitingYou }}</hm-alert>\n      }\n\n      <hm-tabs [label]=\"page.details\" [active]=\"tab()\" (activeChange)=\"pickTab($event)\">\n        <hm-tab id=\"details\" [label]=\"page.details\">\n          <div class=\"ssp-detail__body\">\n            @if (!s.can_comment) {\n              <hm-alert variant=\"info\">{{ page.readOnly }}</hm-alert>\n            }\n            @if (s.description_html) {\n              <hm-rich-text class=\"ssp-detail__description\" [label]=\"text.description\" labelHidden readonly hideToolbar [value]=\"s.description_html\" />\n            } @else if (s.description) {\n              <p class=\"ssp-detail__description\">{{ s.description }}</p>\n            } @else {\n              <p class=\"ssp__hint\">{{ text.noDescription }}</p>\n            }\n\n            <dl class=\"ssp-detail__facts\">\n              <dt>{{ text.screenOrigin }}</dt>\n              <dd>\n                @if (s.screen.new) { <span class=\"ssp__new-screen\">{{ text.newScreenTag }}</span> }\n                {{ screenText(s) }}\n              </dd>\n              <dt>{{ text.requestedBy }}</dt>\n              <dd>\n                <hm-account-avatar size=\"small\" [name]=\"personName(s.author)\" [imageUrl]=\"s.author?.picture\" />\n                {{ personName(s.author) }} \u00B7 {{ age(s.created_at) }}\n              </dd>\n              <!-- Os grupos em linha, no modelo dos r\u00F3tulos (o que n\u00E3o cabe vira \"+N\"), como no quadro da equipe. -->\n              <dt>{{ page.groups }}</dt>\n              <dd class=\"ssp-detail__groups\"><spine-tag-row [label]=\"page.groups\" [items]=\"s.groups\" [empty]=\"text.noGroups\" /></dd>\n              <dt>{{ text.assignees }}</dt>\n              <dd>\n                @for (p of s.assignees; track p.user_id) {\n                  <hm-account-avatar size=\"small\" [name]=\"personName(p)\" [imageUrl]=\"p.picture\" />\n                  <span>{{ personName(p) }}</span>\n                } @empty { <span class=\"ssp__hint\">{{ text.nobody }}</span> }\n              </dd>\n              <dt>{{ text.createdAt }}</dt>\n              <dd>{{ date(s.created_at) }}</dd>\n            </dl>\n\n            @for (r of s.reasons; track r) {\n              <p class=\"ssp__hint\">{{ page.reasonHints[r] }}</p>\n            }\n            @for (m of s.merged_from; track m.id) {\n              <p class=\"ssp-detail__merged\">{{ mergedFromText(m.key, s.key) }}</p>\n            }\n\n          </div>\n        </hm-tab>\n        <!-- A conversa \u00E9 de quem pediu, foi agrupado ou participa (can_comment); quem s\u00F3 v\u00EA pelo grupo fica com os Detalhes. -->\n        @if (s.can_comment) {\n          <hm-tab id=\"conversation\" [label]=\"page.conversation\" [count]=\"s.comments_count || null\">\n            @if (conversation()?.error) {\n              <hm-alert variant=\"error\">{{ page.conversationError }}</hm-alert>\n            }\n            <!-- A conversa em chat: \u00E0 direita o que a pessoa escreveu como quem pede; o resto (inclusive ela mesma como\n                 equipe) \u00E0 esquerda, com o papel no cabe\u00E7alho. -->\n            <spine-suggestion-chat class=\"ssp-detail__chat\" side=\"solicitante\" [me]=\"me()\" [items]=\"chatItems()\"\n                                   [label]=\"page.conversation\" [empty]=\"page.conversationEmpty\"\n                                   [hasMore]=\"(conversation()?.messages?.length ?? 0) < (conversation()?.total ?? 0)\"\n                                   [loading]=\"!!conversation()?.loading\"\n                                   [composerLabel]=\"page.reply\" [placeholder]=\"page.replyPlaceholder\" [sendLabel]=\"page.replySend\"\n                                   [sending]=\"sending()\" [(draft)]=\"reply\" (loadHistory)=\"loadOlder()\" (send)=\"send($event)\" />\n          </hm-tab>\n        }\n\n      </hm-tabs>\n    </div>\n  } @else {\n    <p class=\"ssp__hint\">{{ page.pickOne }}</p>\n  }\n</hm-drawer>\n\n<spine-suggestions-dialog [(view)]=\"dialog\" [onPage]=\"true\" (created)=\"onCreated($event)\" />\n", styles: [":host{display:block;min-block-size:100%}.ssp{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-sm) var(--hm-space-md);min-inline-size:0}.ssp__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs) var(--hm-space-sm)}.ssp__heading{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-bold)}.ssp__count{padding:0 var(--hm-space-xs);border-radius:var(--hm-radius-pill);background:var(--hm-hover);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.8}.ssp__status-part{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.ssp__spacer{flex:1 1 auto}.ssp__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm)}.ssp__search{flex:1 1 18rem;min-inline-size:0}.ssp__scope{flex:none;max-inline-size:100%}.ssp__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--ssp-status, var(--hm-border))}[data-status=em_analise]{--ssp-status: var(--hm-info)}[data-status=planejada]{--ssp-status: var(--hm-accent)}[data-status=em_desenvolvimento]{--ssp-status: var(--hm-warning)}[data-status=concluida]{--ssp-status: var(--hm-success)}[data-status=recusada]{--ssp-status: var(--hm-muted)}.ssp__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr));gap:var(--hm-space-sm);margin:0;padding:0;list-style:none}.ssp__item{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.ssp__item--open{border-color:var(--hm-accent)}.ssp__item--unread{box-shadow:inset var(--hm-border-thin) 0 0 var(--hm-accent)}.ssp__item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.ssp__key{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.ssp__menu{margin-inline-start:auto}.ssp__status,.ssp__kind{display:inline-flex;align-items:center;gap:var(--hm-space-micro);padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:var(--hm-hover);color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;white-space:nowrap}.ssp__status{background:color-mix(in srgb,var(--ssp-status, var(--hm-border)) 14%,transparent)}.ssp__kind{color:var(--hm-action)}.ssp__kind hm-icon{--hm-icon-size: .875rem}.ssp__kind[data-kind=melhoria] hm-icon{color:var(--hm-accent)}.ssp__kind[data-kind=nova_funcionalidade] hm-icon{color:var(--hm-info)}.ssp__kind[data-kind=problema] hm-icon{color:var(--hm-danger)}.ssp__unread{color:var(--hm-accent);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.ssp__item-title{padding:0;border:0;background:none;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-bold);text-align:start;overflow-wrap:anywhere;cursor:pointer}.ssp__item-title:hover{text-decoration:underline}.ssp__item-title:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-thin);border-radius:var(--hm-radius-micro)}.ssp__item-screen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xxxs);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.ssp__item-screen>hm-icon{--hm-icon-size: 1rem}.ssp__screen-sep{--hm-icon-size: .75rem}.ssp__screen-name{color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.ssp__new-screen{padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:var(--hm-info);color:var(--hm-on-status);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6}.ssp__excerpt{margin:0;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-sm);white-space:nowrap;text-overflow:ellipsis}.ssp__item-foot{display:flex;align-items:center;gap:var(--hm-space-xs);margin-block-start:var(--hm-space-xxxs);padding-block-start:var(--hm-space-xs);border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.ssp__byline{display:flex;flex:1 1 auto;flex-direction:column;min-inline-size:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.3}.ssp__byline-name{overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.ssp__counts{display:inline-flex;align-items:center;gap:var(--hm-space-sm)}.ssp__count-item{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-sm);font-variant-numeric:tabular-nums}.ssp__count-item+.ssp__count-item{padding-inline-start:var(--hm-space-sm);border-inline-start:var(--hm-border-hairline) solid var(--hm-border)}.ssp__support{font-variant-numeric:tabular-nums}.ssp-detail__support{margin-inline-start:auto}.ssp__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.ssp__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.ssp-detail{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:0}.ssp-detail{--ssp-chat-offset: 8rem}.ssp-detail--alert{--ssp-chat-offset: 11.5rem}.ssp-detail__chat{--spine-chat-height: calc(100dvh - var(--ssp-chat-offset));margin-block-start:var(--hm-space-xxxs)}.ssp-detail__groups{min-inline-size:0}.ssp-detail__body{display:flex;flex-direction:column;gap:var(--hm-space-sm);padding-block-start:var(--hm-space-sm)}.ssp-detail__description{margin:0;color:var(--hm-text);white-space:pre-line;overflow-wrap:anywhere}.ssp-detail__facts{display:flex;flex-direction:column;margin:0;font-size:var(--hm-font-size-sm)}.ssp-detail__facts dt{color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.ssp-detail__facts dt:not(:first-child){margin-block-start:var(--hm-space-sm)}.ssp-detail__facts dd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);margin:var(--hm-space-micro) 0 0;color:var(--hm-text)}.ssp-detail__merged{margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs);border-inline-start:var(--hm-border-thin) solid var(--hm-info);border-radius:var(--hm-radius-micro);background:var(--hm-info-bg);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"], dependencies: [{ kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading"] }, { kind: "component", type: AlertComponent, selector: "hm-alert", inputs: ["variant", "appearance", "heading", "closable", "size", "showIcon", "link", "linkLabel", "linkTarget", "dismissKey", "duration"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "hm-button", inputs: ["emphasis", "intent", "size", "type", "icon", "iconDirection", "iconEnd", "disabled", "loading", "loadingState", "block", "link", "newTab", "caret", "inMenu", "toggle", "pressed"], outputs: ["loadingStateChange", "pressedChange", "clicked"] }, { kind: "component", type: DrawerComponent, selector: "hm-drawer", inputs: ["open", "heading", "size", "position", "pinned", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: EmptyComponent, selector: "hm-empty", inputs: ["heading", "description", "icon", "appearance", "size", "headingLevel"] }, { kind: "component", type: FilterBarComponent, selector: "hm-filter-bar", inputs: ["filters", "value", "label", "savedFilters", "storageKey", "storage", "applyDefault"], outputs: ["valueChange", "savedChange", "savedApplied"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: MenuButtonComponent, selector: "hm-menu-button", inputs: ["label", "icon", "items", "showArrow", "align", "side", "size", "shape", "layer", "closeOnCheck", "disabled"], outputs: ["chosen", "checkedChange"] }, { kind: "component", type: PaginatorComponent, selector: "hm-paginator", inputs: ["state", "totalItems", "variant", "label", "showPage", "hasNext", "hasPrevious", "sizes", "maxNumbers"], outputs: ["stateChanged", "nextPage", "previousPage"] }, { kind: "component", type: RichTextComponent, selector: "hm-rich-text", inputs: ["value", "label", "labelHidden", "hint", "placeholder", "readonly", "loading", "tools", "headingLevels", "hideToolbar", "rows", "maxRows", "maxLength", "showCounter", "pasteMode", "linkProtocols", "allowRelativeLinks", "spellcheck"], outputs: ["valueChange", "focusChange"] }, { kind: "component", type: SearchFieldComponent, selector: "hm-search-field", inputs: ["value", "label", "labelHidden", "placeholder", "hint", "size", "debounce", "landmark", "loading"], outputs: ["valueChange", "search", "cleared"] }, { kind: "component", type: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: SpineSuggestionChatComponent, selector: "spine-suggestion-chat", inputs: ["items", "side", "me", "label", "empty", "hasMore", "loading", "canWrite", "composerLabel", "placeholder", "sendLabel", "sending", "error", "draft"], outputs: ["draftChange", "loadHistory", "send"] }, { kind: "component", type: SpineSuggestionsDialogComponent, selector: "spine-suggestions-dialog", inputs: ["view", "screenPath", "screenLabel", "onPage"], outputs: ["viewChange", "created"] }, { kind: "component", type: SpineTagRowComponent, selector: "spine-tag-row", inputs: ["items", "label", "empty"] }, { kind: "component", type: TabComponent, selector: "hm-tab", inputs: ["id", "label", "disabled", "count", "route", "exact", "destroyOnHide"] }, { kind: "component", type: TabsComponent, selector: "hm-tabs", inputs: ["label", "active", "orientation", "mode", "overflow", "fillHeight", "noPanelGap"], outputs: ["activeChange"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SpineSuggestionsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-suggestions-page', imports: [
+                        AccountAvatarComponent, AlertComponent, ButtonComponent, DrawerComponent, EmptyComponent, FilterBarComponent,
+                        IconComponent, MenuButtonComponent, PaginatorComponent, RichTextComponent, SearchFieldComponent,
+                        SegmentedControlComponent, SpineSuggestionChatComponent, SpineSuggestionsDialogComponent, SpineTagRowComponent, TabComponent, TabsComponent,
+                        TagComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"ssp\" [attr.aria-label]=\"page.listLabel\">\n  <!-- Cabe\u00E7alho numa linha: o recorte, quantas (e quantas em cada status), a ordem e o \"Sugerir melhoria\". -->\n  <header class=\"ssp__head\">\n    <h2 class=\"ssp__heading\">{{ heading() }}</h2>\n    <span class=\"ssp__count\" aria-live=\"polite\">{{ countText() }}</span>\n    @for (part of statusParts(); track part.status) {\n      <span class=\"ssp__status-part\" [attr.data-status]=\"part.status\"><span class=\"ssp__dot\" aria-hidden=\"true\"></span>{{ part.text }}</span>\n    }\n    <span class=\"ssp__spacer\"></span>\n    <hm-segmented-control class=\"ssp__sort\" size=\"small\" [label]=\"text.sort\" [options]=\"sortOptions\" [value]=\"sort()\"\n                          (valueChange)=\"onSort($event)\" />\n    <hm-button size=\"small\" icon=\"plus\" (clicked)=\"suggest()\">{{ text.button }}</hm-button>\n  </header>\n\n  <!-- Busca e o recorte (por que a pessoa v\u00EA, com as contagens do servidor) na mesma linha. -->\n  <div class=\"ssp__bar\">\n    <hm-search-field class=\"ssp__search\" [label]=\"text.appSearch\" labelHidden [placeholder]=\"text.appSearch\"\n                     [landmark]=\"false\" [debounce]=\"300\" [value]=\"search()\" (search)=\"onSearch($event)\" />\n    <hm-segmented-control class=\"ssp__scope\" size=\"small\" emphasis=\"action\" [label]=\"page.reasonFilter\"\n                          [options]=\"scopeOptions()\" [value]=\"scope()\" (valueChange)=\"pickScope($event)\" />\n  </div>\n\n  <!-- Filtros do Trismegisto: um bot\u00E3o por campo e, aplicados, as fichas remov\u00EDveis com \"Limpar tudo\". -->\n  <hm-filter-bar class=\"ssp__filters\" [label]=\"page.filtersLabel\" [filters]=\"filterFields()\" [value]=\"filterValue()\"\n                 (valueChange)=\"onFilters($event)\" />\n\n  @if (error()) {\n    <hm-alert variant=\"error\">{{ error() }}</hm-alert>\n  } @else if (!loading() && list().length === 0) {\n    @if (filtered()) {\n      <hm-empty icon=\"filter\" [heading]=\"page.emptyFiltered\" />\n    } @else {\n      <hm-empty icon=\"lightbulb\" [heading]=\"page.empty\" [description]=\"page.emptyHint\" />\n    }\n  }\n\n  <ul class=\"ssp__list\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n    @for (s of list(); track s.id) {\n      <li class=\"ssp__item\" [class.ssp__item--open]=\"selected()?.id === s.id\" [class.ssp__item--unread]=\"s.unread > 0\">\n        <div class=\"ssp__item-meta\">\n          <span class=\"ssp__key\">{{ s.key }}</span>\n          <span class=\"ssp__status\" [attr.data-status]=\"s.status\"><span class=\"ssp__dot\" aria-hidden=\"true\"></span>{{ text.statuses[s.status] }}</span>\n          <span class=\"ssp__kind\" [attr.data-kind]=\"s.kind\"><hm-icon [shape]=\"kindIcons[s.kind]\" />{{ text.kinds[s.kind] }}</span>\n          @if (s.unread) { <span class=\"ssp__unread\">{{ unreadText(s.unread) }}</span> }\n          <span class=\"ssp__menu\">\n            <hm-menu-button size=\"small\" icon=\"ellipsis-vertical\" [showArrow]=\"false\" align=\"end\" [label]=\"menuLabel(s)\"\n                            [items]=\"itemMenu\" (chosen)=\"onMenu(s, $event)\" />\n          </span>\n        </div>\n        <!-- O t\u00EDtulo \u00E9 o bot\u00E3o que abre a sugest\u00E3o na gaveta. -->\n        <button type=\"button\" class=\"ssp__item-title\" aria-haspopup=\"dialog\" (click)=\"open(s)\">{{ s.title }}</button>\n        <div class=\"ssp__item-screen\">\n          <hm-icon [shape]=\"s.screen.new ? 'plus' : 'application'\" />\n          @if (screenModule(s); as module) {\n            <span class=\"ssp__screen-module\">{{ module }}</span><hm-icon class=\"ssp__screen-sep\" shape=\"angle-right\" />\n          }\n          <strong class=\"ssp__screen-name\">{{ screenShort(s) }}</strong>\n          @if (s.screen.new) { <span class=\"ssp__new-screen\">{{ text.newScreenTag }}</span> }\n          @if (s.waiting_on && s.status !== 'concluida' && s.status !== 'recusada') {\n            <hm-tag [name]=\"text.waiting[s.waiting_on]\" [color]=\"waitingColors[s.waiting_on]\" />\n          }\n        </div>\n        @if (excerptOf(s); as ex) {\n          <p class=\"ssp__excerpt\">{{ ex }}</p>\n        }\n        <div class=\"ssp__item-foot\">\n          <hm-account-avatar size=\"small\" [name]=\"personName(s.author)\" [imageUrl]=\"s.author?.picture\" />\n          <span class=\"ssp__byline\">\n            <span class=\"ssp__byline-name\">{{ personName(s.author) }}</span>\n            <time [attr.datetime]=\"s.last_activity_at || s.updated_at\">{{ age(s.last_activity_at || s.updated_at) }}</time>\n          </span>\n          <span class=\"ssp__counts\">\n            @if (s.can_comment) {\n              <span class=\"ssp__count-item\" [attr.title]=\"commentsText(s.comments_count)\">\n                <hm-icon shape=\"comment-message\" /><span aria-hidden=\"true\">{{ s.comments_count }}</span><span class=\"ssp__sr\">{{ commentsText(s.comments_count) }}</span>\n              </span>\n            }\n            <!-- Apoiar direto no cart\u00E3o (a pr\u00F3pria s\u00F3 mostra a contagem: ningu\u00E9m apoia o que pediu). -->\n            @if (s.mine) {\n              <span class=\"ssp__count-item\" [attr.title]=\"votesText(s.votes)\">\n                <hm-icon shape=\"thumbs-up\" /><span aria-hidden=\"true\">{{ s.votes }}</span><span class=\"ssp__sr\">{{ votesText(s.votes) }}</span>\n              </span>\n            } @else {\n              <hm-button class=\"ssp__support\" size=\"small\" emphasis=\"minimal\" icon=\"thumbs-up\" toggle [pressed]=\"s.voted\"\n                         [disabled]=\"isVoting(s.id)\" [attr.title]=\"supportText(s)\" (clicked)=\"toggleSupport(s)\">\n                <span aria-hidden=\"true\">{{ s.votes }}</span><span class=\"ssp__sr\">{{ supportText(s) }}</span>\n              </hm-button>\n            }\n          </span>\n        </div>\n      </li>\n    }\n  </ul>\n\n  @if (total() > pagination().size) {\n    <hm-paginator variant=\"simple\" [label]=\"text.appPagination\" [state]=\"pagination()\" [totalItems]=\"total()\"\n                  [sizes]=\"[20, 50]\" (stateChanged)=\"onPage($event)\" />\n  }\n</section>\n\n<!-- A sugest\u00E3o aberta: gaveta com as abas Conversa (o chat) e Detalhes. -->\n<hm-drawer [heading]=\"drawerHeading()\" size=\"large\" [open]=\"panelOpen()\" (openChange)=\"$event || close()\">\n  @if (detailError()) {\n    <hm-alert variant=\"error\">{{ detailError() }}</hm-alert>\n  } @else if (selected(); as s) {\n    <div class=\"ssp-detail\" [class.ssp-detail--alert]=\"waitingOnMe()\">\n      <div class=\"ssp__item-meta\">\n        <span class=\"ssp__key\">{{ s.key }}</span>\n        <span class=\"ssp__status\" [attr.data-status]=\"s.status\"><span class=\"ssp__dot\" aria-hidden=\"true\"></span>{{ text.statuses[s.status] }}</span>\n        <span class=\"ssp__kind\" [attr.data-kind]=\"s.kind\"><hm-icon [shape]=\"kindIcons[s.kind]\" />{{ text.kinds[s.kind] }}</span>\n        @if (s.archived) { <hm-tag [name]=\"text.archivedTag\" /> }\n        @if (s.waiting_on && s.status !== 'concluida' && s.status !== 'recusada') {\n          <hm-tag [name]=\"text.waiting[s.waiting_on]\" [color]=\"waitingColors[s.waiting_on]\" />\n        }\n        <!-- O apoio fica fora das abas: vale para as duas. -->\n        <hm-button class=\"ssp-detail__support\" size=\"small\" emphasis=\"medium\" icon=\"thumbs-up\" toggle [pressed]=\"s.voted\"\n                   [disabled]=\"s.mine || isVoting(s.id)\" (clicked)=\"toggleSupport(s)\">{{ supportText(s) }}</hm-button>\n      </div>\n      @if (waitingOnMe()) {\n        <hm-alert variant=\"warning\">{{ page.waitingYou }}</hm-alert>\n      }\n\n      <hm-tabs [label]=\"page.details\" [active]=\"tab()\" (activeChange)=\"pickTab($event)\">\n        <hm-tab id=\"details\" [label]=\"page.details\">\n          <div class=\"ssp-detail__body\">\n            @if (!s.can_comment) {\n              <hm-alert variant=\"info\">{{ page.readOnly }}</hm-alert>\n            }\n            @if (s.description_html) {\n              <hm-rich-text class=\"ssp-detail__description\" [label]=\"text.description\" labelHidden readonly hideToolbar [value]=\"s.description_html\" />\n            } @else if (s.description) {\n              <p class=\"ssp-detail__description\">{{ s.description }}</p>\n            } @else {\n              <p class=\"ssp__hint\">{{ text.noDescription }}</p>\n            }\n\n            <dl class=\"ssp-detail__facts\">\n              <dt>{{ text.screenOrigin }}</dt>\n              <dd>\n                @if (s.screen.new) { <span class=\"ssp__new-screen\">{{ text.newScreenTag }}</span> }\n                {{ screenText(s) }}\n              </dd>\n              <dt>{{ text.requestedBy }}</dt>\n              <dd>\n                <hm-account-avatar size=\"small\" [name]=\"personName(s.author)\" [imageUrl]=\"s.author?.picture\" />\n                {{ personName(s.author) }} \u00B7 {{ age(s.created_at) }}\n              </dd>\n              <!-- Os grupos em linha, no modelo dos r\u00F3tulos (o que n\u00E3o cabe vira \"+N\"), como no quadro da equipe. -->\n              <dt>{{ page.groups }}</dt>\n              <dd class=\"ssp-detail__groups\"><spine-tag-row [label]=\"page.groups\" [items]=\"s.groups\" [empty]=\"text.noGroups\" /></dd>\n              <dt>{{ text.assignees }}</dt>\n              <dd>\n                @for (p of s.assignees; track p.user_id) {\n                  <hm-account-avatar size=\"small\" [name]=\"personName(p)\" [imageUrl]=\"p.picture\" />\n                  <span>{{ personName(p) }}</span>\n                } @empty { <span class=\"ssp__hint\">{{ text.nobody }}</span> }\n              </dd>\n              <dt>{{ text.createdAt }}</dt>\n              <dd>{{ date(s.created_at) }}</dd>\n            </dl>\n\n            @for (r of s.reasons; track r) {\n              <p class=\"ssp__hint\">{{ page.reasonHints[r] }}</p>\n            }\n            @for (m of s.merged_from; track m.id) {\n              <p class=\"ssp-detail__merged\">{{ mergedFromText(m.key, s.key) }}</p>\n            }\n\n          </div>\n        </hm-tab>\n        <!-- A conversa \u00E9 de quem pediu, foi agrupado ou participa (can_comment); quem s\u00F3 v\u00EA pelo grupo fica com os Detalhes. -->\n        @if (s.can_comment) {\n          <hm-tab id=\"conversation\" [label]=\"page.conversation\" [count]=\"s.comments_count || null\">\n            @if (conversation()?.error) {\n              <hm-alert variant=\"error\">{{ page.conversationError }}</hm-alert>\n            }\n            <!-- A conversa em chat: \u00E0 direita o que a pessoa escreveu como quem pede; o resto (inclusive ela mesma como\n                 equipe) \u00E0 esquerda, com o papel no cabe\u00E7alho. -->\n            <spine-suggestion-chat class=\"ssp-detail__chat\" side=\"solicitante\" [me]=\"me()\" [items]=\"chatItems()\"\n                                   [label]=\"page.conversation\" [empty]=\"page.conversationEmpty\"\n                                   [hasMore]=\"(conversation()?.messages?.length ?? 0) < (conversation()?.total ?? 0)\"\n                                   [loading]=\"!!conversation()?.loading\"\n                                   [composerLabel]=\"page.reply\" [placeholder]=\"page.replyPlaceholder\" [sendLabel]=\"page.replySend\"\n                                   [sending]=\"sending()\" [(draft)]=\"reply\" (loadHistory)=\"loadOlder()\" (send)=\"send($event)\" />\n          </hm-tab>\n        }\n\n      </hm-tabs>\n    </div>\n  } @else {\n    <p class=\"ssp__hint\">{{ page.pickOne }}</p>\n  }\n</hm-drawer>\n\n<spine-suggestions-dialog [(view)]=\"dialog\" [onPage]=\"true\" (created)=\"onCreated($event)\" />\n", styles: [":host{display:block;min-block-size:100%}.ssp{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-sm) var(--hm-space-md);min-inline-size:0}.ssp__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs) var(--hm-space-sm)}.ssp__heading{margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-bold)}.ssp__count{padding:0 var(--hm-space-xs);border-radius:var(--hm-radius-pill);background:var(--hm-hover);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.8}.ssp__status-part{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.ssp__spacer{flex:1 1 auto}.ssp__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm)}.ssp__search{flex:1 1 18rem;min-inline-size:0}.ssp__scope{flex:none;max-inline-size:100%}.ssp__dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--ssp-status, var(--hm-border))}[data-status=em_analise]{--ssp-status: var(--hm-info)}[data-status=planejada]{--ssp-status: var(--hm-accent)}[data-status=em_desenvolvimento]{--ssp-status: var(--hm-warning)}[data-status=concluida]{--ssp-status: var(--hm-success)}[data-status=recusada]{--ssp-status: var(--hm-muted)}.ssp__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr));gap:var(--hm-space-sm);margin:0;padding:0;list-style:none}.ssp__item{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.ssp__item--open{border-color:var(--hm-accent)}.ssp__item--unread{box-shadow:inset var(--hm-border-thin) 0 0 var(--hm-accent)}.ssp__item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs)}.ssp__key{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.ssp__menu{margin-inline-start:auto}.ssp__status,.ssp__kind{display:inline-flex;align-items:center;gap:var(--hm-space-micro);padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:var(--hm-hover);color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;white-space:nowrap}.ssp__status{background:color-mix(in srgb,var(--ssp-status, var(--hm-border)) 14%,transparent)}.ssp__kind{color:var(--hm-action)}.ssp__kind hm-icon{--hm-icon-size: .875rem}.ssp__kind[data-kind=melhoria] hm-icon{color:var(--hm-accent)}.ssp__kind[data-kind=nova_funcionalidade] hm-icon{color:var(--hm-info)}.ssp__kind[data-kind=problema] hm-icon{color:var(--hm-danger)}.ssp__unread{color:var(--hm-accent);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.ssp__item-title{padding:0;border:0;background:none;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-bold);text-align:start;overflow-wrap:anywhere;cursor:pointer}.ssp__item-title:hover{text-decoration:underline}.ssp__item-title:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-thin);border-radius:var(--hm-radius-micro)}.ssp__item-screen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xxxs);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.ssp__item-screen>hm-icon{--hm-icon-size: 1rem}.ssp__screen-sep{--hm-icon-size: .75rem}.ssp__screen-name{color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.ssp__new-screen{padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:var(--hm-info);color:var(--hm-on-status);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6}.ssp__excerpt{margin:0;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-sm);white-space:nowrap;text-overflow:ellipsis}.ssp__item-foot{display:flex;align-items:center;gap:var(--hm-space-xs);margin-block-start:var(--hm-space-xxxs);padding-block-start:var(--hm-space-xs);border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.ssp__byline{display:flex;flex:1 1 auto;flex-direction:column;min-inline-size:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs);line-height:1.3}.ssp__byline-name{overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.ssp__counts{display:inline-flex;align-items:center;gap:var(--hm-space-sm)}.ssp__count-item{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-sm);font-variant-numeric:tabular-nums}.ssp__count-item+.ssp__count-item{padding-inline-start:var(--hm-space-sm);border-inline-start:var(--hm-border-hairline) solid var(--hm-border)}.ssp__support{font-variant-numeric:tabular-nums}.ssp-detail__support{margin-inline-start:auto}.ssp__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.ssp__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.ssp-detail{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:0}.ssp-detail{--ssp-chat-offset: 8rem}.ssp-detail--alert{--ssp-chat-offset: 11.5rem}.ssp-detail__chat{--spine-chat-height: calc(100dvh - var(--ssp-chat-offset));margin-block-start:var(--hm-space-xxxs)}.ssp-detail__groups{min-inline-size:0}.ssp-detail__body{display:flex;flex-direction:column;gap:var(--hm-space-sm);padding-block-start:var(--hm-space-sm)}.ssp-detail__description{margin:0;color:var(--hm-text);white-space:pre-line;overflow-wrap:anywhere}.ssp-detail__facts{display:flex;flex-direction:column;margin:0;font-size:var(--hm-font-size-sm)}.ssp-detail__facts dt{color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.ssp-detail__facts dt:not(:first-child){margin-block-start:var(--hm-space-sm)}.ssp-detail__facts dd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);margin:var(--hm-space-micro) 0 0;color:var(--hm-text)}.ssp-detail__merged{margin:0;padding:var(--hm-space-xxxs) var(--hm-space-xs);border-inline-start:var(--hm-border-thin) solid var(--hm-info);border-radius:var(--hm-radius-micro);background:var(--hm-info-bg);color:var(--hm-text);font-size:var(--hm-font-size-sm)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { chat: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SpineSuggestionChatComponent), { isSignal: true }] }] } });
+
+export { SpineSuggestionsPageComponent };
+//# sourceMappingURL=trismegisto-spine-layout-suggestions-page.component-xI2gDMok.mjs.map