@trismegisto/spine 3.3.1 → 3.3.3

package/fesm2022/trismegisto-spine-auto-service-auto-service-suggestions-page.component-mMjE3JOL.mjs

@@ -0,0 +1,2179 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, output, signal, computed, effect, untracked, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
+import { A as AutoServiceClientPickerComponent } from './trismegisto-spine-auto-service-auto-service-client-picker.component-NawbfdLW.mjs';
+import { Location } from '@angular/common';
+import { Router } from '@angular/router';
+import { AuthorizationService, AUTH_CONFIG } from '@orfeu/angular/core';
+import { AccountAvatarComponent, SearchFieldComponent, ButtonComponent, CheckboxComponent, HermesToastService, HermesDialogService, AlertComponent, DatePickerComponent, IconButtonComponent, IconComponent, InputComponent, ModalComponent, PopoverComponent, PopoverTriggerDirective, RichTextComponent, SelectComponent, SwitchComponent, TabComponent, TabsComponent, TagComponent, TextareaComponent, EmptyComponent, KanbanCardDirective, KanbanColumnActionsDirective, KanbanColumnEmptyDirective, KanbanColumnFooterDirective, KanbanColumnSummaryDirective, KanbanComponent, MenuButtonComponent, PaginatorComponent, SegmentedControlComponent } from '@trismegisto/angular';
+import { urlPath, formatMessage, pluralMessage } from '@trismegisto/primitives';
+import { SPINE_MESSAGES, SpinePreferencesService, SpineUserStorage } from '@trismegisto/spine';
+import { SPINE_SUGGESTION_STATUSES, SPINE_SUGGESTION_STATUS_COLORS, SPINE_SUGGESTION_WAITING, SPINE_SUGGESTION_WAITING_COLORS, SPINE_SUGGESTION_KINDS, SPINE_SUGGESTION_KIND_COLORS, SPINE_SUGGESTION_LIMITS, SpineSuggestionChatComponent, SpineTagRowComponent, SPINE_SUGGESTION_STATUS_ICONS, NEW_SCREEN_VALUE, SPINE_SUGGESTION_KIND_ICONS, screenName } from '@trismegisto/spine/layout';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+import { AUTO_SERVICE_CONFIG } from './trismegisto-spine-auto-service.mjs';
+
+/** Janelas quando o servidor não diz (as mesmas constantes do argos-admin). */
+const AUTO_SERVICE_SUGGESTION_DONE_DAYS = 7;
+const AUTO_SERVICE_SUGGESTION_DUE_SOON_DAYS = 1;
+/**
+ * O quadro de trabalho das sugestões do client — `argos-admin /auto-service/:clientId/suggestions` (atrás do
+ * clientAdminGuard, como o resto do auto-serviço). Serviço próprio da tela, para não engordar o `AutoServiceService`.
+ * Toda mudança na tarefa responde a tarefa inteira (com o checklist completo); mover responde a tarefa leve.
+ */
+class AutoServiceSuggestionsService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.auth = inject(AuthorizationService);
+        this.config = inject(AUTO_SERVICE_CONFIG);
+    }
+    url(strings, ...ids) {
+        return `${this.config.adminApi}/auto-service${urlPath(strings, ...ids)}`;
+    }
+    get headers() {
+        return new HttpHeaders({ 'x-access-token': this.auth.getToken() ?? '' });
+    }
+    read(url, params) {
+        return firstValueFrom(this.http.get(url, { headers: this.headers, params }));
+    }
+    /**
+     * O quadro (`board=true`): sem arquivadas, recusadas e concluídas fora da janela — o corte é do servidor. A tela
+     * filtra o resto sobre a lista inteira: a posição de cada cartão é a da coluna inteira.
+     */
+    async board(clientId) {
+        const res = await this.read(this.url `/${clientId}/suggestions`, new HttpParams().set('board', 'true'));
+        return {
+            suggestions: res.suggestions ?? [],
+            doneDays: res.done_days ?? AUTO_SERVICE_SUGGESTION_DONE_DAYS,
+            dueSoonDays: res.due_soon_days ?? AUTO_SERVICE_SUGGESTION_DUE_SOON_DAYS,
+        };
+    }
+    /** O arquivo (`archive=true`): arquivadas, recusadas e concluídas antigas, paginado e filtrado no servidor. */
+    async archive(clientId, q) {
+        let params = new HttpParams().set('archive', 'true').set('limit', q.limit).set('offset', q.offset);
+        if (q.search)
+            params = params.set('search', q.search);
+        if (q.kind)
+            params = params.set('kind', q.kind);
+        if (q.status)
+            params = params.set('status', q.status);
+        const res = await this.read(this.url `/${clientId}/suggestions`, params);
+        return { suggestions: res.suggestions ?? [], total: res.total ?? 0 };
+    }
+    /** A tarefa inteira (checklist completo, pessoas, rótulos, última atividade). */
+    task(clientId, id) {
+        return this.read(this.url `/${clientId}/suggestions/${id}`);
+    }
+    /** Pela chave ("SUG-12"): o link copiado abre a tarefa. */
+    lookup(clientId, key) {
+        return this.read(this.url `/${clientId}/suggestions/lookup`, new HttpParams().set('key', key));
+    }
+    create(clientId, draft) {
+        return firstValueFrom(this.http.post(this.url `/${clientId}/suggestions`, draft, { headers: this.headers }));
+    }
+    update(clientId, id, edit) {
+        return firstValueFrom(this.http.patch(this.url `/${clientId}/suggestions/${id}`, edit, { headers: this.headers }));
+    }
+    /**
+     * Arrastar ou mudar pelo detalhe: status (coluna) e/ou posição (índice na coluna de destino, contando a coluna
+     * inteira); `comment` vai junto com a mudança de status (`internal` = só a equipe vê).
+     */
+    move(clientId, id, change) {
+        return firstValueFrom(this.http.patch(this.url `/${clientId}/suggestions/${id}`, change, { headers: this.headers }));
+    }
+    remove(clientId, id) {
+        return firstValueFrom(this.http.delete(this.url `/${clientId}/suggestions/${id}`, { headers: this.headers }));
+    }
+    setArchived(clientId, id, archived) {
+        const url = archived ? this.url `/${clientId}/suggestions/${id}/archive` : this.url `/${clientId}/suggestions/${id}/restore`;
+        return firstValueFrom(this.http.post(url, {}, { headers: this.headers }));
+    }
+    /** Prévia do agrupamento em `into`: quantos relatores e apoios passariam (nada é gravado). */
+    mergePreview(clientId, id, into) {
+        return this.read(this.url `/${clientId}/suggestions/${id}/merge`, new HttpParams().set('into', into));
+    }
+    /** Agrupa esta em `into`: responde o destino inteiro (com os relatores e as agrupadas). */
+    merge(clientId, id, into) {
+        return firstValueFrom(this.http.post(this.url `/${clientId}/suggestions/${id}/merge`, { into }, { headers: this.headers }));
+    }
+    /** Desagrupa esta (a origem): ela volta ao quadro; responde ela inteira. */
+    unmerge(clientId, id) {
+        return firstValueFrom(this.http.post(this.url `/${clientId}/suggestions/${id}/unmerge`, {}, { headers: this.headers }));
+    }
+    /** Comentários ou atividades, do mais novo, paginado. */
+    events(clientId, id, q) {
+        const params = new HttpParams().set('type', q.type).set('limit', q.limit).set('offset', q.offset);
+        return this.read(this.url `/${clientId}/suggestions/${id}/events`, params);
+    }
+    comment(clientId, id, comment, internal = false) {
+        return firstValueFrom(this.http.post(this.url `/${clientId}/suggestions/${id}/comments`, { comment, internal }, { headers: this.headers }));
+    }
+    /** Marca a conversa como lida por quem consulta (zera o `unread` da tarefa). */
+    markRead(clientId, id) {
+        return firstValueFrom(this.http.post(this.url `/${clientId}/suggestions/${id}/read`, {}, { headers: this.headers }));
+    }
+    /** Responsável/envolvido: `userId` ou "me" (atribuir a mim). */
+    addPerson(clientId, id, userId, role) {
+        return firstValueFrom(this.http.post(this.url `/${clientId}/suggestions/${id}/people`, { user_id: userId, role }, { headers: this.headers }));
+    }
+    removePerson(clientId, id, userId, role) {
+        return firstValueFrom(this.http.delete(this.url `/${clientId}/suggestions/${id}/people/${userId}`, {
+            headers: this.headers, params: new HttpParams().set('role', role),
+        }));
+    }
+    addChecklistItem(clientId, id, text) {
+        return firstValueFrom(this.http.post(this.url `/${clientId}/suggestions/${id}/checklist`, { text }, { headers: this.headers }));
+    }
+    updateChecklistItem(clientId, id, itemId, change) {
+        return firstValueFrom(this.http.patch(this.url `/${clientId}/suggestions/${id}/checklist/${itemId}`, change, { headers: this.headers }));
+    }
+    removeChecklistItem(clientId, id, itemId) {
+        return firstValueFrom(this.http.delete(this.url `/${clientId}/suggestions/${id}/checklist/${itemId}`, { headers: this.headers }));
+    }
+    // --- rótulos ---
+    async labels(clientId) {
+        const res = await this.read(this.url `/${clientId}/suggestions/labels`);
+        return res.labels ?? [];
+    }
+    createLabel(clientId, name, color) {
+        return firstValueFrom(this.http.post(this.url `/${clientId}/suggestions/labels`, { name, color }, { headers: this.headers }));
+    }
+    setLabel(clientId, id, labelId, linked) {
+        const url = this.url `/${clientId}/suggestions/${id}/labels/${labelId}`;
+        return firstValueFrom(linked
+            ? this.http.put(url, {}, { headers: this.headers })
+            : this.http.delete(url, { headers: this.headers }));
+    }
+    // --- pessoas do realm do app (a mesma busca da aba Grupos, com a foto) ---
+    async searchPeople(clientId, search) {
+        let params = new HttpParams().set('limit', 10);
+        if (search.trim())
+            params = params.set('search', search.trim());
+        const res = await this.read(this.url `/${clientId}/users`, params);
+        return res.users ?? [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceSuggestionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceSuggestionsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceSuggestionsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// O que a equipe vê de uma sugestão no quadro de trabalho (auto-serviço): a sugestão de quem pediu mais o que é da
+// tarefa -- chave, prioridade, datas, capa, descrição rica, pessoas, rótulos e checklist. Constantes e contas puras
+// (prazo, capa) ficam aqui, fora dos componentes, para o cartão, o detalhe e os testes usarem as mesmas.
+const TASK_PRIORITIES = ['urgente', 'alta', 'media', 'baixa'];
+/** Ícone e intenção de cada prioridade (o texto vem do catálogo; a cor nunca é a única pista). */
+const TASK_PRIORITY_ICONS = {
+    urgente: 'exclamation-triangle', alta: 'arrow-up', media: 'minus', baixa: 'arrow-bottom',
+};
+/** Cores de rótulo: tokens da paleta categórica do tema (o servidor só aceita estes). */
+const TASK_LABEL_COLORS = ['cat-1', 'cat-2', 'cat-3', 'cat-4', 'cat-5', 'cat-6', 'cat-7', 'cat-8'];
+/** Hoje como AAAA-MM-DD no fuso dado (o do perfil da pessoa). */
+function todayIso(timeZone, now = new Date()) {
+    try {
+        return new Intl.DateTimeFormat('en-CA', { timeZone, year: 'numeric', month: '2-digit', day: '2-digit' }).format(now);
+    }
+    catch {
+        return now.toISOString().slice(0, 10);
+    }
+}
+/** AAAA-MM-DD mais `days` dias (negativo volta). */
+function addDays(iso, days) {
+    const d = new Date(`${iso}T00:00:00Z`);
+    d.setUTCDate(d.getUTCDate() + days);
+    return d.toISOString().slice(0, 10);
+}
+/** O prazo da tarefa contra hoje. Concluída/recusada não vence. */
+function dueState(task, today) {
+    if (!task.due_date || task.status === 'concluida' || task.status === 'recusada')
+        return null;
+    if (task.due_date < today)
+        return 'overdue';
+    if (task.due_date === today)
+        return 'today';
+    if (task.due_date === addDays(today, 1))
+        return 'tomorrow';
+    return 'later';
+}
+/** Dias inteiros entre duas datas AAAA-MM-DD (`to` - `from`). */
+function daysBetween(from, to) {
+    return Math.round((Date.parse(`${to}T00:00:00Z`) - Date.parse(`${from}T00:00:00Z`)) / 86_400_000);
+}
+/** Duração em dias, horas e minutos inteiros (o "4h 12min" do quadro). Negativa vira zero. */
+function splitDuration(ms) {
+    const minutes = Math.max(0, Math.floor(ms / 60_000));
+    return { d: Math.floor(minutes / 1440), h: Math.floor((minutes % 1440) / 60), m: minutes % 60 };
+}
+/** Responsável por mim? (o `sub` da sessão) */
+const assignedTo = (task, userId) => !!userId && task.assignees.some((p) => p.user_id === userId);
+
+// Os pequenos seletores do quadro de sugestões, para ir dentro de um `hm-popover` (o cartão e o detalhe da tarefa):
+// pessoas do realm do app (com foto) e rótulos do catálogo do app.
+/**
+ * Pessoa do realm do app: busca (a mesma do auto-serviço, com a foto), as já escolhidas de fora. Lê na abertura (as
+ * primeiras) e a cada termo, com espera.
+ */
+class SuggestionPeoplePickerComponent {
+    constructor() {
+        this.text = inject(SPINE_MESSAGES).suggestions;
+        this.service = inject(AutoServiceSuggestionsService);
+        this.clientId = input.required(...(ngDevMode ? [{ debugName: "clientId" }] : /* istanbul ignore next */ []));
+        /** Quem já está no papel (não aparece de novo). */
+        this.exclude = input([], ...(ngDevMode ? [{ debugName: "exclude" }] : /* istanbul ignore next */ []));
+        this.picked = output();
+        this.found = signal([], ...(ngDevMode ? [{ debugName: "found" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.options = computed(() => this.found().filter((p) => !this.exclude().includes(p.id)), ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.seq = 0;
+        effect(() => {
+            this.clientId();
+            untracked(() => void this.load(''));
+        });
+    }
+    async load(term) {
+        const mine = ++this.seq;
+        this.loading.set(true);
+        try {
+            const list = await this.service.searchPeople(this.clientId(), term);
+            if (mine === this.seq)
+                this.found.set(list);
+        }
+        catch {
+            if (mine === this.seq)
+                this.found.set([]);
+        }
+        finally {
+            if (mine === this.seq)
+                this.loading.set(false);
+        }
+    }
+    nameOf(p) {
+        return p.name || p.username || p.email || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SuggestionPeoplePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SuggestionPeoplePickerComponent, isStandalone: true, selector: "spine-suggestion-people-picker", inputs: { clientId: { classPropertyName: "clientId", publicName: "clientId", isSignal: true, isRequired: true, transformFunction: null }, exclude: { classPropertyName: "exclude", publicName: "exclude", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { picked: "picked" }, ngImport: i0, template: `
+    <div class="as-picker">
+      <hm-search-field [label]="text.peopleSearch" labelHidden [placeholder]="text.peopleSearch" [landmark]="false"
+                       [debounce]="250" [loading]="loading()" (search)="load($event)" />
+      <ul class="as-picker__list" [attr.aria-busy]="loading() ? 'true' : null">
+        @for (p of options(); track p.id) {
+          <li>
+            <button type="button" class="as-picker__person" (click)="picked.emit(p)">
+              <hm-account-avatar size="small" [name]="nameOf(p)" [imageUrl]="p.picture" />
+              <span class="as-picker__person-text">
+                <span class="as-picker__person-name">{{ nameOf(p) }}</span>
+                @if (p.username && p.name) { <span class="as-picker__muted">{{ p.username }}</span> }
+              </span>
+            </button>
+          </li>
+        } @empty {
+          @if (!loading()) { <li class="as-picker__muted">{{ text.peopleEmpty }}</li> }
+        }
+      </ul>
+    </div>
+  `, isInline: true, styles: [".as-tok--cat-1{--as-tok: var(--hm-data-categorical-1);background:var(--as-tok)}.as-tok--cat-2{--as-tok: var(--hm-data-categorical-2);background:var(--as-tok)}.as-tok--cat-3{--as-tok: var(--hm-data-categorical-3);background:var(--as-tok)}.as-tok--cat-4{--as-tok: var(--hm-data-categorical-4);background:var(--as-tok)}.as-tok--cat-5{--as-tok: var(--hm-data-categorical-5);background:var(--as-tok)}.as-tok--cat-6{--as-tok: var(--hm-data-categorical-6);background:var(--as-tok)}.as-tok--cat-7{--as-tok: var(--hm-data-categorical-7);background:var(--as-tok)}.as-tok--cat-8{--as-tok: var(--hm-data-categorical-8);background:var(--as-tok)}.as-label{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--as-tok, var(--hm-border)) 18%,var(--hm-surface-raised));color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-label:before{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-tok, var(--hm-border));content:\"\"}@media(forced-colors:active){.as-label{border:var(--hm-border-hairline) solid CanvasText}}.as-picker{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:15rem;max-inline-size:20rem}.as-picker__heading{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-picker__muted{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-picker__swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hm-space-xxxs)}.as-picker__swatch{display:inline-flex;align-items:center;justify-content:center;block-size:2rem;padding:0;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);color:var(--hm-surface-raised);cursor:pointer}.as-picker__swatch[aria-pressed=true]{outline:var(--hm-border-thin) solid var(--hm-text);outline-offset:1px}.as-picker__swatch:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:1px}.as-picker__swatch--small{block-size:1.5rem}.as-picker__list{display:flex;flex-direction:column;gap:var(--hm-space-micro);max-block-size:16rem;margin:0;padding:0;overflow-y:auto;list-style:none}.as-picker__person{display:flex;align-items:center;gap:var(--hm-space-xs);inline-size:100%;padding:var(--hm-space-micro) var(--hm-space-xxxs);border:0;border-radius:var(--hm-radius-control);background:none;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}.as-picker__person:hover{background:var(--hm-hover)}.as-picker__person:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-picker__person-text{display:flex;flex-direction:column;min-inline-size:0}.as-picker__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-picker__label-row{display:flex;align-items:center;gap:var(--hm-space-xs)}.as-picker__dot{flex:none;inline-size:.625rem;block-size:.625rem;border-radius:50%}\n"], dependencies: [{ kind: "component", type: AccountAvatarComponent, selector: "hm-account-avatar", inputs: ["name", "imageUrl", "size", "loading"] }, { kind: "component", type: SearchFieldComponent, selector: "hm-search-field", inputs: ["value", "label", "labelHidden", "placeholder", "hint", "size", "debounce", "landmark", "loading"], outputs: ["valueChange", "search", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SuggestionPeoplePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-suggestion-people-picker', imports: [AccountAvatarComponent, SearchFieldComponent], template: `
+    <div class="as-picker">
+      <hm-search-field [label]="text.peopleSearch" labelHidden [placeholder]="text.peopleSearch" [landmark]="false"
+                       [debounce]="250" [loading]="loading()" (search)="load($event)" />
+      <ul class="as-picker__list" [attr.aria-busy]="loading() ? 'true' : null">
+        @for (p of options(); track p.id) {
+          <li>
+            <button type="button" class="as-picker__person" (click)="picked.emit(p)">
+              <hm-account-avatar size="small" [name]="nameOf(p)" [imageUrl]="p.picture" />
+              <span class="as-picker__person-text">
+                <span class="as-picker__person-name">{{ nameOf(p) }}</span>
+                @if (p.username && p.name) { <span class="as-picker__muted">{{ p.username }}</span> }
+              </span>
+            </button>
+          </li>
+        } @empty {
+          @if (!loading()) { <li class="as-picker__muted">{{ text.peopleEmpty }}</li> }
+        }
+      </ul>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".as-tok--cat-1{--as-tok: var(--hm-data-categorical-1);background:var(--as-tok)}.as-tok--cat-2{--as-tok: var(--hm-data-categorical-2);background:var(--as-tok)}.as-tok--cat-3{--as-tok: var(--hm-data-categorical-3);background:var(--as-tok)}.as-tok--cat-4{--as-tok: var(--hm-data-categorical-4);background:var(--as-tok)}.as-tok--cat-5{--as-tok: var(--hm-data-categorical-5);background:var(--as-tok)}.as-tok--cat-6{--as-tok: var(--hm-data-categorical-6);background:var(--as-tok)}.as-tok--cat-7{--as-tok: var(--hm-data-categorical-7);background:var(--as-tok)}.as-tok--cat-8{--as-tok: var(--hm-data-categorical-8);background:var(--as-tok)}.as-label{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--as-tok, var(--hm-border)) 18%,var(--hm-surface-raised));color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-label:before{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-tok, var(--hm-border));content:\"\"}@media(forced-colors:active){.as-label{border:var(--hm-border-hairline) solid CanvasText}}.as-picker{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:15rem;max-inline-size:20rem}.as-picker__heading{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-picker__muted{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-picker__swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hm-space-xxxs)}.as-picker__swatch{display:inline-flex;align-items:center;justify-content:center;block-size:2rem;padding:0;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);color:var(--hm-surface-raised);cursor:pointer}.as-picker__swatch[aria-pressed=true]{outline:var(--hm-border-thin) solid var(--hm-text);outline-offset:1px}.as-picker__swatch:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:1px}.as-picker__swatch--small{block-size:1.5rem}.as-picker__list{display:flex;flex-direction:column;gap:var(--hm-space-micro);max-block-size:16rem;margin:0;padding:0;overflow-y:auto;list-style:none}.as-picker__person{display:flex;align-items:center;gap:var(--hm-space-xs);inline-size:100%;padding:var(--hm-space-micro) var(--hm-space-xxxs);border:0;border-radius:var(--hm-radius-control);background:none;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}.as-picker__person:hover{background:var(--hm-hover)}.as-picker__person:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-picker__person-text{display:flex;flex-direction:column;min-inline-size:0}.as-picker__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-picker__label-row{display:flex;align-items:center;gap:var(--hm-space-xs)}.as-picker__dot{flex:none;inline-size:.625rem;block-size:.625rem;border-radius:50%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { clientId: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientId", required: true }] }], exclude: [{ type: i0.Input, args: [{ isSignal: true, alias: "exclude", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }] } });
+/**
+ * Rótulos do catálogo do app: marcar/desmarcar (caixa por rótulo, o ponto na cor dele) e, quando o termo digitado não
+ * existe, "Criar o rótulo" com a cor escolhida.
+ */
+class SuggestionLabelPickerComponent {
+    constructor() {
+        this.text = inject(SPINE_MESSAGES).suggestions;
+        this.labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        this.selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.toggled = output();
+        this.created = output();
+        this.colors = TASK_LABEL_COLORS;
+        this.term = signal('', ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
+        this.color = signal('cat-1', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.shown = computed(() => {
+            const t = this.term().trim().toLocaleLowerCase();
+            return this.labels().filter((l) => !t || l.name.toLocaleLowerCase().includes(t));
+        }, ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+        /** Termo que ainda não é rótulo: dá para criar. */
+        this.creatable = computed(() => {
+            const t = this.term().trim().toLocaleLowerCase();
+            return !!t && t.length <= 40 && !this.labels().some((l) => l.name.toLocaleLowerCase() === t);
+        }, ...(ngDevMode ? [{ debugName: "creatable" }] : /* istanbul ignore next */ []));
+        this.createText = computed(() => formatMessage(this.text.createLabel, { name: this.term().trim() }), ...(ngDevMode ? [{ debugName: "createText" }] : /* istanbul ignore next */ []));
+    }
+    colorName(i) {
+        return formatMessage(this.text.labelColorName, { n: i + 1 });
+    }
+    create() {
+        const name = this.term().trim();
+        if (!name)
+            return;
+        this.created.emit({ name, color: this.color() });
+        this.term.set('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SuggestionLabelPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SuggestionLabelPickerComponent, isStandalone: true, selector: "spine-suggestion-label-picker", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled", created: "created" }, ngImport: i0, template: `
+    <div class="as-picker">
+      <hm-search-field [label]="text.labelFilter" labelHidden [placeholder]="text.labelFilter" [landmark]="false"
+                       [value]="term()" (valueChange)="term.set($event)" />
+      <ul class="as-picker__list">
+        @for (l of shown(); track l.id) {
+          <li class="as-picker__label-row">
+            <span class="as-picker__dot" [class]="'as-tok--' + l.color" aria-hidden="true"></span>
+            <hm-checkbox [label]="l.name" [checked]="selected().includes(l.id)" (checkedChange)="toggled.emit({ label: l, linked: $event })" />
+          </li>
+        } @empty {
+          @if (!creatable()) { <li class="as-picker__muted">{{ text.noLabels }}</li> }
+        }
+      </ul>
+      @if (creatable()) {
+        <span class="as-picker__heading">{{ text.labelColor }}</span>
+        <div class="as-picker__swatches">
+          @for (c of colors; track c; let i = $index) {
+            <button type="button" class="as-picker__swatch as-picker__swatch--small" [class]="'as-tok--' + c"
+                    [attr.aria-label]="colorName(i)" [attr.aria-pressed]="color() === c" (click)="color.set(c)"></button>
+          }
+        </div>
+        <hm-button size="small" emphasis="medium" icon="plus" (clicked)="create()">{{ createText() }}</hm-button>
+      }
+    </div>
+  `, isInline: true, styles: [".as-tok--cat-1{--as-tok: var(--hm-data-categorical-1);background:var(--as-tok)}.as-tok--cat-2{--as-tok: var(--hm-data-categorical-2);background:var(--as-tok)}.as-tok--cat-3{--as-tok: var(--hm-data-categorical-3);background:var(--as-tok)}.as-tok--cat-4{--as-tok: var(--hm-data-categorical-4);background:var(--as-tok)}.as-tok--cat-5{--as-tok: var(--hm-data-categorical-5);background:var(--as-tok)}.as-tok--cat-6{--as-tok: var(--hm-data-categorical-6);background:var(--as-tok)}.as-tok--cat-7{--as-tok: var(--hm-data-categorical-7);background:var(--as-tok)}.as-tok--cat-8{--as-tok: var(--hm-data-categorical-8);background:var(--as-tok)}.as-label{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--as-tok, var(--hm-border)) 18%,var(--hm-surface-raised));color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-label:before{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-tok, var(--hm-border));content:\"\"}@media(forced-colors:active){.as-label{border:var(--hm-border-hairline) solid CanvasText}}.as-picker{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:15rem;max-inline-size:20rem}.as-picker__heading{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-picker__muted{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-picker__swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hm-space-xxxs)}.as-picker__swatch{display:inline-flex;align-items:center;justify-content:center;block-size:2rem;padding:0;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);color:var(--hm-surface-raised);cursor:pointer}.as-picker__swatch[aria-pressed=true]{outline:var(--hm-border-thin) solid var(--hm-text);outline-offset:1px}.as-picker__swatch:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:1px}.as-picker__swatch--small{block-size:1.5rem}.as-picker__list{display:flex;flex-direction:column;gap:var(--hm-space-micro);max-block-size:16rem;margin:0;padding:0;overflow-y:auto;list-style:none}.as-picker__person{display:flex;align-items:center;gap:var(--hm-space-xs);inline-size:100%;padding:var(--hm-space-micro) var(--hm-space-xxxs);border:0;border-radius:var(--hm-radius-control);background:none;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}.as-picker__person:hover{background:var(--hm-hover)}.as-picker__person:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-picker__person-text{display:flex;flex-direction:column;min-inline-size:0}.as-picker__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-picker__label-row{display:flex;align-items:center;gap:var(--hm-space-xs)}.as-picker__dot{flex:none;inline-size:.625rem;block-size:.625rem;border-radius:50%}\n"], dependencies: [{ 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: CheckboxComponent, selector: "hm-checkbox", inputs: ["label", "labelHidden", "checked", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: SearchFieldComponent, selector: "hm-search-field", inputs: ["value", "label", "labelHidden", "placeholder", "hint", "size", "debounce", "landmark", "loading"], outputs: ["valueChange", "search", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SuggestionLabelPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-suggestion-label-picker', imports: [ButtonComponent, CheckboxComponent, SearchFieldComponent], template: `
+    <div class="as-picker">
+      <hm-search-field [label]="text.labelFilter" labelHidden [placeholder]="text.labelFilter" [landmark]="false"
+                       [value]="term()" (valueChange)="term.set($event)" />
+      <ul class="as-picker__list">
+        @for (l of shown(); track l.id) {
+          <li class="as-picker__label-row">
+            <span class="as-picker__dot" [class]="'as-tok--' + l.color" aria-hidden="true"></span>
+            <hm-checkbox [label]="l.name" [checked]="selected().includes(l.id)" (checkedChange)="toggled.emit({ label: l, linked: $event })" />
+          </li>
+        } @empty {
+          @if (!creatable()) { <li class="as-picker__muted">{{ text.noLabels }}</li> }
+        }
+      </ul>
+      @if (creatable()) {
+        <span class="as-picker__heading">{{ text.labelColor }}</span>
+        <div class="as-picker__swatches">
+          @for (c of colors; track c; let i = $index) {
+            <button type="button" class="as-picker__swatch as-picker__swatch--small" [class]="'as-tok--' + c"
+                    [attr.aria-label]="colorName(i)" [attr.aria-pressed]="color() === c" (click)="color.set(c)"></button>
+          }
+        </div>
+        <hm-button size="small" emphasis="medium" icon="plus" (clicked)="create()">{{ createText() }}</hm-button>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".as-tok--cat-1{--as-tok: var(--hm-data-categorical-1);background:var(--as-tok)}.as-tok--cat-2{--as-tok: var(--hm-data-categorical-2);background:var(--as-tok)}.as-tok--cat-3{--as-tok: var(--hm-data-categorical-3);background:var(--as-tok)}.as-tok--cat-4{--as-tok: var(--hm-data-categorical-4);background:var(--as-tok)}.as-tok--cat-5{--as-tok: var(--hm-data-categorical-5);background:var(--as-tok)}.as-tok--cat-6{--as-tok: var(--hm-data-categorical-6);background:var(--as-tok)}.as-tok--cat-7{--as-tok: var(--hm-data-categorical-7);background:var(--as-tok)}.as-tok--cat-8{--as-tok: var(--hm-data-categorical-8);background:var(--as-tok)}.as-label{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--as-tok, var(--hm-border)) 18%,var(--hm-surface-raised));color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-label:before{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-tok, var(--hm-border));content:\"\"}@media(forced-colors:active){.as-label{border:var(--hm-border-hairline) solid CanvasText}}.as-picker{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:15rem;max-inline-size:20rem}.as-picker__heading{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-picker__muted{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-picker__swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hm-space-xxxs)}.as-picker__swatch{display:inline-flex;align-items:center;justify-content:center;block-size:2rem;padding:0;border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);color:var(--hm-surface-raised);cursor:pointer}.as-picker__swatch[aria-pressed=true]{outline:var(--hm-border-thin) solid var(--hm-text);outline-offset:1px}.as-picker__swatch:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:1px}.as-picker__swatch--small{block-size:1.5rem}.as-picker__list{display:flex;flex-direction:column;gap:var(--hm-space-micro);max-block-size:16rem;margin:0;padding:0;overflow-y:auto;list-style:none}.as-picker__person{display:flex;align-items:center;gap:var(--hm-space-xs);inline-size:100%;padding:var(--hm-space-micro) var(--hm-space-xxxs);border:0;border-radius:var(--hm-radius-control);background:none;color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}.as-picker__person:hover{background:var(--hm-hover)}.as-picker__person:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-picker__person-text{display:flex;flex-direction:column;min-inline-size:0}.as-picker__person-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-picker__label-row{display:flex;align-items:center;gap:var(--hm-space-xs)}.as-picker__dot{flex:none;inline-size:.625rem;block-size:.625rem;border-radius:50%}\n"] }]
+        }], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], created: [{ type: i0.Output, args: ["created"] }] } });
+
+const EVENTS_PAGE = 20;
+/** Copia para a área de transferência; false se o navegador recusar. */
+async function copyText(value) {
+    try {
+        await navigator.clipboard.writeText(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * A tarefa aberta (modal grande, duas colunas, como os quadros de tarefas conhecidos), montada pelo quadro.
+ *
+ * - **Esquerda**: título editável no lugar (Enter salva, Esc desiste), descrição em `hm-rich-text` (ler; "Editar"
+ *   abre o editor e "Salvar" grava o HTML, que o servidor saneia), checklist (marcar, renomear, subir/descer, remover,
+ *   "Mostrar no cartão") e as abas Comentários e Atividades (do mais novo, "Carregar mais"). Comentário é texto simples
+ *   e pode ser interno (só a equipe vê; quem pediu não lê em "Minhas sugestões").
+ * - **Direita**: status, tipo, responsáveis ("Atribuir a mim") e envolvidos (busca de pessoas do realm, com foto),
+ *   relator, prioridade, início e conclusão, rótulos (catálogo do app; cria na hora), capa, tela de origem ("Abrir a
+ *   tela" quando o app administrado é o desta sessão), apoios, criada/atualizada e "Última alteração há X por Fulano";
+ *   a chave com copiar; arquivar/restaurar e excluir (com confirmação).
+ * - **Agrupar**: "Relatores" (o autor e quem veio das agrupadas, com foto) no lugar do relator; "Agrupadas aqui" (chave,
+ *   título e autor de cada origem, com link e "Desagrupar"); "Agrupar em…" pede o seletor ao quadro (`mergeRequested`).
+ *   Na agrupada, o aviso "Agrupada em SUG-12" no topo, com "Abrir SUG-12" (`openTask`) e "Desagrupar" (`unmerged`).
+ * - **Nova tarefa** (`task` nulo, `draft`): título, tipo, coluna, prioridade, datas, descrição, rótulos e "Atribuir a
+ *   mim"; criar troca para a tarefa completa.
+ *
+ * Toda mudança vai direto ao servidor, que devolve a tarefa inteira: ela vira a nova verdade aqui (`taskChange`) e no
+ * quadro (`changed`).
+ */
+class SuggestionTaskDetailComponent {
+    constructor() {
+        this.messages = inject(SPINE_MESSAGES);
+        this.text = this.messages.suggestions;
+        this.service = inject(AutoServiceSuggestionsService);
+        this.toast = inject(HermesToastService);
+        this.dialogs = inject(HermesDialogService);
+        this.preferences = inject(SpinePreferencesService);
+        this.userStorage = inject(SpineUserStorage, { optional: true });
+        this.router = inject(Router, { optional: true });
+        this.location = inject(Location, { optional: true });
+        this.clientId = input.required(...(ngDevMode ? [{ debugName: "clientId" }] : /* istanbul ignore next */ []));
+        /** A tarefa aberta (leve, do quadro: a completa chega do servidor). null + `draft` = nova tarefa. */
+        this.task = input(null, ...(ngDevMode ? [{ debugName: "task" }] : /* istanbul ignore next */ []));
+        this.draft = input(false, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+        /** Coluna da nova tarefa. */
+        this.draftStatus = input('em_analise', ...(ngDevMode ? [{ debugName: "draftStatus" }] : /* istanbul ignore next */ []));
+        this.labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        /** A tela da sugestão abre daqui (o app administrado é o desta sessão). */
+        this.canOpenScreen = input(false, ...(ngDevMode ? [{ debugName: "canOpenScreen" }] : /* istanbul ignore next */ []));
+        /** A tarefa mudou (o servidor devolveu a nova versão). */
+        this.changed = output();
+        this.created = output();
+        this.removed = output();
+        this.closed = output();
+        /** Um rótulo novo entrou no catálogo. */
+        this.labelCreated = output();
+        /** "Agrupar em…": o quadro fecha este modal e abre o seletor. */
+        this.mergeRequested = output();
+        /** Abrir outra tarefa pelo id (o destino de uma agrupada, uma das agrupadas). */
+        this.openTask = output();
+        /** Desagrupou (daqui): o quadro relê, a origem volta para ele. */
+        this.unmerged = output();
+        this.statuses = SPINE_SUGGESTION_STATUSES;
+        this.statusColors = SPINE_SUGGESTION_STATUS_COLORS;
+        this.waitingValues = SPINE_SUGGESTION_WAITING;
+        this.waitingColors = SPINE_SUGGESTION_WAITING_COLORS;
+        this.kinds = SPINE_SUGGESTION_KINDS;
+        this.kindColors = SPINE_SUGGESTION_KIND_COLORS;
+        this.priorities = TASK_PRIORITIES;
+        this.priorityIcons = TASK_PRIORITY_ICONS;
+        this.limits = SPINE_SUGGESTION_LIMITS;
+        this.today = todayIso(this.preferences.effectiveTimeZone());
+        this.current = signal(null, ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+        this.loadError = signal('', ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.open = computed(() => !!this.current() || this.draft(), ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.heading = computed(() => {
+            const t = this.current();
+            return t ? `${t.key} · ${t.title}` : this.text.newTaskHeading;
+        }, ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+        // título e descrição
+        this.editingTitle = signal(false, ...(ngDevMode ? [{ debugName: "editingTitle" }] : /* istanbul ignore next */ []));
+        this.titleDraft = signal('', ...(ngDevMode ? [{ debugName: "titleDraft" }] : /* istanbul ignore next */ []));
+        this.editingDescription = signal(false, ...(ngDevMode ? [{ debugName: "editingDescription" }] : /* istanbul ignore next */ []));
+        this.descriptionDraft = signal('', ...(ngDevMode ? [{ debugName: "descriptionDraft" }] : /* istanbul ignore next */ []));
+        // checklist
+        this.newItem = signal('', ...(ngDevMode ? [{ debugName: "newItem" }] : /* istanbul ignore next */ []));
+        this.renaming = signal(null, ...(ngDevMode ? [{ debugName: "renaming" }] : /* istanbul ignore next */ []));
+        this.renameDraft = signal('', ...(ngDevMode ? [{ debugName: "renameDraft" }] : /* istanbul ignore next */ []));
+        // comentários e atividades
+        /** Resumo (descrição e checklist), Comentários (a conversa com quem pediu) e Histórico (tudo o que mudou). */
+        this.tab = signal('summary', ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
+        this.comments = signal([], ...(ngDevMode ? [{ debugName: "comments" }] : /* istanbul ignore next */ []));
+        this.commentsTotal = signal(0, ...(ngDevMode ? [{ debugName: "commentsTotal" }] : /* istanbul ignore next */ []));
+        this.activity = signal([], ...(ngDevMode ? [{ debugName: "activity" }] : /* istanbul ignore next */ []));
+        this.activityTotal = signal(0, ...(ngDevMode ? [{ debugName: "activityTotal" }] : /* istanbul ignore next */ []));
+        this.eventsLoading = signal(false, ...(ngDevMode ? [{ debugName: "eventsLoading" }] : /* istanbul ignore next */ []));
+        this.chat = viewChild(SpineSuggestionChatComponent, ...(ngDevMode ? [{ debugName: "chat" }] : /* istanbul ignore next */ []));
+        /**
+         * A aba Comentários como chat (do mais antigo ao mais novo; a lista vem do mais novo). À direita, o que a pessoa
+         * escreveu como equipe; o que ela escreveu como quem pede (pela página) fica à esquerda, como os outros.
+         */
+        this.chatItems = computed(() => [...this.comments()].reverse().map((e) => ({
+            id: e.id, text: e.comment ?? '', created_at: e.created_at, author: e.actor, from_requester: !!e.from_requester,
+            internal: !!e.internal, status: e.kind === 'status' && e.to_status !== 'nova' ? e.to_status : null,
+        })), ...(ngDevMode ? [{ debugName: "chatItems" }] : /* istanbul ignore next */ []));
+        /** As abas de eventos já lidas desta tarefa (vazia também conta: trocar de aba não relê). */
+        this.loadedTabs = new Set();
+        this.comment = signal('', ...(ngDevMode ? [{ debugName: "comment" }] : /* istanbul ignore next */ []));
+        this.commentInternal = signal(false, ...(ngDevMode ? [{ debugName: "commentInternal" }] : /* istanbul ignore next */ []));
+        this.commentError = signal('', ...(ngDevMode ? [{ debugName: "commentError" }] : /* istanbul ignore next */ []));
+        this.commenting = signal(false, ...(ngDevMode ? [{ debugName: "commenting" }] : /* istanbul ignore next */ []));
+        // nova tarefa
+        this.draftTitle = signal('', ...(ngDevMode ? [{ debugName: "draftTitle" }] : /* istanbul ignore next */ []));
+        this.draftTitleError = signal('', ...(ngDevMode ? [{ debugName: "draftTitleError" }] : /* istanbul ignore next */ []));
+        this.draftKind = signal('melhoria', ...(ngDevMode ? [{ debugName: "draftKind" }] : /* istanbul ignore next */ []));
+        this.draftColumn = signal('em_analise', ...(ngDevMode ? [{ debugName: "draftColumn" }] : /* istanbul ignore next */ []));
+        this.draftPriority = signal('media', ...(ngDevMode ? [{ debugName: "draftPriority" }] : /* istanbul ignore next */ []));
+        this.draftStart = signal(null, ...(ngDevMode ? [{ debugName: "draftStart" }] : /* istanbul ignore next */ []));
+        this.draftDue = signal(null, ...(ngDevMode ? [{ debugName: "draftDue" }] : /* istanbul ignore next */ []));
+        this.draftDescription = signal('', ...(ngDevMode ? [{ debugName: "draftDescription" }] : /* istanbul ignore next */ []));
+        this.draftLabels = signal([], ...(ngDevMode ? [{ debugName: "draftLabels" }] : /* istanbul ignore next */ []));
+        this.draftAssignMe = signal(true, ...(ngDevMode ? [{ debugName: "draftAssignMe" }] : /* istanbul ignore next */ []));
+        this.selectedLabels = computed(() => this.current()?.labels.map((l) => l.id) ?? this.draftLabels(), ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
+        this.assigneeIds = computed(() => this.current()?.assignees.map((p) => p.user_id) ?? [], ...(ngDevMode ? [{ debugName: "assigneeIds" }] : /* istanbul ignore next */ []));
+        this.watcherIds = computed(() => this.current()?.watchers.map((p) => p.user_id) ?? [], ...(ngDevMode ? [{ debugName: "watcherIds" }] : /* istanbul ignore next */ []));
+        this.checklistItems = computed(() => [...(this.current()?.checklist.items ?? [])].sort((a, b) => a.position - b.position), ...(ngDevMode ? [{ debugName: "checklistItems" }] : /* istanbul ignore next */ []));
+        this.dueSituation = computed(() => {
+            const t = this.current();
+            return t ? dueState(t, this.today) : null;
+        }, ...(ngDevMode ? [{ debugName: "dueSituation" }] : /* istanbul ignore next */ []));
+        this.isMine = computed(() => {
+            const me = this.me();
+            return !!me && this.assigneeIds().includes(me);
+        }, ...(ngDevMode ? [{ debugName: "isMine" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const task = this.task();
+            const draft = this.draft();
+            untracked(() => {
+                this.reset();
+                if (task)
+                    void this.load(task);
+                else if (draft)
+                    this.startDraft();
+            });
+        });
+    }
+    me() {
+        return this.userStorage?.userId() ?? '';
+    }
+    reset() {
+        this.current.set(null);
+        this.loadError.set('');
+        this.editingTitle.set(false);
+        this.editingDescription.set(false);
+        this.renaming.set(null);
+        this.newItem.set('');
+        this.comments.set([]);
+        this.activity.set([]);
+        this.commentsTotal.set(0);
+        this.activityTotal.set(0);
+        this.comment.set('');
+        this.commentInternal.set(false);
+        this.commentError.set('');
+        this.tab.set('summary');
+        this.loadedTabs.clear();
+    }
+    startDraft() {
+        this.draftTitle.set('');
+        this.draftTitleError.set('');
+        this.draftKind.set('melhoria');
+        this.draftColumn.set(this.draftStatus());
+        this.draftPriority.set('media');
+        this.draftStart.set(null);
+        this.draftDue.set(null);
+        this.draftDescription.set('');
+        this.draftLabels.set([]);
+        this.draftAssignMe.set(true);
+    }
+    async load(light) {
+        this.current.set(light);
+        try {
+            const full = await this.service.task(this.clientId(), light.id);
+            if (this.task()?.id !== light.id)
+                return;
+            this.current.set({ ...full, author: full.author ?? light.author });
+            void this.loadEvents('comments', true);
+            if (full.unread || light.unread)
+                this.markRead({ ...full, author: full.author ?? light.author });
+        }
+        catch {
+            this.loadError.set(this.text.loadError);
+        }
+    }
+    setOpen(open) {
+        if (!open)
+            this.closed.emit();
+    }
+    /** Aplica a versão do servidor aqui e avisa o quadro. */
+    apply(task) {
+        const prev = this.current();
+        const next = { ...task, author: task.author ?? prev?.author ?? null };
+        this.current.set(next);
+        this.changed.emit(next);
+    }
+    /** Roda uma mudança no servidor; erro = aviso no canto. */
+    async run(call, success) {
+        if (this.busy())
+            return false;
+        this.busy.set(true);
+        try {
+            this.apply(await call());
+            if (success)
+                this.toast.success(success);
+            if (this.tab() === 'activity')
+                void this.loadEvents('activity', true);
+            return true;
+        }
+        catch {
+            this.toast.error(this.text.saveError);
+            return false;
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    edit(patch) {
+        const t = this.current();
+        return t ? this.run(() => this.service.update(this.clientId(), t.id, patch)) : Promise.resolve(false);
+    }
+    // --- título e descrição ---
+    startTitle() {
+        this.titleDraft.set(this.current()?.title ?? '');
+        this.editingTitle.set(true);
+    }
+    async saveTitle() {
+        const title = this.titleDraft().trim();
+        if (!title || title === this.current()?.title) {
+            this.editingTitle.set(false);
+            return;
+        }
+        if (await this.edit({ title }))
+            this.editingTitle.set(false);
+    }
+    onTitleKey(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            void this.saveTitle();
+        }
+        else if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.editingTitle.set(false);
+        }
+    }
+    startDescription() {
+        this.descriptionDraft.set(this.current()?.description_html ?? '');
+        this.editingDescription.set(true);
+    }
+    async saveDescription() {
+        if (await this.edit({ description_html: this.descriptionDraft() }))
+            this.editingDescription.set(false);
+    }
+    // --- campos da direita ---
+    /** Abrir a tarefa lê a conversa: zera o "N novas" (aqui e no quadro); falhar não atrapalha. */
+    markRead(t) {
+        const read = { ...t, unread: 0 };
+        this.current.set(read);
+        this.changed.emit(read);
+        this.service.markRead(this.clientId(), t.id).catch(() => undefined);
+    }
+    /** Com quem está a vez (o servidor também muda sozinho: comentário público da equipe = quem pediu; resposta = equipe). */
+    changeWaiting(value) {
+        const t = this.current();
+        const waiting = (value || null);
+        if (!t || waiting === (t.waiting_on ?? null))
+            return;
+        void this.edit({ waiting_on: waiting }).then((ok) => { if (ok)
+            this.toast.success(this.text.waitingSaved); });
+    }
+    /** Os rótulos na linha de selos, cada um com a cor do token ('cat-3' → 3). */
+    labelTags(t) {
+        return t.labels.map((l) => ({ id: l.id, name: l.name, color: Number(l.color.replace('cat-', '')) || undefined }));
+    }
+    unreadText(count) {
+        return pluralMessage(this.text.unread, count, this.messages.meta.locale);
+    }
+    changeStatus(status) {
+        const t = this.current();
+        if (!t || status === t.status)
+            return;
+        void this.run(() => this.service.move(this.clientId(), t.id, { status: status }), this.text.statusSaved);
+    }
+    changeKind(kind) {
+        if (kind !== this.current()?.kind)
+            void this.edit({ kind: kind });
+    }
+    changePriority(priority) {
+        if (priority !== this.current()?.priority)
+            void this.edit({ priority: priority });
+    }
+    changeDate(field, value) {
+        const t = this.current();
+        if (!t || (value || null) === t[field])
+            return;
+        void this.edit({ [field]: value || null });
+    }
+    toggleChecklistOnCard(on) {
+        if (on !== this.current()?.checklist_on_card)
+            void this.edit({ checklist_on_card: on });
+    }
+    assignMe() {
+        const t = this.current();
+        if (t)
+            void this.run(() => this.service.addPerson(this.clientId(), t.id, 'me', 'responsavel'), this.text.assignedToMe);
+    }
+    addPerson(person, role, popover) {
+        popover.close();
+        const t = this.current();
+        if (t)
+            void this.run(() => this.service.addPerson(this.clientId(), t.id, person.id, role));
+    }
+    removePerson(person, role) {
+        const t = this.current();
+        if (t)
+            void this.run(() => this.service.removePerson(this.clientId(), t.id, person.user_id, role));
+    }
+    toggleLabel(label, linked) {
+        const t = this.current();
+        if (!t) {
+            this.draftLabels.update((ids) => (linked ? [...new Set([...ids, label.id])] : ids.filter((id) => id !== label.id)));
+            return;
+        }
+        void this.run(() => this.service.setLabel(this.clientId(), t.id, label.id, linked));
+    }
+    async createLabel(name, color) {
+        try {
+            const label = await this.service.createLabel(this.clientId(), name, color);
+            const entry = { ...label, uses: 0 };
+            this.labelCreated.emit(entry);
+            this.toggleLabel(entry, true);
+        }
+        catch {
+            this.toast.error(this.text.saveError);
+        }
+    }
+    async copyKey() {
+        const t = this.current();
+        if (!t)
+            return;
+        if (await copyText(t.key))
+            this.toast.success(this.text.keyCopied);
+        else
+            this.toast.error(this.text.copyError);
+    }
+    screenHref(path) {
+        return this.location?.prepareExternalUrl(path) ?? path;
+    }
+    /** Clique simples navega no app (e fecha); com Ctrl/Cmd/Shift ou botão do meio, o navegador abre a aba. */
+    openScreen(event, path) {
+        if (!this.router || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)
+            return;
+        event.preventDefault();
+        this.closed.emit();
+        void this.router.navigateByUrl(path);
+    }
+    toggleArchived() {
+        const t = this.current();
+        if (!t)
+            return;
+        const archive = !t.archived_at;
+        void this.run(() => this.service.setArchived(this.clientId(), t.id, archive), archive ? this.text.archivedToast : this.text.restoredToast);
+    }
+    async remove() {
+        const t = this.current();
+        if (!t)
+            return;
+        const ok = await this.dialogs.confirm({
+            heading: formatMessage(this.text.deleteHeading, { key: t.key }), message: this.text.deleteMessage,
+            confirmLabel: this.text.deleteConfirm, danger: true,
+        });
+        if (!ok)
+            return;
+        try {
+            await this.service.remove(this.clientId(), t.id);
+            this.toast.success(this.text.deleted);
+            this.removed.emit(t);
+        }
+        catch {
+            this.toast.error(this.text.saveError);
+        }
+    }
+    // --- agrupar ---
+    /** Desagrupa esta (a agrupada): ela volta ao quadro. */
+    async unmergeSelf() {
+        const t = this.current();
+        if (!t?.merged_into || this.busy())
+            return;
+        if (await this.run(() => this.service.unmerge(this.clientId(), t.id), formatMessage(this.text.unmergedToast, { key: t.key }))) {
+            this.unmerged.emit();
+        }
+    }
+    /** Desagrupa uma das agrupadas nesta: relê esta (perde os relatores e apoios que vieram dela). */
+    async unmergeOrigin(origin) {
+        const t = this.current();
+        if (!t)
+            return;
+        const ok = await this.run(async () => {
+            await this.service.unmerge(this.clientId(), origin.id);
+            return this.service.task(this.clientId(), t.id);
+        }, formatMessage(this.text.unmergedToast, { key: origin.key }));
+        if (ok)
+            this.unmerged.emit();
+    }
+    /** Quem pediu: o autor e os relatores extras (do detalhe); sem a lista ainda, só o autor. */
+    reportersOf(t) {
+        if (t.reporters?.length)
+            return t.reporters;
+        return [{ ...(t.author ?? { user_id: '', username: null, name: null, picture: null }), role: 'author', from_suggestion_id: null }];
+    }
+    /** "Autor" ou "via SUG-30" (a agrupada de onde o relator veio). */
+    reporterHint(t, r) {
+        if (r.role === 'author')
+            return this.text.reporterAuthor;
+        const origin = t.merged?.find((m) => m.id === r.from_suggestion_id);
+        return origin ? formatMessage(this.text.reporterVia, { key: origin.key }) : '';
+    }
+    mergedIntoText(key) {
+        return formatMessage(this.text.mergedInto, { key });
+    }
+    openMergedText(key) {
+        return formatMessage(this.text.openMerged, { key });
+    }
+    unmergeLabel(key) {
+        return formatMessage(this.text.unmergeLabel, { key });
+    }
+    // --- checklist ---
+    addItem() {
+        const t = this.current();
+        const text = this.newItem().trim();
+        if (!t || !text)
+            return;
+        void this.run(() => this.service.addChecklistItem(this.clientId(), t.id, text)).then((ok) => ok && this.newItem.set(''));
+    }
+    onNewItemKey(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.addItem();
+        }
+    }
+    toggleItem(item, done) {
+        const t = this.current();
+        if (t && done !== item.done)
+            void this.run(() => this.service.updateChecklistItem(this.clientId(), t.id, item.id, { done }));
+    }
+    startRename(item) {
+        this.renaming.set(item.id);
+        this.renameDraft.set(item.text);
+    }
+    saveRename(item) {
+        const text = this.renameDraft().trim();
+        this.renaming.set(null);
+        const t = this.current();
+        if (t && text && text !== item.text)
+            void this.run(() => this.service.updateChecklistItem(this.clientId(), t.id, item.id, { text }));
+    }
+    onRenameKey(event, item) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.saveRename(item);
+        }
+        else if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.renaming.set(null);
+        }
+    }
+    moveItem(item, delta) {
+        const t = this.current();
+        const index = this.checklistItems().findIndex((i) => i.id === item.id);
+        const target = index + delta;
+        if (!t || index < 0 || target < 0 || target >= this.checklistItems().length)
+            return;
+        void this.run(() => this.service.updateChecklistItem(this.clientId(), t.id, item.id, { position: target }));
+    }
+    removeItem(item) {
+        const t = this.current();
+        if (t)
+            void this.run(() => this.service.removeChecklistItem(this.clientId(), t.id, item.id));
+    }
+    // --- comentários e atividades ---
+    selectTab(tab) {
+        const next = tab === 'activity' || tab === 'comments' ? tab : 'summary';
+        this.tab.set(next);
+        if (next === 'summary')
+            return;
+        if (!this.loadedTabs.has(next))
+            void this.loadEvents(next, true);
+    }
+    async loadEvents(type, reset) {
+        const t = this.current();
+        if (!t)
+            return;
+        const list = type === 'comments' ? this.comments : this.activity;
+        const total = type === 'comments' ? this.commentsTotal : this.activityTotal;
+        this.eventsLoading.set(true);
+        try {
+            const res = await this.service.events(this.clientId(), t.id, { type, limit: EVENTS_PAGE, offset: reset ? 0 : list().length });
+            if (this.current()?.id !== t.id)
+                return;
+            list.set(reset ? res.events : [...list(), ...res.events]);
+            total.set(res.total);
+            this.loadedTabs.add(type);
+        }
+        catch {
+            this.loadError.set(this.text.loadError);
+        }
+        finally {
+            this.eventsLoading.set(false);
+        }
+    }
+    async sendComment(text) {
+        const t = this.current();
+        const comment = (text ?? this.comment()).trim();
+        if (!t || this.commenting())
+            return;
+        this.commentError.set(comment ? '' : this.text.commentRequired);
+        if (!comment)
+            return;
+        this.commenting.set(true);
+        try {
+            const event = await this.service.comment(this.clientId(), t.id, comment, this.commentInternal());
+            this.comments.update((list) => [event, ...list]);
+            this.commentsTotal.update((n) => n + 1);
+            this.comment.set('');
+            this.commentInternal.set(false);
+            const updated = {
+                ...t, comments_count: t.comments_count + 1,
+                last_activity: { at: event.created_at, actor: event.actor },
+                ...(event.internal ? {} : { last_comment: { comment: event.comment ?? comment, created_at: event.created_at } }),
+                ...(event.internal || t.status === 'concluida' || t.status === 'recusada'
+                    ? {} : { waiting_on: 'solicitante', waiting_since: event.created_at }),
+            };
+            this.current.set(updated);
+            this.changed.emit(updated);
+            this.chat()?.scrollToEnd();
+        }
+        catch {
+            this.commentError.set(this.text.commentError);
+        }
+        finally {
+            this.commenting.set(false);
+        }
+    }
+    // --- nova tarefa ---
+    async create() {
+        const title = this.draftTitle().trim();
+        this.draftTitleError.set(title ? '' : this.text.titleRequired);
+        if (!title || this.busy())
+            return;
+        this.busy.set(true);
+        try {
+            const task = await this.service.create(this.clientId(), {
+                title, kind: this.draftKind(), status: this.draftColumn(),
+                priority: this.draftPriority(), start_date: this.draftStart(), due_date: this.draftDue(),
+                description_html: this.draftDescription(), label_ids: this.draftLabels(),
+                people: this.draftAssignMe() ? [{ user_id: 'me', role: 'responsavel' }] : [],
+            });
+            this.toast.success(this.text.taskCreated);
+            this.created.emit(task);
+        }
+        catch {
+            this.toast.error(this.text.createError);
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    // --- textos ---
+    personName(p) {
+        return p?.name || p?.username || this.text.removedAuthor;
+    }
+    statusLabel(status) {
+        if (!status)
+            return '—';
+        return this.text.statuses[status] ?? this.text.legacyStatuses[status] ?? status;
+    }
+    /** O valor de um evento 'change' legível: prioridade e tipo pelo catálogo, data no formato local. */
+    valueText(field, value) {
+        if (!value)
+            return '—';
+        if (field === 'priority')
+            return this.text.priorities[value] ?? value;
+        if (field === 'kind')
+            return this.text.kinds[value] ?? value;
+        if (field === 'start_date' || field === 'due_date')
+            return this.day(value);
+        return value;
+    }
+    eventText(e) {
+        const actor = e.actor ? this.personName(e.actor) : this.text.someone;
+        if (e.kind === 'comment')
+            return formatMessage(this.text.eventComment, { actor });
+        if (e.kind === 'status')
+            return formatMessage(this.text.eventStatus, { actor, from: this.statusLabel(e.from_status), to: this.statusLabel(e.to_status) });
+        const field = e.field ?? 'other';
+        const removed = ['start_date', 'due_date', 'cover'].includes(field) && !e.to_value ? `${field}_removed` : field;
+        const template = this.text.activity[removed] ?? this.text.activity.other;
+        return formatMessage(template, { actor, from: this.valueText(e.field, e.from_value), to: this.valueText(e.field, e.to_value) });
+    }
+    lastChange(t) {
+        if (!t.last_activity)
+            return '';
+        const when = this.age(t.last_activity.at);
+        return t.last_activity.actor
+            ? formatMessage(this.text.lastChange, { when, actor: this.personName(t.last_activity.actor) })
+            : formatMessage(this.text.lastChangeNoActor, { when });
+    }
+    dueText(t) {
+        if (!t.due_date)
+            return '';
+        const s = this.dueSituation();
+        if (s === 'overdue')
+            return formatMessage(this.text.dueLate, { date: this.day(t.due_date) });
+        if (s === 'today')
+            return this.text.dueToday;
+        if (s === 'tomorrow')
+            return this.text.dueTomorrow;
+        return formatMessage(this.text.dueOn, { date: this.day(t.due_date) });
+    }
+    removePersonLabel(p) {
+        return formatMessage(this.text.removePerson, { name: this.personName(p) });
+    }
+    itemLabel(template, item) {
+        return formatMessage(template, { text: item.text });
+    }
+    age(iso) {
+        const seconds = Math.round((Date.now() - new Date(iso).getTime()) / 1000);
+        const units = [['year', 31_536_000], ['month', 2_592_000], ['week', 604_800], ['day', 86_400], ['hour', 3_600], ['minute', 60]];
+        try {
+            const rtf = new Intl.RelativeTimeFormat(this.messages.meta.locale, { numeric: 'auto' });
+            for (const [unit, size] of units)
+                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, withTime = false) {
+        try {
+            return new Intl.DateTimeFormat(this.messages.meta.locale, {
+                dateStyle: 'short', ...(withTime ? { timeStyle: 'short' } : {}), timeZone: this.preferences.effectiveTimeZone(),
+            }).format(new Date(iso));
+        }
+        catch {
+            return iso.slice(0, 10);
+        }
+    }
+    /** Data sem hora (AAAA-MM-DD), sem fuso: o dia é o dia. */
+    day(iso) {
+        try {
+            return new Intl.DateTimeFormat(this.messages.meta.locale, { dateStyle: 'short', timeZone: 'UTC' }).format(new Date(`${iso}T00:00:00Z`));
+        }
+        catch {
+            return iso;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SuggestionTaskDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SuggestionTaskDetailComponent, isStandalone: true, selector: "spine-suggestion-task-detail", inputs: { clientId: { classPropertyName: "clientId", publicName: "clientId", isSignal: true, isRequired: true, transformFunction: null }, task: { classPropertyName: "task", publicName: "task", isSignal: true, isRequired: false, transformFunction: null }, draft: { classPropertyName: "draft", publicName: "draft", isSignal: true, isRequired: false, transformFunction: null }, draftStatus: { classPropertyName: "draftStatus", publicName: "draftStatus", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, canOpenScreen: { classPropertyName: "canOpenScreen", publicName: "canOpenScreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", created: "created", removed: "removed", closed: "closed", labelCreated: "labelCreated", mergeRequested: "mergeRequested", openTask: "openTask", unmerged: "unmerged" }, viewQueries: [{ propertyName: "chat", first: true, predicate: SpineSuggestionChatComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<hm-modal [heading]=\"heading()\" [open]=\"open()\" (openChange)=\"setOpen($event)\" size=\"xlarge\">\n  @if (current(); as t) {\n    @if (loadError()) {\n      <hm-alert variant=\"error\">{{ loadError() }}</hm-alert>\n    }\n    <div class=\"as-task\">\n      <!-- Esquerda: o trabalho (t\u00EDtulo, descri\u00E7\u00E3o, checklist, conversa). -->\n      <div class=\"as-task__main\">\n        <div class=\"as-task__key-row\">\n          <span class=\"as-task__key\">{{ t.key }}</span>\n          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"copy\" [label]=\"text.copyKey\" (clicked)=\"copyKey()\" />\n          <hm-tag [name]=\"text.kinds[t.kind]\" [color]=\"kindColors[t.kind]\" />\n          @if (t.archived_at) { <hm-tag [name]=\"text.archivedTag\" /> }\n          @if (t.merged_into) { <hm-tag [name]=\"text.mergedTag\" color=\"info\" /> }\n        </div>\n\n        <!-- Agrupada: o destino tem os relatores e os apoios; os coment\u00E1rios ficam aqui. -->\n        @if (t.merged_into; as into) {\n          <div class=\"as-task__merged\">\n            <hm-icon class=\"as-task__merged-icon\" shape=\"layers\" />\n            <div class=\"as-task__merged-text\">\n              <strong>{{ mergedIntoText(into.key) }}</strong>\n              <span>{{ into.title }}</span>\n              <span class=\"as-field__hint\">{{ text.mergedIntoHint }}</span>\n            </div>\n            <div class=\"as-actions\">\n              <hm-button size=\"small\" emphasis=\"medium\" (clicked)=\"openTask.emit(into.id)\">{{ openMergedText(into.key) }}</hm-button>\n              <hm-button size=\"small\" emphasis=\"minimal\" icon=\"unlink\" [disabled]=\"busy()\" (clicked)=\"unmergeSelf()\">{{ text.unmerge }}</hm-button>\n            </div>\n          </div>\n        }\n\n        @if (editingTitle()) {\n          <hm-input [label]=\"text.title\" labelHidden [maxLength]=\"limits.title\" [value]=\"titleDraft()\"\n                    (valueChange)=\"titleDraft.set($event)\" (keydown)=\"onTitleKey($event)\" (focusout)=\"saveTitle()\" />\n        } @else {\n          <h2 class=\"as-task__title\">\n            <button type=\"button\" class=\"as-task__title-button\" [attr.aria-label]=\"text.editTitle + ': ' + t.title\" (click)=\"startTitle()\">\n              {{ t.title }}<hm-icon class=\"as-task__title-pen\" shape=\"pencil\" />\n            </button>\n          </h2>\n        }\n        <p class=\"as-task__dates\">\n          <span>{{ text.createdAt }} {{ date(t.created_at, true) }}</span>\n          <span aria-hidden=\"true\">\u00B7</span>\n          <span>{{ text.updatedAt }} {{ date(t.updated_at, true) }}</span>\n          @if (lastChange(t); as change) {\n            <span aria-hidden=\"true\">\u00B7</span>\n            <span>{{ change }}</span>\n          }\n        </p>\n\n        <!-- Abas: Resumo (descri\u00E7\u00E3o e checklist), Coment\u00E1rios (a conversa com quem pediu) e Hist\u00F3rico (tudo o que mudou). -->\n        <hm-tabs [label]=\"text.taskLabel\" [active]=\"tab()\" (activeChange)=\"selectTab($event)\">\n          <hm-tab id=\"summary\" [label]=\"text.tabSummary\">\n            <div class=\"as-task__summary\">\n              <section class=\"as-task__section\" aria-labelledby=\"as-task-description\">\n                <div class=\"as-task__section-head\">\n                  <h3 id=\"as-task-description\" class=\"as-task__heading\">{{ text.description }}</h3>\n                  @if (!editingDescription()) {\n                    <hm-button size=\"small\" emphasis=\"minimal\" icon=\"pencil\" (clicked)=\"startDescription()\">{{ text.editDescription }}</hm-button>\n                  }\n                </div>\n                @if (editingDescription()) {\n                  <hm-rich-text [label]=\"text.description\" labelHidden [rows]=\"6\" [maxRows]=\"20\" [value]=\"descriptionDraft()\"\n                                (valueChange)=\"descriptionDraft.set($event)\" />\n                  <div class=\"as-actions\">\n                    <hm-button emphasis=\"medium\" (clicked)=\"editingDescription.set(false)\">{{ text.cancel }}</hm-button>\n                    <hm-button [loading]=\"busy()\" (clicked)=\"saveDescription()\">{{ text.save }}</hm-button>\n                  </div>\n                } @else if (t.description_html) {\n                  <hm-rich-text class=\"as-task__description\" [label]=\"text.description\" labelHidden readonly hideToolbar [value]=\"t.description_html\" />\n                } @else {\n                  <p class=\"muted\">{{ text.noDescription }}</p>\n                }\n              </section>\n      \n              <section class=\"as-task__section\" aria-labelledby=\"as-task-checklist\">\n                <div class=\"as-task__section-head\">\n                  <h3 id=\"as-task-checklist\" class=\"as-task__heading\">\n                    {{ text.checklist }}\n                    @if (t.checklist.total) {\n                      <span class=\"as-task__count\">{{ t.checklist.done }}/{{ t.checklist.total }}</span>\n                      <span class=\"as-task__progress\" role=\"progressbar\" aria-valuemin=\"0\" [attr.aria-valuemax]=\"t.checklist.total\"\n                            [attr.aria-valuenow]=\"t.checklist.done\" [attr.aria-label]=\"text.checklist\">\n                        <span [style.inline-size.%]=\"(t.checklist.done / t.checklist.total) * 100\"></span>\n                      </span>\n                    }\n                  </h3>\n                  <hm-switch [label]=\"text.checklistOnCard\" [value]=\"t.checklist_on_card\" (valueChange)=\"toggleChecklistOnCard($event)\" />\n                </div>\n                <ul class=\"as-checklist\">\n                  @for (item of checklistItems(); track item.id; let first = $first; let last = $last) {\n                    <li class=\"as-checklist__item\" [class.as-checklist__item--done]=\"item.done\">\n                      @if (renaming() === item.id) {\n                        <hm-input class=\"as-checklist__rename\" [label]=\"text.checklist\" labelHidden [maxLength]=\"500\" [value]=\"renameDraft()\"\n                                  (valueChange)=\"renameDraft.set($event)\" (keydown)=\"onRenameKey($event, item)\" (focusout)=\"saveRename(item)\" />\n                      } @else {\n                        <hm-checkbox class=\"as-checklist__check\" [label]=\"item.text\" [checked]=\"item.done\" (checkedChange)=\"toggleItem(item, $event)\" />\n                        <span class=\"as-checklist__tools\">\n                          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"pencil\" [label]=\"text.editTitle + ': ' + item.text\" (clicked)=\"startRename(item)\" />\n                          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"angle-up\" [label]=\"itemLabel(text.checklistUp, item)\" [disabled]=\"first\" (clicked)=\"moveItem(item, -1)\" />\n                          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"angle-down\" [label]=\"itemLabel(text.checklistDown, item)\" [disabled]=\"last\" (clicked)=\"moveItem(item, 1)\" />\n                          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"trash\" [label]=\"itemLabel(text.checklistRemove, item)\" (clicked)=\"removeItem(item)\" />\n                        </span>\n                      }\n                    </li>\n                  } @empty {\n                    <li class=\"muted\">{{ text.checklistEmpty }}</li>\n                  }\n                </ul>\n                <div class=\"as-checklist__add\">\n                  <hm-input class=\"as-checklist__new\" [label]=\"text.checklistAdd\" labelHidden [placeholder]=\"text.checklistPlaceholder\"\n                            [maxLength]=\"500\" [value]=\"newItem()\" (valueChange)=\"newItem.set($event)\" (keydown)=\"onNewItemKey($event)\" />\n                  <hm-button emphasis=\"medium\" icon=\"plus\" [disabled]=\"!newItem().trim()\" (clicked)=\"addItem()\">{{ text.checklistAdd }}</hm-button>\n                </div>\n              </section>\n            </div>\n          </hm-tab>\n          <hm-tab id=\"comments\" [label]=\"text.tabComments\" [count]=\"commentsTotal() || null\">\n            <!-- A conversa em chat: \u00E0 direita o que a pessoa escreveu como equipe; quem pediu (inclusive ela mesma pela\n                 p\u00E1gina de quem pede) \u00E0 esquerda, com o papel no cabe\u00E7alho. O \"S\u00F3 para a equipe\" vai junto do Enviar. -->\n            <spine-suggestion-chat class=\"as-task__chat\" side=\"equipe\" [me]=\"me()\" [items]=\"chatItems()\"\n                                   [label]=\"text.tabComments\" [empty]=\"text.commentsEmpty\"\n                                   [hasMore]=\"comments().length < commentsTotal()\" [loading]=\"eventsLoading()\"\n                                   [composerLabel]=\"text.comment\" [placeholder]=\"commentInternal() ? text.commentInternal : text.commentHint\"\n                                   [sendLabel]=\"text.commentSend\" [sending]=\"commenting()\" [error]=\"commentError()\"\n                                   [(draft)]=\"comment\" (loadHistory)=\"loadEvents('comments', false)\" (send)=\"sendComment($event)\">\n              <hm-checkbox spineChatComposer [label]=\"text.commentInternal\" [checked]=\"commentInternal()\"\n                           (checkedChange)=\"commentInternal.set($event)\" />\n            </spine-suggestion-chat>\n          </hm-tab>\n          <hm-tab id=\"activity\" [label]=\"text.tabActivity\">\n            <ol class=\"as-timeline\">\n              @for (e of activity(); track e.id) {\n                <li class=\"as-timeline__item\">\n                  <hm-account-avatar class=\"as-timeline__face\" size=\"small\" [name]=\"e.actor ? personName(e.actor) : text.someone\" [imageUrl]=\"e.actor?.picture\" />\n                  <div class=\"as-timeline__body\">\n                    <span class=\"as-timeline__line\">{{ eventText(e) }} \u00B7\n                      <time class=\"muted\" [attr.datetime]=\"e.created_at\" [attr.title]=\"date(e.created_at, true)\">{{ age(e.created_at) }}</time>\n                    </span>\n                    @if (e.comment) {\n                      <p class=\"as-timeline__comment\" [class.as-timeline__comment--internal]=\"e.internal\">{{ e.comment }}</p>\n                    }\n                  </div>\n                </li>\n              } @empty {\n                @if (!eventsLoading()) { <li class=\"muted\">{{ text.activityEmpty }}</li> }\n              }\n            </ol>\n            @if (activity().length < activityTotal()) {\n              <hm-button emphasis=\"medium\" [loading]=\"eventsLoading()\" (clicked)=\"loadEvents('activity', false)\">{{ text.loadMore }}</hm-button>\n            }\n          </hm-tab>\n        </hm-tabs>\n      </div>\n\n      <!-- Direita: os campos da tarefa (cada mudan\u00E7a grava na hora). -->\n      <aside class=\"as-task__side\" [attr.aria-label]=\"text.taskLabel\">\n        <hm-select [label]=\"text.status\" [value]=\"t.status\" [disabled]=\"busy()\" (valueChange)=\"changeStatus($any($event))\">\n          @for (st of statuses; track st) { <option [value]=\"st\">{{ text.statuses[st] }}</option> }\n        </hm-select>\n        <!-- A conversa com quem pede: com quem est\u00E1 a vez (muda sozinho a cada mensagem; aqui d\u00E1 para acertar). -->\n        <hm-select [label]=\"text.menuWaiting\" [value]=\"t.waiting_on ?? ''\" [disabled]=\"busy()\" (valueChange)=\"changeWaiting($any($event))\">\n          <option value=\"\">{{ text.waitingClear }}</option>\n          @for (w of waitingValues; track w) { <option [value]=\"w\">{{ text.waiting[w] }}</option> }\n        </hm-select>\n\n        <div class=\"as-field\">\n          <div class=\"as-field__head\">\n            <span class=\"as-field__label\">{{ text.assignees }}</span>\n            @if (!isMine()) {\n              <hm-button size=\"small\" emphasis=\"minimal\" icon=\"user-plus\" (clicked)=\"assignMe()\">{{ text.assignMe }}</hm-button>\n            }\n          </div>\n          <ul class=\"as-people\">\n            @for (p of t.assignees; track p.user_id) {\n              <li class=\"as-people__item\">\n                <hm-account-avatar size=\"small\" [name]=\"personName(p)\" [imageUrl]=\"p.picture\" />\n                <span class=\"as-people__name\">{{ personName(p) }}</span>\n                <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"trash\" [label]=\"removePersonLabel(p)\" (clicked)=\"removePerson(p, 'responsavel')\" />\n              </li>\n            } @empty {\n              <li class=\"muted\">{{ text.nobody }}</li>\n            }\n          </ul>\n          <hm-button size=\"small\" emphasis=\"minimal\" icon=\"plus\" [hmPopoverTrigger]=\"assigneePop\">{{ text.addAssignee }}</hm-button>\n          <hm-popover #assigneePop [label]=\"text.addAssignee\">\n            @if (assigneePop.open()) {\n              <spine-suggestion-people-picker [clientId]=\"clientId()\" [exclude]=\"assigneeIds()\" (picked)=\"addPerson($event, 'responsavel', assigneePop)\" />\n            }\n          </hm-popover>\n        </div>\n\n        <div class=\"as-field\">\n          <span class=\"as-field__label\">{{ text.watchers }}</span>\n          <ul class=\"as-people\">\n            @for (p of t.watchers; track p.user_id) {\n              <li class=\"as-people__item\">\n                <hm-account-avatar size=\"small\" [name]=\"personName(p)\" [imageUrl]=\"p.picture\" />\n                <span class=\"as-people__name\">{{ personName(p) }}</span>\n                <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"trash\" [label]=\"removePersonLabel(p)\" (clicked)=\"removePerson(p, 'envolvido')\" />\n              </li>\n            } @empty {\n              <li class=\"muted\">{{ text.nobody }}</li>\n            }\n          </ul>\n          <hm-button size=\"small\" emphasis=\"minimal\" icon=\"plus\" [hmPopoverTrigger]=\"watcherPop\">{{ text.addWatcher }}</hm-button>\n          <hm-popover #watcherPop [label]=\"text.addWatcher\">\n            @if (watcherPop.open()) {\n              <spine-suggestion-people-picker [clientId]=\"clientId()\" [exclude]=\"watcherIds()\" (picked)=\"addPerson($event, 'envolvido', watcherPop)\" />\n            }\n          </hm-popover>\n        </div>\n\n        <!-- Quem pediu: o autor e, numa que recebeu agrupadas, os relatores que vieram delas. -->\n        <div class=\"as-field\">\n          <span class=\"as-field__label\">{{ (t.reporters?.length ?? 0) > 1 ? text.reporters : text.reporter }}</span>\n          <ul class=\"as-people\">\n            @for (p of reportersOf(t); track p.user_id || $index) {\n              <li class=\"as-people__item\">\n                <hm-account-avatar size=\"small\" [name]=\"personName(p.user_id ? p : null)\" [imageUrl]=\"p.picture\" />\n                <span class=\"as-people__name\">{{ personName(p.user_id ? p : null) }}</span>\n                @if ((t.reporters?.length ?? 0) > 1 && reporterHint(t, p); as hint) {\n                  <span class=\"as-field__hint\">{{ hint }}</span>\n                }\n              </li>\n            }\n          </ul>\n          <span class=\"as-field__hint\">{{ t.origin === 'equipe' ? text.originTeam : text.originUser }}</span>\n        </div>\n\n        @if (t.merged?.length) {\n          <div class=\"as-field\">\n            <span class=\"as-field__label\">{{ text.mergedHere }}</span>\n            <ul class=\"as-merged\">\n              @for (m of t.merged; track m.id) {\n                <li class=\"as-merged__item\">\n                  <button type=\"button\" class=\"as-merged__link\" (click)=\"openTask.emit(m.id)\">\n                    <span class=\"as-task__key\">{{ m.key }}</span> {{ m.title }}\n                  </button>\n                  <span class=\"as-merged__author\">\n                    <hm-account-avatar size=\"small\" [name]=\"personName(m.author)\" [imageUrl]=\"m.author?.picture\" />\n                    {{ personName(m.author) }}\n                  </span>\n                  <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"unlink\" [label]=\"unmergeLabel(m.key)\"\n                                  [disabled]=\"busy()\" (clicked)=\"unmergeOrigin(m)\" />\n                </li>\n              }\n            </ul>\n          </div>\n        }\n\n        <hm-select [label]=\"text.priority\" [value]=\"t.priority\" [disabled]=\"busy()\" (valueChange)=\"changePriority($any($event))\">\n          @for (p of priorities; track p) { <option [value]=\"p\">{{ text.priorities[p] }}</option> }\n        </hm-select>\n        <hm-select [label]=\"text.kind\" [value]=\"t.kind\" [disabled]=\"busy()\" (valueChange)=\"changeKind($any($event))\">\n          @for (k of kinds; track k) { <option [value]=\"k\">{{ text.kinds[k] }}</option> }\n        </hm-select>\n        <div class=\"as-field__dates\">\n          <hm-date-picker [label]=\"text.startDate\" [value]=\"t.start_date\" [max]=\"$any(t.due_date)\" (valueChange)=\"changeDate('start_date', $event)\" />\n          <hm-date-picker [label]=\"text.dueDate\" [value]=\"t.due_date\" [min]=\"$any(t.start_date)\" (valueChange)=\"changeDate('due_date', $event)\" />\n        </div>\n        @if (t.due_date) {\n          <span class=\"as-due\" [attr.data-due]=\"dueSituation()\"><hm-icon shape=\"calendar\" />{{ dueText(t) }}</span>\n        }\n\n        <div class=\"as-field\">\n          <div class=\"as-field__head\">\n            <span class=\"as-field__label\">{{ text.labels }}</span>\n            <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"tag\" [label]=\"text.addLabel\" [hmPopoverTrigger]=\"labelPop\" />\n          </div>\n          <!-- Em linha, como os grupos: o que n\u00E3o cabe vira \"+N\" (cada r\u00F3tulo na cor dele). -->\n          <spine-tag-row [label]=\"text.labels\" [items]=\"labelTags(t)\" [empty]=\"text.noLabels\" />\n          <hm-popover #labelPop [label]=\"text.labels\">\n            @if (labelPop.open()) {\n              <spine-suggestion-label-picker [labels]=\"labels()\" [selected]=\"selectedLabels()\"\n                                             (toggled)=\"toggleLabel($event.label, $event.linked)\" (created)=\"createLabel($event.name, $event.color)\" />\n            }\n          </hm-popover>\n        </div>\n\n        <dl class=\"as-facts\">\n          <dt>{{ text.screenOrigin }}</dt>\n          <dd class=\"as-facts__screen\">\n            @if (t.screen.new) { <hm-tag [name]=\"text.newScreenTag\" color=\"info\" /> }\n            <span class=\"as-facts__screen-name\" [attr.title]=\"t.screen.label || null\">{{ t.screen.label || text.noScreen }}</span>\n            @if (t.screen.path && canOpenScreen()) {\n              <a class=\"as-facts__link\" [href]=\"screenHref(t.screen.path)\" [attr.aria-label]=\"text.openScreen\" [attr.title]=\"text.openScreen\"\n                 (click)=\"openScreen($event, t.screen.path)\"><hm-icon shape=\"pop-out\" /></a>\n            }\n          </dd>\n          <dt>{{ text.votesField }}</dt>\n          <dd>{{ t.votes }}</dd>\n        </dl>\n\n        <!-- Os grupos de quem pediu: em linha, no modelo dos r\u00F3tulos; o que n\u00E3o cabe vira \"+N\". -->\n        <div class=\"as-field\">\n          <span class=\"as-field__label\">{{ text.requestingGroups }}</span>\n          <spine-tag-row [label]=\"text.requestingGroups\" [items]=\"t.groups ?? []\" [empty]=\"text.noGroups\" />\n        </div>\n\n        <div class=\"as-task__danger\">\n          <!-- Sem cadeia: nem a agrupada nem a que recebeu outras v\u00E3o para dentro de outra. -->\n          @if (!t.merged_into && !t.merged_count) {\n            <hm-button size=\"small\" emphasis=\"medium\" icon=\"layers\" (clicked)=\"mergeRequested.emit(t)\">{{ text.menuMerge }}</hm-button>\n          }\n          <hm-button size=\"small\" emphasis=\"medium\" [icon]=\"t.archived_at ? 'unarchive' : 'archive'\" (clicked)=\"toggleArchived()\">\n            {{ t.archived_at ? text.menuRestore : text.menuArchive }}\n          </hm-button>\n          <hm-button size=\"small\" emphasis=\"medium\" intent=\"danger\" icon=\"trash\" (clicked)=\"remove()\">{{ text.menuDelete }}</hm-button>\n        </div>\n      </aside>\n    </div>\n  } @else if (draft()) {\n    <!-- Nova tarefa: o essencial; o resto (pessoas, checklist, conversa) assim que existir. -->\n    <div class=\"as-task\">\n      <div class=\"as-task__main\">\n        <hm-input [label]=\"text.title\" [placeholder]=\"text.addTaskPlaceholder\" [maxLength]=\"limits.title\" required\n                  [error]=\"draftTitleError()\" [value]=\"draftTitle()\" (valueChange)=\"draftTitle.set($event)\" />\n        <hm-rich-text [label]=\"text.description\" [rows]=\"6\" [maxRows]=\"20\" [value]=\"draftDescription()\" (valueChange)=\"draftDescription.set($event)\" />\n        <p class=\"as-field__hint\">{{ text.draftHint }}</p>\n      </div>\n      <aside class=\"as-task__side\" [attr.aria-label]=\"text.taskLabel\">\n        <hm-select [label]=\"text.status\" [value]=\"draftColumn()\" (valueChange)=\"draftColumn.set($any($event))\">\n          @for (st of statuses; track st) { <option [value]=\"st\">{{ text.statuses[st] }}</option> }\n        </hm-select>\n        <hm-select [label]=\"text.kind\" [value]=\"draftKind()\" (valueChange)=\"draftKind.set($any($event))\">\n          @for (k of kinds; track k) { <option [value]=\"k\">{{ text.kinds[k] }}</option> }\n        </hm-select>\n        <hm-select [label]=\"text.priority\" [value]=\"draftPriority()\" (valueChange)=\"draftPriority.set($any($event))\">\n          @for (p of priorities; track p) { <option [value]=\"p\">{{ text.priorities[p] }}</option> }\n        </hm-select>\n        <div class=\"as-field__dates\">\n          <hm-date-picker [label]=\"text.startDate\" [value]=\"draftStart()\" [max]=\"$any(draftDue())\" (valueChange)=\"draftStart.set($event)\" />\n          <hm-date-picker [label]=\"text.dueDate\" [value]=\"draftDue()\" [min]=\"$any(draftStart())\" (valueChange)=\"draftDue.set($event)\" />\n        </div>\n        <div class=\"as-field\">\n          <span class=\"as-field__label\">{{ text.labels }}</span>\n          <spine-suggestion-label-picker [labels]=\"labels()\" [selected]=\"draftLabels()\"\n                                         (toggled)=\"toggleLabel($event.label, $event.linked)\" (created)=\"createLabel($event.name, $event.color)\" />\n        </div>\n        <hm-checkbox [label]=\"text.assignMeOnCreate\" [checked]=\"draftAssignMe()\" (checkedChange)=\"draftAssignMe.set($event)\" />\n      </aside>\n    </div>\n  }\n\n  <div footer class=\"as-task__footer\">\n    @if (!current() && draft()) {\n      <hm-button emphasis=\"medium\" (clicked)=\"closed.emit()\">{{ text.cancel }}</hm-button>\n      <hm-button icon=\"plus\" [loading]=\"busy()\" (clicked)=\"create()\">{{ text.createTask }}</hm-button>\n    } @else {\n      <hm-button emphasis=\"medium\" (clicked)=\"closed.emit()\">{{ text.close }}</hm-button>\n    }\n  </div>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface-muted);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.as-tok--cat-1{--as-tok: var(--hm-data-categorical-1);background:var(--as-tok)}.as-tok--cat-2{--as-tok: var(--hm-data-categorical-2);background:var(--as-tok)}.as-tok--cat-3{--as-tok: var(--hm-data-categorical-3);background:var(--as-tok)}.as-tok--cat-4{--as-tok: var(--hm-data-categorical-4);background:var(--as-tok)}.as-tok--cat-5{--as-tok: var(--hm-data-categorical-5);background:var(--as-tok)}.as-tok--cat-6{--as-tok: var(--hm-data-categorical-6);background:var(--as-tok)}.as-tok--cat-7{--as-tok: var(--hm-data-categorical-7);background:var(--as-tok)}.as-tok--cat-8{--as-tok: var(--hm-data-categorical-8);background:var(--as-tok)}.as-label{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--as-tok, var(--hm-border)) 18%,var(--hm-surface-raised));color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-label:before{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-tok, var(--hm-border));content:\"\"}@media(forced-colors:active){.as-label{border:var(--hm-border-hairline) solid CanvasText}}.as-task{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,20rem);gap:var(--hm-space-lg);align-items:start}@media(max-width:48rem){.as-task{grid-template-columns:minmax(0,1fr)}}.as-task__main{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-task__key-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-task__key{color:var(--hm-muted);font-family:var(--hm-font-mono, monospace);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.as-task__title{margin:0;font-size:var(--hm-font-size-xl, 1.375rem)}.as-task__title-button{display:inline-flex;align-items:baseline;gap:var(--hm-space-xs);padding:0;border:0;background:none;color:var(--hm-text);font:inherit;font-weight:var(--hm-font-weight-bold);text-align:start;overflow-wrap:anywhere;cursor:text}.as-task__title-button:hover .as-task__title-pen,.as-task__title-button:focus-visible .as-task__title-pen{opacity:1}.as-task__title-button:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:2px}.as-task__dates{display:flex;flex-wrap:wrap;gap:var(--hm-space-micro) var(--hm-space-xxxs);margin:calc(var(--hm-space-sm) * -1) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-task__title-pen{color:var(--hm-muted);opacity:0;font-size:var(--hm-font-size-md)}.as-task__section{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-sm);border-radius:var(--hm-radius-control);background:var(--hm-surface-muted)}.as-task__section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs)}.as-task__heading{display:flex;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-task__count{color:var(--hm-muted);font-size:var(--hm-font-size-sm);font-variant-numeric:tabular-nums}.as-task__progress{display:inline-block;inline-size:6rem;block-size:.25rem;border-radius:var(--hm-radius-pill);background:var(--hm-hover);overflow:hidden}.as-task__progress span{display:block;block-size:100%;background:var(--hm-success)}.as-task__summary{display:flex;flex-direction:column;gap:var(--hm-space-md);padding-block-start:var(--hm-space-sm)}.as-task__chat{--spine-chat-height: min(68dvh, 42rem);margin-block-start:var(--hm-space-xs)}.as-task__side{display:flex;flex-direction:column;gap:var(--hm-space-sm);padding:var(--hm-space-sm);border-radius:var(--hm-radius-control);background:var(--hm-surface-muted)}.as-task__danger{display:flex;flex-wrap:wrap;gap:var(--hm-space-xs);padding-block-start:var(--hm-space-xs);border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.as-task__footer{display:flex;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field{display:flex;flex-direction:column;gap:var(--hm-space-micro)}.as-field__head{display:flex;align-items:center;justify-content:space-between;gap:var(--hm-space-xs)}.as-field__label{color:var(--hm-muted);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.as-field__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-field__chips{display:flex;flex-wrap:wrap;gap:var(--hm-space-micro)}.as-field__dates{display:grid;grid-template-columns:1fr 1fr;gap:var(--hm-space-xs)}.as-people{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.as-people__item{display:flex;align-items:center;gap:var(--hm-space-xs);min-inline-size:0}.as-people__name{flex:1;min-inline-size:0;overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-sm);text-overflow:ellipsis;white-space:nowrap}.as-task__merged{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-inline-start:var(--hm-border-thin) solid var(--hm-info);border-radius:var(--hm-radius-control);background:var(--hm-info-bg);color:var(--hm-text)}.as-task__merged-icon{flex:none;color:var(--hm-info)}.as-task__merged-text{display:flex;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0;overflow-wrap:anywhere}.as-merged{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.as-merged__item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xs);padding:var(--hm-space-xxxs) var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.as-merged__item hm-icon-button{grid-row:1/span 2;grid-column:2}.as-merged__link{padding:0;border:0;background:none;color:var(--hm-accent);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;overflow-wrap:anywhere;cursor:pointer}.as-merged__link:hover{text-decoration:underline}.as-merged__link:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:2px}.as-merged__author{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-due{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-due[data-due=overdue]{color:var(--hm-danger);font-weight:var(--hm-font-weight-semibold)}.as-due[data-due=today],.as-due[data-due=tomorrow]{color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.as-facts{display:grid;grid-template-columns:max-content 1fr;gap:var(--hm-space-xxxs) var(--hm-space-sm);margin:0;font-size:var(--hm-font-size-sm)}.as-facts dt{color:var(--hm-muted)}.as-facts dd{margin:0;color:var(--hm-text);overflow-wrap:anywhere}.as-facts__link{display:inline-flex;flex:none;align-items:center;gap:var(--hm-space-micro);color:var(--hm-accent)}.as-facts__screen{display:flex;align-items:center;gap:var(--hm-space-xxxs);min-inline-size:0}.as-facts__screen-name{min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.as-checklist{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.as-checklist__item{display:flex;align-items:center;gap:var(--hm-space-xs);min-block-size:var(--hm-control-height-dense)}.as-checklist__item--done .as-checklist__check{color:var(--hm-muted);text-decoration:line-through}.as-checklist__item:hover .as-checklist__tools,.as-checklist__item:focus-within .as-checklist__tools{opacity:1}.as-checklist__check{flex:1;min-inline-size:0}.as-checklist__rename{flex:1}.as-checklist__tools{display:inline-flex;opacity:0}.as-checklist__add{display:flex;gap:var(--hm-space-xs);align-items:flex-start}.as-checklist__new{flex:1}@media(hover:none){.as-checklist__tools{opacity:1}}.as-timeline{display:flex;flex-direction:column;gap:var(--hm-space-sm);margin:var(--hm-space-sm) 0 0;padding:0;list-style:none}.as-timeline__item{position:relative;display:flex;align-items:flex-start;gap:var(--hm-space-xs);font-size:var(--hm-font-size-sm)}.as-timeline__item:not(:last-child):before{position:absolute;inset-block:var(--hm-space-lg) calc(var(--hm-space-sm) * -1);inset-inline-start:calc(var(--hm-space-sm) - var(--hm-border-hairline));border-inline-start:var(--hm-border-thin) solid var(--hm-border);content:\"\"}.as-timeline__face{position:relative;flex:none}.as-timeline__body{display:flex;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-timeline__line{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);color:var(--hm-text)}.as-timeline__comment{margin:0;padding:var(--hm-space-xs) var(--hm-space-sm);border-radius:var(--hm-radius-control);background:var(--hm-surface-muted);color:var(--hm-text);white-space:pre-line;overflow-wrap:anywhere}.as-timeline__comment--internal{border-inline-start:var(--hm-border-thin) solid var(--hm-warning);background:var(--hm-warning-bg)}.as-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\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: CheckboxComponent, selector: "hm-checkbox", inputs: ["label", "labelHidden", "checked", "indeterminate"], outputs: ["checkedChange"] }, { kind: "component", type: DatePickerComponent, selector: "hm-date-picker", inputs: ["value", "label", "labelHidden", "hint", "placeholder", "min", "max", "valueFormat"], outputs: ["valueChange"] }, { kind: "component", type: IconButtonComponent, selector: "hm-icon-button", inputs: ["label", "icon", "solid", "iconDirection", "emphasis", "intent", "size", "disabled", "toggle", "pressed", "keyShortcuts"], outputs: ["pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "component", type: InputComponent, selector: "hm-input", inputs: ["value", "label", "type", "placeholder", "icon", "labelHidden", "hint", "prefix", "suffix", "prefixIcon", "mask", "maskValue", "min", "max", "step", "stepButtons", "maxLength", "autocomplete", "inputMode"], outputs: ["valueChange"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { kind: "component", type: PopoverComponent, selector: "hm-popover", inputs: ["open", "heading", "headingLevel", "label", "side", "align", "arrow", "closable", "closeLabel", "closeOnOutsideClick", "openOn", "openDelay", "closeDelay"], outputs: ["openChange"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[hmPopoverTrigger]", inputs: ["hmPopoverTrigger"] }, { 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: SelectComponent, selector: "hm-select", inputs: ["value", "label", "labelHidden", "hint"], outputs: ["valueChange"] }, { kind: "component", type: SuggestionLabelPickerComponent, selector: "spine-suggestion-label-picker", inputs: ["labels", "selected"], outputs: ["toggled", "created"] }, { kind: "component", type: SuggestionPeoplePickerComponent, selector: "spine-suggestion-people-picker", inputs: ["clientId", "exclude"], outputs: ["picked"] }, { 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: SpineTagRowComponent, selector: "spine-tag-row", inputs: ["items", "label", "empty"] }, { kind: "component", type: SwitchComponent, selector: "hm-switch", inputs: ["value", "label", "hint", "labelPosition", "loading"], outputs: ["valueChange"] }, { 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: SuggestionTaskDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-suggestion-task-detail', imports: [
+                        AccountAvatarComponent, AlertComponent, ButtonComponent, CheckboxComponent, DatePickerComponent, IconButtonComponent,
+                        IconComponent, InputComponent, ModalComponent, PopoverComponent, PopoverTriggerDirective, RichTextComponent,
+                        SelectComponent, SuggestionLabelPickerComponent, SuggestionPeoplePickerComponent,
+                        SpineSuggestionChatComponent, SpineTagRowComponent, SwitchComponent, TabComponent, TabsComponent, TagComponent, TextareaComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hm-modal [heading]=\"heading()\" [open]=\"open()\" (openChange)=\"setOpen($event)\" size=\"xlarge\">\n  @if (current(); as t) {\n    @if (loadError()) {\n      <hm-alert variant=\"error\">{{ loadError() }}</hm-alert>\n    }\n    <div class=\"as-task\">\n      <!-- Esquerda: o trabalho (t\u00EDtulo, descri\u00E7\u00E3o, checklist, conversa). -->\n      <div class=\"as-task__main\">\n        <div class=\"as-task__key-row\">\n          <span class=\"as-task__key\">{{ t.key }}</span>\n          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"copy\" [label]=\"text.copyKey\" (clicked)=\"copyKey()\" />\n          <hm-tag [name]=\"text.kinds[t.kind]\" [color]=\"kindColors[t.kind]\" />\n          @if (t.archived_at) { <hm-tag [name]=\"text.archivedTag\" /> }\n          @if (t.merged_into) { <hm-tag [name]=\"text.mergedTag\" color=\"info\" /> }\n        </div>\n\n        <!-- Agrupada: o destino tem os relatores e os apoios; os coment\u00E1rios ficam aqui. -->\n        @if (t.merged_into; as into) {\n          <div class=\"as-task__merged\">\n            <hm-icon class=\"as-task__merged-icon\" shape=\"layers\" />\n            <div class=\"as-task__merged-text\">\n              <strong>{{ mergedIntoText(into.key) }}</strong>\n              <span>{{ into.title }}</span>\n              <span class=\"as-field__hint\">{{ text.mergedIntoHint }}</span>\n            </div>\n            <div class=\"as-actions\">\n              <hm-button size=\"small\" emphasis=\"medium\" (clicked)=\"openTask.emit(into.id)\">{{ openMergedText(into.key) }}</hm-button>\n              <hm-button size=\"small\" emphasis=\"minimal\" icon=\"unlink\" [disabled]=\"busy()\" (clicked)=\"unmergeSelf()\">{{ text.unmerge }}</hm-button>\n            </div>\n          </div>\n        }\n\n        @if (editingTitle()) {\n          <hm-input [label]=\"text.title\" labelHidden [maxLength]=\"limits.title\" [value]=\"titleDraft()\"\n                    (valueChange)=\"titleDraft.set($event)\" (keydown)=\"onTitleKey($event)\" (focusout)=\"saveTitle()\" />\n        } @else {\n          <h2 class=\"as-task__title\">\n            <button type=\"button\" class=\"as-task__title-button\" [attr.aria-label]=\"text.editTitle + ': ' + t.title\" (click)=\"startTitle()\">\n              {{ t.title }}<hm-icon class=\"as-task__title-pen\" shape=\"pencil\" />\n            </button>\n          </h2>\n        }\n        <p class=\"as-task__dates\">\n          <span>{{ text.createdAt }} {{ date(t.created_at, true) }}</span>\n          <span aria-hidden=\"true\">\u00B7</span>\n          <span>{{ text.updatedAt }} {{ date(t.updated_at, true) }}</span>\n          @if (lastChange(t); as change) {\n            <span aria-hidden=\"true\">\u00B7</span>\n            <span>{{ change }}</span>\n          }\n        </p>\n\n        <!-- Abas: Resumo (descri\u00E7\u00E3o e checklist), Coment\u00E1rios (a conversa com quem pediu) e Hist\u00F3rico (tudo o que mudou). -->\n        <hm-tabs [label]=\"text.taskLabel\" [active]=\"tab()\" (activeChange)=\"selectTab($event)\">\n          <hm-tab id=\"summary\" [label]=\"text.tabSummary\">\n            <div class=\"as-task__summary\">\n              <section class=\"as-task__section\" aria-labelledby=\"as-task-description\">\n                <div class=\"as-task__section-head\">\n                  <h3 id=\"as-task-description\" class=\"as-task__heading\">{{ text.description }}</h3>\n                  @if (!editingDescription()) {\n                    <hm-button size=\"small\" emphasis=\"minimal\" icon=\"pencil\" (clicked)=\"startDescription()\">{{ text.editDescription }}</hm-button>\n                  }\n                </div>\n                @if (editingDescription()) {\n                  <hm-rich-text [label]=\"text.description\" labelHidden [rows]=\"6\" [maxRows]=\"20\" [value]=\"descriptionDraft()\"\n                                (valueChange)=\"descriptionDraft.set($event)\" />\n                  <div class=\"as-actions\">\n                    <hm-button emphasis=\"medium\" (clicked)=\"editingDescription.set(false)\">{{ text.cancel }}</hm-button>\n                    <hm-button [loading]=\"busy()\" (clicked)=\"saveDescription()\">{{ text.save }}</hm-button>\n                  </div>\n                } @else if (t.description_html) {\n                  <hm-rich-text class=\"as-task__description\" [label]=\"text.description\" labelHidden readonly hideToolbar [value]=\"t.description_html\" />\n                } @else {\n                  <p class=\"muted\">{{ text.noDescription }}</p>\n                }\n              </section>\n      \n              <section class=\"as-task__section\" aria-labelledby=\"as-task-checklist\">\n                <div class=\"as-task__section-head\">\n                  <h3 id=\"as-task-checklist\" class=\"as-task__heading\">\n                    {{ text.checklist }}\n                    @if (t.checklist.total) {\n                      <span class=\"as-task__count\">{{ t.checklist.done }}/{{ t.checklist.total }}</span>\n                      <span class=\"as-task__progress\" role=\"progressbar\" aria-valuemin=\"0\" [attr.aria-valuemax]=\"t.checklist.total\"\n                            [attr.aria-valuenow]=\"t.checklist.done\" [attr.aria-label]=\"text.checklist\">\n                        <span [style.inline-size.%]=\"(t.checklist.done / t.checklist.total) * 100\"></span>\n                      </span>\n                    }\n                  </h3>\n                  <hm-switch [label]=\"text.checklistOnCard\" [value]=\"t.checklist_on_card\" (valueChange)=\"toggleChecklistOnCard($event)\" />\n                </div>\n                <ul class=\"as-checklist\">\n                  @for (item of checklistItems(); track item.id; let first = $first; let last = $last) {\n                    <li class=\"as-checklist__item\" [class.as-checklist__item--done]=\"item.done\">\n                      @if (renaming() === item.id) {\n                        <hm-input class=\"as-checklist__rename\" [label]=\"text.checklist\" labelHidden [maxLength]=\"500\" [value]=\"renameDraft()\"\n                                  (valueChange)=\"renameDraft.set($event)\" (keydown)=\"onRenameKey($event, item)\" (focusout)=\"saveRename(item)\" />\n                      } @else {\n                        <hm-checkbox class=\"as-checklist__check\" [label]=\"item.text\" [checked]=\"item.done\" (checkedChange)=\"toggleItem(item, $event)\" />\n                        <span class=\"as-checklist__tools\">\n                          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"pencil\" [label]=\"text.editTitle + ': ' + item.text\" (clicked)=\"startRename(item)\" />\n                          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"angle-up\" [label]=\"itemLabel(text.checklistUp, item)\" [disabled]=\"first\" (clicked)=\"moveItem(item, -1)\" />\n                          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"angle-down\" [label]=\"itemLabel(text.checklistDown, item)\" [disabled]=\"last\" (clicked)=\"moveItem(item, 1)\" />\n                          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"trash\" [label]=\"itemLabel(text.checklistRemove, item)\" (clicked)=\"removeItem(item)\" />\n                        </span>\n                      }\n                    </li>\n                  } @empty {\n                    <li class=\"muted\">{{ text.checklistEmpty }}</li>\n                  }\n                </ul>\n                <div class=\"as-checklist__add\">\n                  <hm-input class=\"as-checklist__new\" [label]=\"text.checklistAdd\" labelHidden [placeholder]=\"text.checklistPlaceholder\"\n                            [maxLength]=\"500\" [value]=\"newItem()\" (valueChange)=\"newItem.set($event)\" (keydown)=\"onNewItemKey($event)\" />\n                  <hm-button emphasis=\"medium\" icon=\"plus\" [disabled]=\"!newItem().trim()\" (clicked)=\"addItem()\">{{ text.checklistAdd }}</hm-button>\n                </div>\n              </section>\n            </div>\n          </hm-tab>\n          <hm-tab id=\"comments\" [label]=\"text.tabComments\" [count]=\"commentsTotal() || null\">\n            <!-- A conversa em chat: \u00E0 direita o que a pessoa escreveu como equipe; quem pediu (inclusive ela mesma pela\n                 p\u00E1gina de quem pede) \u00E0 esquerda, com o papel no cabe\u00E7alho. O \"S\u00F3 para a equipe\" vai junto do Enviar. -->\n            <spine-suggestion-chat class=\"as-task__chat\" side=\"equipe\" [me]=\"me()\" [items]=\"chatItems()\"\n                                   [label]=\"text.tabComments\" [empty]=\"text.commentsEmpty\"\n                                   [hasMore]=\"comments().length < commentsTotal()\" [loading]=\"eventsLoading()\"\n                                   [composerLabel]=\"text.comment\" [placeholder]=\"commentInternal() ? text.commentInternal : text.commentHint\"\n                                   [sendLabel]=\"text.commentSend\" [sending]=\"commenting()\" [error]=\"commentError()\"\n                                   [(draft)]=\"comment\" (loadHistory)=\"loadEvents('comments', false)\" (send)=\"sendComment($event)\">\n              <hm-checkbox spineChatComposer [label]=\"text.commentInternal\" [checked]=\"commentInternal()\"\n                           (checkedChange)=\"commentInternal.set($event)\" />\n            </spine-suggestion-chat>\n          </hm-tab>\n          <hm-tab id=\"activity\" [label]=\"text.tabActivity\">\n            <ol class=\"as-timeline\">\n              @for (e of activity(); track e.id) {\n                <li class=\"as-timeline__item\">\n                  <hm-account-avatar class=\"as-timeline__face\" size=\"small\" [name]=\"e.actor ? personName(e.actor) : text.someone\" [imageUrl]=\"e.actor?.picture\" />\n                  <div class=\"as-timeline__body\">\n                    <span class=\"as-timeline__line\">{{ eventText(e) }} \u00B7\n                      <time class=\"muted\" [attr.datetime]=\"e.created_at\" [attr.title]=\"date(e.created_at, true)\">{{ age(e.created_at) }}</time>\n                    </span>\n                    @if (e.comment) {\n                      <p class=\"as-timeline__comment\" [class.as-timeline__comment--internal]=\"e.internal\">{{ e.comment }}</p>\n                    }\n                  </div>\n                </li>\n              } @empty {\n                @if (!eventsLoading()) { <li class=\"muted\">{{ text.activityEmpty }}</li> }\n              }\n            </ol>\n            @if (activity().length < activityTotal()) {\n              <hm-button emphasis=\"medium\" [loading]=\"eventsLoading()\" (clicked)=\"loadEvents('activity', false)\">{{ text.loadMore }}</hm-button>\n            }\n          </hm-tab>\n        </hm-tabs>\n      </div>\n\n      <!-- Direita: os campos da tarefa (cada mudan\u00E7a grava na hora). -->\n      <aside class=\"as-task__side\" [attr.aria-label]=\"text.taskLabel\">\n        <hm-select [label]=\"text.status\" [value]=\"t.status\" [disabled]=\"busy()\" (valueChange)=\"changeStatus($any($event))\">\n          @for (st of statuses; track st) { <option [value]=\"st\">{{ text.statuses[st] }}</option> }\n        </hm-select>\n        <!-- A conversa com quem pede: com quem est\u00E1 a vez (muda sozinho a cada mensagem; aqui d\u00E1 para acertar). -->\n        <hm-select [label]=\"text.menuWaiting\" [value]=\"t.waiting_on ?? ''\" [disabled]=\"busy()\" (valueChange)=\"changeWaiting($any($event))\">\n          <option value=\"\">{{ text.waitingClear }}</option>\n          @for (w of waitingValues; track w) { <option [value]=\"w\">{{ text.waiting[w] }}</option> }\n        </hm-select>\n\n        <div class=\"as-field\">\n          <div class=\"as-field__head\">\n            <span class=\"as-field__label\">{{ text.assignees }}</span>\n            @if (!isMine()) {\n              <hm-button size=\"small\" emphasis=\"minimal\" icon=\"user-plus\" (clicked)=\"assignMe()\">{{ text.assignMe }}</hm-button>\n            }\n          </div>\n          <ul class=\"as-people\">\n            @for (p of t.assignees; track p.user_id) {\n              <li class=\"as-people__item\">\n                <hm-account-avatar size=\"small\" [name]=\"personName(p)\" [imageUrl]=\"p.picture\" />\n                <span class=\"as-people__name\">{{ personName(p) }}</span>\n                <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"trash\" [label]=\"removePersonLabel(p)\" (clicked)=\"removePerson(p, 'responsavel')\" />\n              </li>\n            } @empty {\n              <li class=\"muted\">{{ text.nobody }}</li>\n            }\n          </ul>\n          <hm-button size=\"small\" emphasis=\"minimal\" icon=\"plus\" [hmPopoverTrigger]=\"assigneePop\">{{ text.addAssignee }}</hm-button>\n          <hm-popover #assigneePop [label]=\"text.addAssignee\">\n            @if (assigneePop.open()) {\n              <spine-suggestion-people-picker [clientId]=\"clientId()\" [exclude]=\"assigneeIds()\" (picked)=\"addPerson($event, 'responsavel', assigneePop)\" />\n            }\n          </hm-popover>\n        </div>\n\n        <div class=\"as-field\">\n          <span class=\"as-field__label\">{{ text.watchers }}</span>\n          <ul class=\"as-people\">\n            @for (p of t.watchers; track p.user_id) {\n              <li class=\"as-people__item\">\n                <hm-account-avatar size=\"small\" [name]=\"personName(p)\" [imageUrl]=\"p.picture\" />\n                <span class=\"as-people__name\">{{ personName(p) }}</span>\n                <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"trash\" [label]=\"removePersonLabel(p)\" (clicked)=\"removePerson(p, 'envolvido')\" />\n              </li>\n            } @empty {\n              <li class=\"muted\">{{ text.nobody }}</li>\n            }\n          </ul>\n          <hm-button size=\"small\" emphasis=\"minimal\" icon=\"plus\" [hmPopoverTrigger]=\"watcherPop\">{{ text.addWatcher }}</hm-button>\n          <hm-popover #watcherPop [label]=\"text.addWatcher\">\n            @if (watcherPop.open()) {\n              <spine-suggestion-people-picker [clientId]=\"clientId()\" [exclude]=\"watcherIds()\" (picked)=\"addPerson($event, 'envolvido', watcherPop)\" />\n            }\n          </hm-popover>\n        </div>\n\n        <!-- Quem pediu: o autor e, numa que recebeu agrupadas, os relatores que vieram delas. -->\n        <div class=\"as-field\">\n          <span class=\"as-field__label\">{{ (t.reporters?.length ?? 0) > 1 ? text.reporters : text.reporter }}</span>\n          <ul class=\"as-people\">\n            @for (p of reportersOf(t); track p.user_id || $index) {\n              <li class=\"as-people__item\">\n                <hm-account-avatar size=\"small\" [name]=\"personName(p.user_id ? p : null)\" [imageUrl]=\"p.picture\" />\n                <span class=\"as-people__name\">{{ personName(p.user_id ? p : null) }}</span>\n                @if ((t.reporters?.length ?? 0) > 1 && reporterHint(t, p); as hint) {\n                  <span class=\"as-field__hint\">{{ hint }}</span>\n                }\n              </li>\n            }\n          </ul>\n          <span class=\"as-field__hint\">{{ t.origin === 'equipe' ? text.originTeam : text.originUser }}</span>\n        </div>\n\n        @if (t.merged?.length) {\n          <div class=\"as-field\">\n            <span class=\"as-field__label\">{{ text.mergedHere }}</span>\n            <ul class=\"as-merged\">\n              @for (m of t.merged; track m.id) {\n                <li class=\"as-merged__item\">\n                  <button type=\"button\" class=\"as-merged__link\" (click)=\"openTask.emit(m.id)\">\n                    <span class=\"as-task__key\">{{ m.key }}</span> {{ m.title }}\n                  </button>\n                  <span class=\"as-merged__author\">\n                    <hm-account-avatar size=\"small\" [name]=\"personName(m.author)\" [imageUrl]=\"m.author?.picture\" />\n                    {{ personName(m.author) }}\n                  </span>\n                  <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"unlink\" [label]=\"unmergeLabel(m.key)\"\n                                  [disabled]=\"busy()\" (clicked)=\"unmergeOrigin(m)\" />\n                </li>\n              }\n            </ul>\n          </div>\n        }\n\n        <hm-select [label]=\"text.priority\" [value]=\"t.priority\" [disabled]=\"busy()\" (valueChange)=\"changePriority($any($event))\">\n          @for (p of priorities; track p) { <option [value]=\"p\">{{ text.priorities[p] }}</option> }\n        </hm-select>\n        <hm-select [label]=\"text.kind\" [value]=\"t.kind\" [disabled]=\"busy()\" (valueChange)=\"changeKind($any($event))\">\n          @for (k of kinds; track k) { <option [value]=\"k\">{{ text.kinds[k] }}</option> }\n        </hm-select>\n        <div class=\"as-field__dates\">\n          <hm-date-picker [label]=\"text.startDate\" [value]=\"t.start_date\" [max]=\"$any(t.due_date)\" (valueChange)=\"changeDate('start_date', $event)\" />\n          <hm-date-picker [label]=\"text.dueDate\" [value]=\"t.due_date\" [min]=\"$any(t.start_date)\" (valueChange)=\"changeDate('due_date', $event)\" />\n        </div>\n        @if (t.due_date) {\n          <span class=\"as-due\" [attr.data-due]=\"dueSituation()\"><hm-icon shape=\"calendar\" />{{ dueText(t) }}</span>\n        }\n\n        <div class=\"as-field\">\n          <div class=\"as-field__head\">\n            <span class=\"as-field__label\">{{ text.labels }}</span>\n            <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"tag\" [label]=\"text.addLabel\" [hmPopoverTrigger]=\"labelPop\" />\n          </div>\n          <!-- Em linha, como os grupos: o que n\u00E3o cabe vira \"+N\" (cada r\u00F3tulo na cor dele). -->\n          <spine-tag-row [label]=\"text.labels\" [items]=\"labelTags(t)\" [empty]=\"text.noLabels\" />\n          <hm-popover #labelPop [label]=\"text.labels\">\n            @if (labelPop.open()) {\n              <spine-suggestion-label-picker [labels]=\"labels()\" [selected]=\"selectedLabels()\"\n                                             (toggled)=\"toggleLabel($event.label, $event.linked)\" (created)=\"createLabel($event.name, $event.color)\" />\n            }\n          </hm-popover>\n        </div>\n\n        <dl class=\"as-facts\">\n          <dt>{{ text.screenOrigin }}</dt>\n          <dd class=\"as-facts__screen\">\n            @if (t.screen.new) { <hm-tag [name]=\"text.newScreenTag\" color=\"info\" /> }\n            <span class=\"as-facts__screen-name\" [attr.title]=\"t.screen.label || null\">{{ t.screen.label || text.noScreen }}</span>\n            @if (t.screen.path && canOpenScreen()) {\n              <a class=\"as-facts__link\" [href]=\"screenHref(t.screen.path)\" [attr.aria-label]=\"text.openScreen\" [attr.title]=\"text.openScreen\"\n                 (click)=\"openScreen($event, t.screen.path)\"><hm-icon shape=\"pop-out\" /></a>\n            }\n          </dd>\n          <dt>{{ text.votesField }}</dt>\n          <dd>{{ t.votes }}</dd>\n        </dl>\n\n        <!-- Os grupos de quem pediu: em linha, no modelo dos r\u00F3tulos; o que n\u00E3o cabe vira \"+N\". -->\n        <div class=\"as-field\">\n          <span class=\"as-field__label\">{{ text.requestingGroups }}</span>\n          <spine-tag-row [label]=\"text.requestingGroups\" [items]=\"t.groups ?? []\" [empty]=\"text.noGroups\" />\n        </div>\n\n        <div class=\"as-task__danger\">\n          <!-- Sem cadeia: nem a agrupada nem a que recebeu outras v\u00E3o para dentro de outra. -->\n          @if (!t.merged_into && !t.merged_count) {\n            <hm-button size=\"small\" emphasis=\"medium\" icon=\"layers\" (clicked)=\"mergeRequested.emit(t)\">{{ text.menuMerge }}</hm-button>\n          }\n          <hm-button size=\"small\" emphasis=\"medium\" [icon]=\"t.archived_at ? 'unarchive' : 'archive'\" (clicked)=\"toggleArchived()\">\n            {{ t.archived_at ? text.menuRestore : text.menuArchive }}\n          </hm-button>\n          <hm-button size=\"small\" emphasis=\"medium\" intent=\"danger\" icon=\"trash\" (clicked)=\"remove()\">{{ text.menuDelete }}</hm-button>\n        </div>\n      </aside>\n    </div>\n  } @else if (draft()) {\n    <!-- Nova tarefa: o essencial; o resto (pessoas, checklist, conversa) assim que existir. -->\n    <div class=\"as-task\">\n      <div class=\"as-task__main\">\n        <hm-input [label]=\"text.title\" [placeholder]=\"text.addTaskPlaceholder\" [maxLength]=\"limits.title\" required\n                  [error]=\"draftTitleError()\" [value]=\"draftTitle()\" (valueChange)=\"draftTitle.set($event)\" />\n        <hm-rich-text [label]=\"text.description\" [rows]=\"6\" [maxRows]=\"20\" [value]=\"draftDescription()\" (valueChange)=\"draftDescription.set($event)\" />\n        <p class=\"as-field__hint\">{{ text.draftHint }}</p>\n      </div>\n      <aside class=\"as-task__side\" [attr.aria-label]=\"text.taskLabel\">\n        <hm-select [label]=\"text.status\" [value]=\"draftColumn()\" (valueChange)=\"draftColumn.set($any($event))\">\n          @for (st of statuses; track st) { <option [value]=\"st\">{{ text.statuses[st] }}</option> }\n        </hm-select>\n        <hm-select [label]=\"text.kind\" [value]=\"draftKind()\" (valueChange)=\"draftKind.set($any($event))\">\n          @for (k of kinds; track k) { <option [value]=\"k\">{{ text.kinds[k] }}</option> }\n        </hm-select>\n        <hm-select [label]=\"text.priority\" [value]=\"draftPriority()\" (valueChange)=\"draftPriority.set($any($event))\">\n          @for (p of priorities; track p) { <option [value]=\"p\">{{ text.priorities[p] }}</option> }\n        </hm-select>\n        <div class=\"as-field__dates\">\n          <hm-date-picker [label]=\"text.startDate\" [value]=\"draftStart()\" [max]=\"$any(draftDue())\" (valueChange)=\"draftStart.set($event)\" />\n          <hm-date-picker [label]=\"text.dueDate\" [value]=\"draftDue()\" [min]=\"$any(draftStart())\" (valueChange)=\"draftDue.set($event)\" />\n        </div>\n        <div class=\"as-field\">\n          <span class=\"as-field__label\">{{ text.labels }}</span>\n          <spine-suggestion-label-picker [labels]=\"labels()\" [selected]=\"draftLabels()\"\n                                         (toggled)=\"toggleLabel($event.label, $event.linked)\" (created)=\"createLabel($event.name, $event.color)\" />\n        </div>\n        <hm-checkbox [label]=\"text.assignMeOnCreate\" [checked]=\"draftAssignMe()\" (checkedChange)=\"draftAssignMe.set($event)\" />\n      </aside>\n    </div>\n  }\n\n  <div footer class=\"as-task__footer\">\n    @if (!current() && draft()) {\n      <hm-button emphasis=\"medium\" (clicked)=\"closed.emit()\">{{ text.cancel }}</hm-button>\n      <hm-button icon=\"plus\" [loading]=\"busy()\" (clicked)=\"create()\">{{ text.createTask }}</hm-button>\n    } @else {\n      <hm-button emphasis=\"medium\" (clicked)=\"closed.emit()\">{{ text.close }}</hm-button>\n    }\n  </div>\n</hm-modal>\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface-muted);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.as-tok--cat-1{--as-tok: var(--hm-data-categorical-1);background:var(--as-tok)}.as-tok--cat-2{--as-tok: var(--hm-data-categorical-2);background:var(--as-tok)}.as-tok--cat-3{--as-tok: var(--hm-data-categorical-3);background:var(--as-tok)}.as-tok--cat-4{--as-tok: var(--hm-data-categorical-4);background:var(--as-tok)}.as-tok--cat-5{--as-tok: var(--hm-data-categorical-5);background:var(--as-tok)}.as-tok--cat-6{--as-tok: var(--hm-data-categorical-6);background:var(--as-tok)}.as-tok--cat-7{--as-tok: var(--hm-data-categorical-7);background:var(--as-tok)}.as-tok--cat-8{--as-tok: var(--hm-data-categorical-8);background:var(--as-tok)}.as-label{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--as-tok, var(--hm-border)) 18%,var(--hm-surface-raised));color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-label:before{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-tok, var(--hm-border));content:\"\"}@media(forced-colors:active){.as-label{border:var(--hm-border-hairline) solid CanvasText}}.as-task{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,20rem);gap:var(--hm-space-lg);align-items:start}@media(max-width:48rem){.as-task{grid-template-columns:minmax(0,1fr)}}.as-task__main{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-task__key-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-task__key{color:var(--hm-muted);font-family:var(--hm-font-mono, monospace);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.as-task__title{margin:0;font-size:var(--hm-font-size-xl, 1.375rem)}.as-task__title-button{display:inline-flex;align-items:baseline;gap:var(--hm-space-xs);padding:0;border:0;background:none;color:var(--hm-text);font:inherit;font-weight:var(--hm-font-weight-bold);text-align:start;overflow-wrap:anywhere;cursor:text}.as-task__title-button:hover .as-task__title-pen,.as-task__title-button:focus-visible .as-task__title-pen{opacity:1}.as-task__title-button:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:2px}.as-task__dates{display:flex;flex-wrap:wrap;gap:var(--hm-space-micro) var(--hm-space-xxxs);margin:calc(var(--hm-space-sm) * -1) 0 0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-task__title-pen{color:var(--hm-muted);opacity:0;font-size:var(--hm-font-size-md)}.as-task__section{display:flex;flex-direction:column;gap:var(--hm-space-xs);padding:var(--hm-space-sm);border-radius:var(--hm-radius-control);background:var(--hm-surface-muted)}.as-task__section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hm-space-xs)}.as-task__heading{display:flex;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-task__count{color:var(--hm-muted);font-size:var(--hm-font-size-sm);font-variant-numeric:tabular-nums}.as-task__progress{display:inline-block;inline-size:6rem;block-size:.25rem;border-radius:var(--hm-radius-pill);background:var(--hm-hover);overflow:hidden}.as-task__progress span{display:block;block-size:100%;background:var(--hm-success)}.as-task__summary{display:flex;flex-direction:column;gap:var(--hm-space-md);padding-block-start:var(--hm-space-sm)}.as-task__chat{--spine-chat-height: min(68dvh, 42rem);margin-block-start:var(--hm-space-xs)}.as-task__side{display:flex;flex-direction:column;gap:var(--hm-space-sm);padding:var(--hm-space-sm);border-radius:var(--hm-radius-control);background:var(--hm-surface-muted)}.as-task__danger{display:flex;flex-wrap:wrap;gap:var(--hm-space-xs);padding-block-start:var(--hm-space-xs);border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.as-task__footer{display:flex;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field{display:flex;flex-direction:column;gap:var(--hm-space-micro)}.as-field__head{display:flex;align-items:center;justify-content:space-between;gap:var(--hm-space-xs)}.as-field__label{color:var(--hm-muted);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.as-field__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-field__chips{display:flex;flex-wrap:wrap;gap:var(--hm-space-micro)}.as-field__dates{display:grid;grid-template-columns:1fr 1fr;gap:var(--hm-space-xs)}.as-people{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.as-people__item{display:flex;align-items:center;gap:var(--hm-space-xs);min-inline-size:0}.as-people__name{flex:1;min-inline-size:0;overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-sm);text-overflow:ellipsis;white-space:nowrap}.as-task__merged{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--hm-space-xs) var(--hm-space-sm);padding:var(--hm-space-xs) var(--hm-space-sm);border-inline-start:var(--hm-border-thin) solid var(--hm-info);border-radius:var(--hm-radius-control);background:var(--hm-info-bg);color:var(--hm-text)}.as-task__merged-icon{flex:none;color:var(--hm-info)}.as-task__merged-text{display:flex;flex:1 1 12rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0;overflow-wrap:anywhere}.as-merged{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.as-merged__item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xs);padding:var(--hm-space-xxxs) var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised)}.as-merged__item hm-icon-button{grid-row:1/span 2;grid-column:2}.as-merged__link{padding:0;border:0;background:none;color:var(--hm-accent);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;overflow-wrap:anywhere;cursor:pointer}.as-merged__link:hover{text-decoration:underline}.as-merged__link:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:2px}.as-merged__author{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-due{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-due[data-due=overdue]{color:var(--hm-danger);font-weight:var(--hm-font-weight-semibold)}.as-due[data-due=today],.as-due[data-due=tomorrow]{color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.as-facts{display:grid;grid-template-columns:max-content 1fr;gap:var(--hm-space-xxxs) var(--hm-space-sm);margin:0;font-size:var(--hm-font-size-sm)}.as-facts dt{color:var(--hm-muted)}.as-facts dd{margin:0;color:var(--hm-text);overflow-wrap:anywhere}.as-facts__link{display:inline-flex;flex:none;align-items:center;gap:var(--hm-space-micro);color:var(--hm-accent)}.as-facts__screen{display:flex;align-items:center;gap:var(--hm-space-xxxs);min-inline-size:0}.as-facts__screen-name{min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.as-checklist{display:flex;flex-direction:column;gap:var(--hm-space-micro);margin:0;padding:0;list-style:none}.as-checklist__item{display:flex;align-items:center;gap:var(--hm-space-xs);min-block-size:var(--hm-control-height-dense)}.as-checklist__item--done .as-checklist__check{color:var(--hm-muted);text-decoration:line-through}.as-checklist__item:hover .as-checklist__tools,.as-checklist__item:focus-within .as-checklist__tools{opacity:1}.as-checklist__check{flex:1;min-inline-size:0}.as-checklist__rename{flex:1}.as-checklist__tools{display:inline-flex;opacity:0}.as-checklist__add{display:flex;gap:var(--hm-space-xs);align-items:flex-start}.as-checklist__new{flex:1}@media(hover:none){.as-checklist__tools{opacity:1}}.as-timeline{display:flex;flex-direction:column;gap:var(--hm-space-sm);margin:var(--hm-space-sm) 0 0;padding:0;list-style:none}.as-timeline__item{position:relative;display:flex;align-items:flex-start;gap:var(--hm-space-xs);font-size:var(--hm-font-size-sm)}.as-timeline__item:not(:last-child):before{position:absolute;inset-block:var(--hm-space-lg) calc(var(--hm-space-sm) * -1);inset-inline-start:calc(var(--hm-space-sm) - var(--hm-border-hairline));border-inline-start:var(--hm-border-thin) solid var(--hm-border);content:\"\"}.as-timeline__face{position:relative;flex:none}.as-timeline__body{display:flex;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-timeline__line{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);color:var(--hm-text)}.as-timeline__comment{margin:0;padding:var(--hm-space-xs) var(--hm-space-sm);border-radius:var(--hm-radius-control);background:var(--hm-surface-muted);color:var(--hm-text);white-space:pre-line;overflow-wrap:anywhere}.as-timeline__comment--internal{border-inline-start:var(--hm-border-thin) solid var(--hm-warning);background:var(--hm-warning-bg)}.as-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { clientId: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientId", required: true }] }], task: [{ type: i0.Input, args: [{ isSignal: true, alias: "task", required: false }] }], draft: [{ type: i0.Input, args: [{ isSignal: true, alias: "draft", required: false }] }], draftStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftStatus", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], canOpenScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "canOpenScreen", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], created: [{ type: i0.Output, args: ["created"] }], removed: [{ type: i0.Output, args: ["removed"] }], closed: [{ type: i0.Output, args: ["closed"] }], labelCreated: [{ type: i0.Output, args: ["labelCreated"] }], mergeRequested: [{ type: i0.Output, args: ["mergeRequested"] }], openTask: [{ type: i0.Output, args: ["openTask"] }], unmerged: [{ type: i0.Output, args: ["unmerged"] }], chat: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SpineSuggestionChatComponent), { isSignal: true }] }] } });
+
+/** Sem acento e sem caixa: "relatório" acha "RELATORIO". */
+const fold$1 = (s) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+/** Teto da lista do seletor: a busca afunila o resto. */
+const MAX_OPTIONS = 50;
+/**
+ * "Agrupar em…": escolhe a sugestão principal para uma repetida (`source`), entre as abertas do quadro (`candidates`,
+ * menos ela e as já agrupadas), com busca pela chave e pelo título. Escolher pede a prévia ao servidor ("3 apoios e 1
+ * relator passam para SUG-12"); "Agrupar" confirma (`HermesDialogService.confirm`) e grava. Uma sugestão que já recebeu
+ * outras não pode ser agrupada (sem cadeia): o seletor avisa em vez de listar.
+ */
+class SuggestionMergePickerComponent {
+    constructor() {
+        this.messages = inject(SPINE_MESSAGES);
+        this.text = this.messages.suggestions;
+        this.service = inject(AutoServiceSuggestionsService);
+        this.dialogs = inject(HermesDialogService);
+        this.toast = inject(HermesToastService);
+        this.clientId = input.required(...(ngDevMode ? [{ debugName: "clientId" }] : /* istanbul ignore next */ []));
+        /** A que vai ser agrupada; null = fechado. */
+        this.source = input(null, ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+        /** As do quadro (o seletor tira a própria e as agrupadas). */
+        this.candidates = input([], ...(ngDevMode ? [{ debugName: "candidates" }] : /* istanbul ignore next */ []));
+        /** Agrupou: o destino inteiro, como o servidor devolveu. */
+        this.merged = output();
+        this.closed = output();
+        this.statusColors = SPINE_SUGGESTION_STATUS_COLORS;
+        this.term = signal('', ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
+        this.picked = signal(null, ...(ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []));
+        this.preview = signal(null, ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+        this.previewError = signal(false, ...(ngDevMode ? [{ debugName: "previewError" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.heading = computed(() => formatMessage(this.text.mergeHeading, { key: this.source()?.key ?? '' }), ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+        this.options = computed(() => {
+            const source = this.source();
+            const term = fold$1(this.term().trim());
+            return this.candidates()
+                .filter((c) => c.id !== source?.id && !c.merged_into)
+                .filter((c) => !term || fold$1(`${c.key} ${c.title}`).includes(term))
+                .slice(0, MAX_OPTIONS);
+        }, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        // Cada abertura começa do zero.
+        effect(() => {
+            this.source();
+            untracked(() => {
+                this.term.set('');
+                this.picked.set(null);
+                this.preview.set(null);
+                this.previewError.set(false);
+            });
+        });
+    }
+    onOpen(open) {
+        if (!open)
+            this.closed.emit();
+    }
+    async pick(target) {
+        const source = this.source();
+        if (!source || this.picked()?.id === target.id)
+            return;
+        this.picked.set(target);
+        this.preview.set(null);
+        this.previewError.set(false);
+        try {
+            const preview = await this.service.mergePreview(this.clientId(), source.id, target.id);
+            if (this.picked()?.id === target.id)
+                this.preview.set(preview);
+        }
+        catch {
+            if (this.picked()?.id === target.id)
+                this.previewError.set(true);
+        }
+    }
+    previewText(p) {
+        const locale = this.messages.meta.locale;
+        return formatMessage(this.text.mergePreview, {
+            votes: pluralMessage(this.text.votes, p.votes, locale),
+            reporters: pluralMessage(this.text.reportersCount, p.reporters, locale),
+            key: p.target.key,
+        });
+    }
+    votesText(count) {
+        return pluralMessage(this.text.votes, count, this.messages.meta.locale);
+    }
+    async confirm() {
+        const source = this.source();
+        const preview = this.preview();
+        const target = this.picked();
+        if (!source || !preview || !target || this.busy())
+            return;
+        const ok = await this.dialogs.confirm({
+            heading: formatMessage(this.text.mergeConfirmHeading, { key: source.key, target: target.key }),
+            message: `${this.previewText(preview)} ${this.text.mergeConfirmMessage}`,
+            confirmLabel: this.text.mergeConfirm,
+        });
+        if (!ok)
+            return;
+        this.busy.set(true);
+        try {
+            const saved = await this.service.merge(this.clientId(), source.id, target.id);
+            this.toast.success(formatMessage(this.text.mergedToast, { key: source.key, target: target.key }));
+            this.merged.emit({ source, target: saved });
+        }
+        catch {
+            this.toast.error(this.text.mergeError);
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: SuggestionMergePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: SuggestionMergePickerComponent, isStandalone: true, selector: "spine-suggestion-merge-picker", inputs: { clientId: { classPropertyName: "clientId", publicName: "clientId", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, candidates: { classPropertyName: "candidates", publicName: "candidates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { merged: "merged", closed: "closed" }, ngImport: i0, template: `
+    <hm-modal [heading]="heading()" [open]="!!source()" (openChange)="onOpen($event)">
+      @if (source(); as s) {
+        <div class="as-merge">
+          <p class="as-merge__intro">{{ text.mergeIntro }}</p>
+          @if (s.merged_count) {
+            <hm-alert variant="warning">{{ text.mergeHasMerged }}</hm-alert>
+          } @else {
+            <hm-search-field [label]="text.mergeSearch" labelHidden [placeholder]="text.mergeSearch" [landmark]="false"
+                             [value]="term()" (search)="term.set($event)" />
+            <ul class="as-merge__list" [attr.aria-label]="text.mergeSearch">
+              @for (c of options(); track c.id) {
+                <li>
+                  <button type="button" class="as-merge__option" [class.as-merge__option--on]="picked()?.id === c.id"
+                          [attr.aria-pressed]="picked()?.id === c.id" (click)="pick(c)">
+                    <span class="as-merge__key">{{ c.key }}</span>
+                    <span class="as-merge__title">{{ c.title }}</span>
+                    <span class="as-merge__meta">
+                      <hm-tag [name]="text.statuses[c.status]" [color]="statusColors[c.status]" />
+                      <span>{{ votesText(c.votes) }}</span>
+                    </span>
+                  </button>
+                </li>
+              } @empty {
+                <li class="as-merge__empty">{{ text.mergeNone }}</li>
+              }
+            </ul>
+            @if (picked()) {
+              <p class="as-merge__preview" aria-live="polite">
+                @if (previewError()) { {{ text.mergePreviewError }} }
+                @else if (preview(); as p) { {{ previewText(p) }} }
+                @else { {{ text.mergeCalculating }} }
+              </p>
+            }
+          }
+        </div>
+      }
+      <div footer class="as-merge__footer">
+        <hm-button emphasis="medium" (clicked)="closed.emit()">{{ text.cancel }}</hm-button>
+        <hm-button icon="layers" [disabled]="!preview() || !!source()?.merged_count" [loading]="busy()" (clicked)="confirm()">
+          {{ text.mergeConfirm }}
+        </hm-button>
+      </div>
+    </hm-modal>
+  `, isInline: true, styles: [".as-merge{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-inline-size:0}.as-merge__intro,.as-merge__empty{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-merge__list{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);max-block-size:22rem;margin:0;padding:0;overflow:auto;list-style:none}.as-merge__option{display:grid;grid-template-columns:auto 1fr;gap:var(--hm-space-micro) var(--hm-space-xs);inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}.as-merge__option:hover{background:var(--hm-surface-muted)}.as-merge__option:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-thin)}.as-merge__option--on{border-color:var(--hm-accent);background:var(--hm-accent-subtle)}.as-merge__key{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-merge__title{font-weight:var(--hm-font-weight-semibold);overflow-wrap:anywhere}.as-merge__meta{display:inline-flex;grid-column:2;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-merge__preview{margin:0;padding:var(--hm-space-xs) var(--hm-space-sm);border-radius:var(--hm-radius-control);background:var(--hm-surface-muted);color:var(--hm-text)}.as-merge__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs);inline-size:100%}\n"], dependencies: [{ 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: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { 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: 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: SuggestionMergePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-suggestion-merge-picker', imports: [AlertComponent, ButtonComponent, ModalComponent, SearchFieldComponent, TagComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <hm-modal [heading]="heading()" [open]="!!source()" (openChange)="onOpen($event)">
+      @if (source(); as s) {
+        <div class="as-merge">
+          <p class="as-merge__intro">{{ text.mergeIntro }}</p>
+          @if (s.merged_count) {
+            <hm-alert variant="warning">{{ text.mergeHasMerged }}</hm-alert>
+          } @else {
+            <hm-search-field [label]="text.mergeSearch" labelHidden [placeholder]="text.mergeSearch" [landmark]="false"
+                             [value]="term()" (search)="term.set($event)" />
+            <ul class="as-merge__list" [attr.aria-label]="text.mergeSearch">
+              @for (c of options(); track c.id) {
+                <li>
+                  <button type="button" class="as-merge__option" [class.as-merge__option--on]="picked()?.id === c.id"
+                          [attr.aria-pressed]="picked()?.id === c.id" (click)="pick(c)">
+                    <span class="as-merge__key">{{ c.key }}</span>
+                    <span class="as-merge__title">{{ c.title }}</span>
+                    <span class="as-merge__meta">
+                      <hm-tag [name]="text.statuses[c.status]" [color]="statusColors[c.status]" />
+                      <span>{{ votesText(c.votes) }}</span>
+                    </span>
+                  </button>
+                </li>
+              } @empty {
+                <li class="as-merge__empty">{{ text.mergeNone }}</li>
+              }
+            </ul>
+            @if (picked()) {
+              <p class="as-merge__preview" aria-live="polite">
+                @if (previewError()) { {{ text.mergePreviewError }} }
+                @else if (preview(); as p) { {{ previewText(p) }} }
+                @else { {{ text.mergeCalculating }} }
+              </p>
+            }
+          }
+        </div>
+      }
+      <div footer class="as-merge__footer">
+        <hm-button emphasis="medium" (clicked)="closed.emit()">{{ text.cancel }}</hm-button>
+        <hm-button icon="layers" [disabled]="!preview() || !!source()?.merged_count" [loading]="busy()" (clicked)="confirm()">
+          {{ text.mergeConfirm }}
+        </hm-button>
+      </div>
+    </hm-modal>
+  `, styles: [".as-merge{display:flex;flex-direction:column;gap:var(--hm-space-sm);min-inline-size:0}.as-merge__intro,.as-merge__empty{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-merge__list{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);max-block-size:22rem;margin:0;padding:0;overflow:auto;list-style:none}.as-merge__option{display:grid;grid-template-columns:auto 1fr;gap:var(--hm-space-micro) var(--hm-space-xs);inline-size:100%;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;text-align:start;cursor:pointer}.as-merge__option:hover{background:var(--hm-surface-muted)}.as-merge__option:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-thin)}.as-merge__option--on{border-color:var(--hm-accent);background:var(--hm-accent-subtle)}.as-merge__key{color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-merge__title{font-weight:var(--hm-font-weight-semibold);overflow-wrap:anywhere}.as-merge__meta{display:inline-flex;grid-column:2;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs);color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-merge__preview{margin:0;padding:var(--hm-space-xs) var(--hm-space-sm);border-radius:var(--hm-radius-control);background:var(--hm-surface-muted);color:var(--hm-text)}.as-merge__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs);inline-size:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { clientId: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientId", required: true }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], candidates: [{ type: i0.Input, args: [{ isSignal: true, alias: "candidates", required: false }] }], merged: [{ type: i0.Output, args: ["merged"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/** As colunas do quadro: recusada não tem coluna (sai na hora; fica no arquivo). */
+const BOARD_STATUSES = ['em_analise', 'planejada', 'em_desenvolvimento', 'concluida'];
+const OPEN_STATUSES = ['em_analise', 'planejada', 'em_desenvolvimento'];
+/** Quantas levam o selo "Mais votada" (das com algum apoio, no quadro inteiro, não só no filtrado). */
+const TOP_VOTED = 3;
+/** Responsáveis que aparecem no cartão; o resto vira "+N". */
+const FACES = 3;
+const ARCHIVE_PAGE = 20;
+const EXCERPT = 140;
+/** Parâmetro do link copiado ("?sugestao=SUG-12"): abrir a tela com ele abre a tarefa. */
+const SUGGESTION_LINK_PARAM = 'sugestao';
+const PRIORITY_RANK = { urgente: 0, alta: 1, media: 2, baixa: 3 };
+const byPosition = (a, b) => a.position - b.position || a.created_at.localeCompare(b.created_at);
+const SORTS = {
+    position: byPosition,
+    votes: (a, b) => b.votes - a.votes || byPosition(a, b),
+    recent: (a, b) => b.created_at.localeCompare(a.created_at),
+    priority: (a, b) => PRIORITY_RANK[a.priority] - PRIORITY_RANK[b.priority] || byPosition(a, b),
+    due: (a, b) => (a.due_date ?? '9999').localeCompare(b.due_date ?? '9999') || byPosition(a, b),
+};
+/** Sem acento e minúsculo: "analise" acha "Análise". */
+const fold = (s) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+/** 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],
+];
+/**
+ * O quadro de trabalho das sugestões do app (`hm-kanban`), montado na tela Sugestões do auto-serviço.
+ *
+ * - **Quadro**: o servidor manda o recorte (`board=true`): abertas e as concluídas dos últimos `done_days` dias;
+ *   recusadas e arquivadas saem. Indicadores do quadro inteiro, tudo calculado aqui com o que já vem (vencidas e as
+ *   que venceram ontem, vencendo em breve, em andamento por status, concluídas na janela e hoje, atribuídas a mim e as
+ *   abertas por prioridade; vencidas, vencendo, minhas e cada prioridade também filtram) e os filtros da tela — texto
+ *   (inclusive a chave "SUG-12"), responsável ("minhas", "sem responsável"), tipo, status (só aquela coluna),
+ *   prioridade, rótulo, prazo, e em "Mais filtros" tela e quem pediu, além da ordenação — sobre a lista inteira.
+ * - **Coluna**: "Mais antiga há 4h 12min" (pelo `status_at`) e as vencidas abaixo do título, vazio explicado e
+ *   "+ Criar tarefa" no rodapé (os templates `hmKanbanColumnSummary`/`Empty`/`Footer` do `hm-kanban`).
+ * - **Cartão**: capa (token da paleta), chave, selo de prioridade, título, contexto (tipo · tela), rótulos, trecho,
+ *   checklist (e os itens, com "Mostrar no cartão"), prazo por extenso (vencida em vermelho; hoje/amanhã em âmbar) e o
+ *   rodapé com comentários, checklist, apoios, a data e os responsáveis com "+N"; o "⋮": status e prioridade
+ *   (submenus), atribuir a mim, copiar link e chave, rótulos, capa (popover), arquivar e excluir (com confirmação).
+ * - **Criar**: sempre o cadastro completo (a tarefa em branco no modal), já com o status da coluna: "Nova tarefa" no
+ *   topo (o "▾" escolhe a coluna), o "+" do cabeçalho e o "+ Criar tarefa" do rodapé de cada coluna.
+ * - **Arrastar** (ponteiro, toque ou teclado; o `hm-kanban` cuida do gesto e dos anúncios) muda status e/ou posição: a
+ *   tela aplica na hora e grava; se o servidor recusar, avisa e relê. A posição gravada é sempre a da coluna INTEIRA
+ *   (pelo vizinho visível). Fora da "ordem do quadro", arrastar só troca de coluna (vai para o fim).
+ * - **Arquivo**: arquivadas, recusadas, agrupadas (selo "Agrupada", com "Desagrupar") e concluídas antigas, paginado e
+ *   buscado no servidor, com "Reabrir"/"Restaurar".
+ * - **Agrupar**: "Agrupar em…" no "⋯" do cartão e no detalhe abre o seletor (`spine-suggestion-merge-picker`) com as
+ *   abertas do quadro e a prévia do servidor; confirmar agrupa, tira a origem do quadro e abre o destino.
+ * - **Tarefa**: `spine-suggestion-task-detail` (modal de duas colunas); o link "?sugestao=SUG-12" abre direto nela.
+ */
+class AutoServiceSuggestionsComponent {
+    constructor() {
+        this.messages = inject(SPINE_MESSAGES);
+        this.text = this.messages.suggestions;
+        this.service = inject(AutoServiceSuggestionsService);
+        this.toast = inject(HermesToastService);
+        this.dialogs = inject(HermesDialogService);
+        this.preferences = inject(SpinePreferencesService);
+        this.userStorage = inject(SpineUserStorage, { optional: true });
+        this.router = inject(Router, { optional: true });
+        this.location = inject(Location, { optional: true });
+        /** O client da sessão: a tela da sugestão só abre daqui se o app administrado for este. */
+        this.sessionClientId = inject(AUTH_CONFIG, { optional: true })?.clientId ?? null;
+        this.clientId = input.required(...(ngDevMode ? [{ debugName: "clientId" }] : /* istanbul ignore next */ []));
+        this.kinds = SPINE_SUGGESTION_KINDS;
+        this.statuses = SPINE_SUGGESTION_STATUSES;
+        this.statusColors = SPINE_SUGGESTION_STATUS_COLORS;
+        this.statusIcons = SPINE_SUGGESTION_STATUS_ICONS;
+        this.kindColors = SPINE_SUGGESTION_KIND_COLORS;
+        this.waitingValues = SPINE_SUGGESTION_WAITING;
+        this.waitingColors = SPINE_SUGGESTION_WAITING_COLORS;
+        this.newScreenValue = NEW_SCREEN_VALUE;
+        this.priorities = TASK_PRIORITIES;
+        this.sortKeys = ['position', 'votes', 'recent', 'priority', 'due'];
+        this.today = todayIso(this.preferences.effectiveTimeZone());
+        this.mode = signal('board', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.modeOptions = [
+            { value: 'board', label: this.text.viewBoard, icon: 'view-columns' },
+            { value: 'archive', label: this.text.viewArchive, icon: 'archive' },
+        ];
+        // --- quadro ---
+        this.all = signal([], ...(ngDevMode ? [{ debugName: "all" }] : /* istanbul ignore next */ []));
+        this.catalog = signal([], ...(ngDevMode ? [{ debugName: "catalog" }] : /* istanbul ignore next */ []));
+        this.doneDays = signal(AUTO_SERVICE_SUGGESTION_DONE_DAYS, ...(ngDevMode ? [{ debugName: "doneDays" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loadError = signal('', ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+        this.search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        this.kind = signal('', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        this.screen = signal('', ...(ngDevMode ? [{ debugName: "screen" }] : /* istanbul ignore next */ []));
+        this.author = signal('', ...(ngDevMode ? [{ debugName: "author" }] : /* istanbul ignore next */ []));
+        /** '' | 'me' | 'none' | user_id */
+        this.assignee = signal('', ...(ngDevMode ? [{ debugName: "assignee" }] : /* istanbul ignore next */ []));
+        this.label = signal('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.priority = signal('', ...(ngDevMode ? [{ debugName: "priority" }] : /* istanbul ignore next */ []));
+        /** '' | 'overdue' | 'soon' */
+        this.due = signal('', ...(ngDevMode ? [{ debugName: "due" }] : /* istanbul ignore next */ []));
+        /** '' | um status do quadro: só essa coluna aparece. */
+        this.status = signal('', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        /** '' | 'solicitante' | 'responsaveis': com quem está a vez na conversa. */
+        this.waiting = signal('', ...(ngDevMode ? [{ debugName: "waiting" }] : /* istanbul ignore next */ []));
+        /** '' | 'none' (criada pela equipe, sem grupo) | group_id: o grupo de quem pediu. */
+        this.group = signal('', ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+        this.sort = signal('position', ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+        /** "Mais filtros" aberto (quem pediu e o grupo). */
+        this.moreFilters = signal(false, ...(ngDevMode ? [{ debugName: "moreFilters" }] : /* istanbul ignore next */ []));
+        this.boardStatuses = BOARD_STATUSES;
+        /** Os filtros escondidos em "Mais filtros" que estão ligados (o botão mostra a conta). */
+        this.extraFilters = computed(() => [this.author(), this.group()].filter(Boolean).length, ...(ngDevMode ? [{ debugName: "extraFilters" }] : /* istanbul ignore next */ []));
+        this.moreFiltersText = computed(() => (this.extraFilters()
+            ? formatMessage(this.text.moreFiltersActive, { count: this.extraFilters() }) : this.text.moreFilters), ...(ngDevMode ? [{ debugName: "moreFiltersText" }] : /* istanbul ignore next */ []));
+        this.me = computed(() => this.userStorage?.userId() ?? '', ...(ngDevMode ? [{ debugName: "me" }] : /* istanbul ignore next */ []));
+        this.filtered = computed(() => {
+            const term = fold(this.search().trim());
+            const keyMatch = this.search().trim().match(/^(?:sug-?)?(\d{1,9})$/i);
+            const [kind, screen, author, assignee, label, priority, due, waiting, group] = [this.kind(), this.screen(),
+                this.author(), this.assignee(), this.label(), this.priority(), this.due(), this.waiting(), this.group()];
+            const me = this.me();
+            return this.all().filter((s) => (!kind || s.kind === kind)
+                && (!screen || (screen === NEW_SCREEN_VALUE ? !!s.screen.new : !s.screen.new && s.screen.path === screen))
+                && (!waiting || (s.waiting_on === waiting && OPEN_STATUSES.includes(s.status)))
+                && (!group || (group === 'none' ? !s.groups?.length : !!s.groups?.some((g) => g.id === group)))
+                && (!author || s.author?.user_id === author)
+                && (!assignee || (assignee === 'none' ? s.assignees.length === 0 : assignedTo(s, assignee === 'me' ? me : assignee)))
+                && (!label || s.labels.some((l) => l.id === label))
+                && (!priority || s.priority === priority)
+                && (!due || this.matchesDue(s, due))
+                && (!term || (keyMatch && s.key_number === Number(keyMatch[1]))
+                    || fold(`${s.title} ${s.description} ${s.screen.label ?? ''} ${this.personName(s.author)} ${s.key}`).includes(term)));
+        }, ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+        this.isFiltered = computed(() => !!(this.search().trim() || this.kind() || this.screen() || this.author()
+            || this.assignee() || this.label() || this.priority() || this.due() || this.status() || this.waiting() || this.group()), ...(ngDevMode ? [{ debugName: "isFiltered" }] : /* istanbul ignore next */ []));
+        this.filteredText = computed(() => formatMessage(this.text.boardFiltered, {
+            shown: this.columns().reduce((n, c) => n + c.items.length, 0), total: this.all().length,
+        }), ...(ngDevMode ? [{ debugName: "filteredText" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => {
+            const list = this.filtered();
+            const order = SORTS[this.sort()];
+            const only = this.status();
+            return BOARD_STATUSES.filter((status) => !only || status === only).map((status) => ({
+                id: status, title: this.text.statuses[status], items: list.filter((s) => s.status === status).sort(order),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /**
+         * Resumo de cada coluna (o que está à vista nela): há quanto tempo a mais antiga está no status ("Mais antiga há
+         * 4h 12min", pelo `status_at`) e quantas vencidas.
+         */
+        this.columnSummaries = computed(() => {
+            const now = Date.now();
+            return new Map(this.columns().map((c) => {
+                const since = c.items.map((s) => Date.parse(s.status_at ?? s.created_at)).filter((t) => !Number.isNaN(t));
+                const oldest = since.length ? this.duration(now - Math.min(...since)) : '';
+                const overdue = c.items.filter((s) => dueState(s, this.today) === 'overdue').length;
+                return [c.id, {
+                        oldest: oldest ? formatMessage(this.text.columnOldest, { age: oldest }) : '',
+                        overdue: overdue ? pluralMessage(this.text.columnOverdue, overdue, this.messages.meta.locale) : '',
+                    }];
+            }));
+        }, ...(ngDevMode ? [{ debugName: "columnSummaries" }] : /* istanbul ignore next */ []));
+        /**
+         * Telas, pessoas, responsáveis e grupos que aparecem no quadro, para os filtros (só o que existe). As telas na ordem
+         * do caminho ("Módulo › Tela"), então as de um módulo ficam juntas; as novas (que ainda não existem) são uma opção só.
+         */
+        this.screens = computed(() => {
+            const byPath = new Map();
+            for (const s of this.all())
+                if (s.screen.path && !s.screen.new)
+                    byPath.set(s.screen.path, s.screen.label || s.screen.path);
+            return [...byPath].map(([path, label]) => ({ path, label })).sort((a, b) => a.label.localeCompare(b.label));
+        }, ...(ngDevMode ? [{ debugName: "screens" }] : /* istanbul ignore next */ []));
+        this.hasNewScreens = computed(() => this.all().some((s) => s.screen.new), ...(ngDevMode ? [{ debugName: "hasNewScreens" }] : /* istanbul ignore next */ []));
+        this.groupOptions = computed(() => {
+            const byId = new Map();
+            for (const s of this.all())
+                for (const g of s.groups ?? [])
+                    byId.set(g.id, g.name);
+            return [...byId].map(([id, name]) => ({ id, name })).sort((a, b) => a.name.localeCompare(b.name));
+        }, ...(ngDevMode ? [{ debugName: "groupOptions" }] : /* istanbul ignore next */ []));
+        this.authors = computed(() => this.people((s) => (s.author ? [s.author] : [])), ...(ngDevMode ? [{ debugName: "authors" }] : /* istanbul ignore next */ []));
+        this.assigneeOptions = computed(() => this.people((s) => s.assignees), ...(ngDevMode ? [{ debugName: "assigneeOptions" }] : /* istanbul ignore next */ []));
+        /** Indicadores do quadro inteiro (o filtro não muda: é o retrato do app). */
+        this.stats = computed(() => {
+            const list = this.all();
+            const count = (status) => list.filter((s) => s.status === status).length;
+            const open = list.filter((s) => OPEN_STATUSES.includes(s.status));
+            const yesterday = addDays(this.today, -1);
+            const zone = this.preferences.effectiveTimeZone();
+            const overdue = open.filter((s) => dueState(s, this.today) === 'overdue');
+            const done = list.filter((s) => s.status === 'concluida');
+            return {
+                open: open.length, em_analise: count('em_analise'), planejada: count('planejada'),
+                em_desenvolvimento: count('em_desenvolvimento'), concluida: done.length,
+                mine: open.filter((s) => assignedTo(s, this.me())).length,
+                overdue: overdue.length,
+                /** Venceram ontem: passaram a vencidas hoje (o "+N desde ontem"). */
+                overdueNew: overdue.filter((s) => s.due_date === yesterday).length,
+                soon: open.filter((s) => { const d = dueState(s, this.today); return d === 'today' || d === 'tomorrow'; }).length,
+                /** A vez é da equipe (quem pediu escreveu) e as mensagens de quem pede ainda não lidas por quem consulta. */
+                waitingTeam: open.filter((s) => s.waiting_on === 'responsaveis').length,
+                unread: list.reduce((n, s) => n + (s.unread ?? 0), 0),
+                doneToday: done.filter((s) => todayIso(zone, new Date(s.status_at ?? s.updated_at)) === this.today).length,
+                byPriority: TASK_PRIORITIES.map((p) => ({ priority: p, count: open.filter((s) => s.priority === p).length })),
+            };
+        }, ...(ngDevMode ? [{ debugName: "stats" }] : /* istanbul ignore next */ []));
+        this.doneLabel = computed(() => formatMessage(this.text.kpiDone, { days: this.doneDays() }), ...(ngDevMode ? [{ debugName: "doneLabel" }] : /* istanbul ignore next */ []));
+        /** "Em análise 3 · Planejada 4 · Em desenvolvimento 5" no indicador das abertas. */
+        this.openParts = computed(() => OPEN_STATUSES.map((st) => ({
+            status: st,
+            text: formatMessage(this.text.kpiStatusCount, { status: this.text.statuses[st], count: this.all().filter((s) => s.status === st).length }),
+        })), ...(ngDevMode ? [{ debugName: "openParts" }] : /* istanbul ignore next */ []));
+        this.overdueNote = computed(() => (this.stats().overdueNew
+            ? formatMessage(this.text.kpiOverdueTrend, { count: this.stats().overdueNew }) : this.text.kpiOverdueSteady), ...(ngDevMode ? [{ debugName: "overdueNote" }] : /* istanbul ignore next */ []));
+        this.doneNote = computed(() => (this.stats().doneToday
+            ? formatMessage(this.text.kpiDoneToday, { count: this.stats().doneToday }) : this.text.kpiDoneNoneToday), ...(ngDevMode ? [{ debugName: "doneNote" }] : /* istanbul ignore next */ []));
+        this.kpiLoading = computed(() => this.loading() && !this.all().length, ...(ngDevMode ? [{ debugName: "kpiLoading" }] : /* istanbul ignore next */ []));
+        /** Itens do "▾" ao lado de "Nova tarefa": criar direto numa coluna. */
+        this.newTaskItems = BOARD_STATUSES.map((st) => ({
+            id: st, label: formatMessage(this.text.newTaskIn, { status: this.text.statuses[st] }), icon: SPINE_SUGGESTION_STATUS_ICONS[st],
+        }));
+        this.topIds = computed(() => new Set(this.all().filter((s) => s.votes > 0).sort(SORTS.votes).slice(0, TOP_VOTED).map((s) => s.id)), ...(ngDevMode ? [{ debugName: "topIds" }] : /* istanbul ignore next */ []));
+        /** O menu "⋯" de cada cartão, montado uma vez por versão da tarefa (o menu aberto não perde o foco). */
+        this.menus = computed(() => new Map(this.all().map((t) => [t.id, this.buildMenu(t)])), ...(ngDevMode ? [{ debugName: "menus" }] : /* istanbul ignore next */ []));
+        this.itemKey = (s) => s.id;
+        this.itemLabel = (s) => `${s.key} ${s.title}`;
+        // --- arquivo ---
+        this.archived = signal([], ...(ngDevMode ? [{ debugName: "archived" }] : /* istanbul ignore next */ []));
+        this.archiveTotal = signal(0, ...(ngDevMode ? [{ debugName: "archiveTotal" }] : /* istanbul ignore next */ []));
+        this.archivePage = signal({ page: 1, size: ARCHIVE_PAGE }, ...(ngDevMode ? [{ debugName: "archivePage" }] : /* istanbul ignore next */ []));
+        this.archiveSearch = signal('', ...(ngDevMode ? [{ debugName: "archiveSearch" }] : /* istanbul ignore next */ []));
+        this.archiveKind = signal('', ...(ngDevMode ? [{ debugName: "archiveKind" }] : /* istanbul ignore next */ []));
+        this.archiveStatus = signal('', ...(ngDevMode ? [{ debugName: "archiveStatus" }] : /* istanbul ignore next */ []));
+        this.archiveLoading = signal(false, ...(ngDevMode ? [{ debugName: "archiveLoading" }] : /* istanbul ignore next */ []));
+        this.archiveError = signal('', ...(ngDevMode ? [{ debugName: "archiveError" }] : /* istanbul ignore next */ []));
+        this.reopening = signal(null, ...(ngDevMode ? [{ debugName: "reopening" }] : /* istanbul ignore next */ []));
+        this.archiveCountText = computed(() => pluralMessage(this.text.archiveCount, this.archiveTotal(), this.messages.meta.locale), ...(ngDevMode ? [{ debugName: "archiveCountText" }] : /* istanbul ignore next */ []));
+        this.archiveEmptyHint = computed(() => formatMessage(this.text.archiveEmptyHint, { days: this.doneDays() }), ...(ngDevMode ? [{ debugName: "archiveEmptyHint" }] : /* istanbul ignore next */ []));
+        // --- tarefa aberta ---
+        this.selected = signal(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.drafting = signal(false, ...(ngDevMode ? [{ debugName: "drafting" }] : /* istanbul ignore next */ []));
+        this.draftStatus = signal('em_analise', ...(ngDevMode ? [{ debugName: "draftStatus" }] : /* istanbul ignore next */ []));
+        this.canOpenScreen = computed(() => !!this.sessionClientId && this.sessionClientId.toLowerCase() === this.clientId().toLowerCase(), ...(ngDevMode ? [{ debugName: "canOpenScreen" }] : /* istanbul ignore next */ []));
+        this.linkHandled = false;
+        // --- agrupar ---
+        /** A que está sendo agrupada (o seletor aberto); o detalhe fecha antes (um modal por vez). */
+        this.mergeSource = signal(null, ...(ngDevMode ? [{ debugName: "mergeSource" }] : /* istanbul ignore next */ []));
+        /** Checklist no cartão: os itens abertos (por cartão, só nesta tela; começa fechado, o rodapé diz quantos faltam). */
+        this.openChecklists = signal(new Set(), ...(ngDevMode ? [{ debugName: "openChecklists" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const clientId = this.clientId();
+            untracked(() => {
+                this.selected.set(null);
+                this.drafting.set(false);
+                void this.loadLabels(clientId);
+                if (this.mode() === 'archive')
+                    void this.loadArchive(1, clientId);
+                else
+                    void this.load(clientId);
+            });
+        });
+    }
+    people(of) {
+        const byId = new Map();
+        for (const s of this.all())
+            for (const p of of(s))
+                byId.set(p.user_id, p);
+        return [...byId.values()].sort((a, b) => this.personName(a).localeCompare(this.personName(b)));
+    }
+    matchesDue(s, due) {
+        const state = dueState(s, this.today);
+        return due === 'overdue' ? state === 'overdue' : state === 'today' || state === 'tomorrow';
+    }
+    setMode(value) {
+        const mode = value === 'archive' ? 'archive' : 'board';
+        if (mode === this.mode())
+            return;
+        this.mode.set(mode);
+        // Cada troca relê: o que foi reaberto no arquivo aparece no quadro e vice-versa.
+        if (mode === 'archive')
+            void this.loadArchive(1);
+        else
+            void this.load();
+    }
+    refresh() {
+        if (this.mode() === 'archive')
+            void this.loadArchive(this.archivePage().page);
+        else
+            void this.load();
+    }
+    async load(clientId = this.clientId()) {
+        this.loading.set(true);
+        this.loadError.set('');
+        try {
+            const board = await this.service.board(clientId);
+            this.all.set(board.suggestions);
+            this.doneDays.set(board.doneDays);
+            void this.openFromLink(clientId);
+        }
+        catch {
+            this.loadError.set(this.text.loadError);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    async loadLabels(clientId = this.clientId()) {
+        try {
+            this.catalog.set(await this.service.labels(clientId));
+        }
+        catch {
+            this.catalog.set([]);
+        }
+    }
+    /** "?sugestao=SUG-12" na URL: abre a tarefa (uma vez por tela). */
+    async openFromLink(clientId) {
+        if (this.linkHandled || !this.router)
+            return;
+        this.linkHandled = true;
+        const key = this.router.parseUrl(this.router.url).queryParams[SUGGESTION_LINK_PARAM];
+        if (typeof key !== 'string' || !key)
+            return;
+        const known = this.all().find((s) => s.key.toLowerCase() === key.toLowerCase());
+        try {
+            this.openDetail(known ?? (await this.service.lookup(clientId, key)));
+        }
+        catch {
+            this.toast.error(this.text.loadError);
+        }
+    }
+    clearFilters() {
+        for (const s of [this.search, this.kind, this.screen, this.author, this.assignee, this.label, this.priority, this.due, this.status,
+            this.waiting, this.group]) {
+            s.set('');
+        }
+    }
+    /**
+     * Indicador que filtra ("atribuídas a mim", "vencidas", "vencendo em breve", "aguardando responsáveis"): liga/desliga
+     * o filtro equivalente.
+     */
+    toggleKpi(which, on) {
+        if (which === 'mine')
+            this.assignee.set(on ? 'me' : '');
+        else if (which === 'waiting')
+            this.waiting.set(on ? 'responsaveis' : '');
+        else
+            this.due.set(on ? which : '');
+    }
+    /** Uma prioridade da legenda do indicador: filtra por ela (de novo, desliga). */
+    togglePriority(p) {
+        this.priority.update((current) => (current === p ? '' : p));
+    }
+    /** Largura de cada prioridade na barra empilhada (% das abertas). */
+    priorityShare(count) {
+        const total = this.stats().open;
+        return total ? (count / total) * 100 : 0;
+    }
+    priorityPart(p, count) {
+        return formatMessage(this.text.kpiPriorityPart, { priority: this.text.priorities[p], count });
+    }
+    /**
+     * O quadro já moveu o cartão (na lista filtrada); aqui vira a posição na coluna INTEIRA — logo depois do vizinho de
+     * cima que está visível (ou antes do de baixo; sozinho na coluna filtrada = fim) — aplica na lista e grava. Com
+     * outra ordenação, só a coluna conta: vai para o fim dela, e reordenar na mesma coluna não grava.
+     */
+    async onMoved(event) {
+        const item = event.item;
+        const to = event.to;
+        const changed = event.from !== to;
+        let change;
+        if (this.sort() !== 'position') {
+            if (!changed) {
+                this.all.update((list) => [...list]); // devolve o cartão ao lugar da ordenação
+                return;
+            }
+            const end = this.all().filter((s) => s.status === to && s.id !== item.id).length;
+            this.all.update((list) => list.map((s) => (s.id === item.id ? { ...s, status: to, position: end } : s)));
+            change = { status: to };
+        }
+        else {
+            const shown = event.columns.find((c) => c.id === to)?.items ?? [];
+            const above = shown[event.toIndex - 1];
+            const below = shown[event.toIndex + 1];
+            const column = this.all().filter((s) => s.status === to && s.id !== item.id).sort(byPosition);
+            let index = column.length;
+            if (above)
+                index = column.findIndex((s) => s.id === above.id) + 1;
+            else if (below)
+                index = Math.max(0, column.findIndex((s) => s.id === below.id));
+            const order = [...column.slice(0, index).map((s) => s.id), item.id, ...column.slice(index).map((s) => s.id)];
+            const position = new Map(order.map((id, i) => [id, i]));
+            this.all.update((list) => list.map((s) => (position.has(s.id)
+                ? { ...s, position: position.get(s.id), ...(s.id === item.id ? { status: to } : {}) } : s)));
+            change = { ...(changed ? { status: to } : {}), position: index };
+        }
+        try {
+            this.replace(await this.service.move(this.clientId(), item.id, change));
+        }
+        catch {
+            this.toast.error(this.text.moveError);
+            await this.load();
+        }
+    }
+    // --- criação ---
+    /**
+     * Abre o cadastro completo (a tarefa em branco no modal) já na coluna escolhida: "Nova tarefa" do topo (Em análise),
+     * o "▾" ao lado dele, o "+" do cabeçalho e o "+ Criar tarefa" do rodapé de cada coluna.
+     */
+    newTask(status = 'em_analise') {
+        this.selected.set(null);
+        this.draftStatus.set(BOARD_STATUSES.includes(status) ? status : 'em_analise');
+        this.drafting.set(true);
+    }
+    /** Nome do "+" da coluna: "Nova tarefa em Planejada". */
+    newTaskInLabel(status) {
+        return formatMessage(this.text.newTaskIn, { status: this.text.statuses[status] ?? status });
+    }
+    // --- tarefa aberta ---
+    openDetail(s) {
+        this.drafting.set(false);
+        this.selected.set(s);
+    }
+    closeDetail() {
+        this.selected.set(null);
+        this.drafting.set(false);
+        if (this.mode() === 'archive')
+            void this.loadArchive(this.archivePage().page);
+    }
+    onCreated(task) {
+        if (this.mode() === 'board')
+            this.all.update((list) => [...list, task]);
+        this.drafting.set(false);
+        this.selected.set(task);
+    }
+    onRemoved(task) {
+        this.all.update((list) => list.filter((s) => s.id !== task.id));
+        this.archived.update((list) => list.filter((s) => s.id !== task.id));
+        this.archiveTotal.update((n) => Math.max(0, n - (this.mode() === 'archive' ? 1 : 0)));
+        this.selected.set(null);
+    }
+    onLabelCreated(label) {
+        this.catalog.update((list) => [...list, label].sort((a, b) => a.name.localeCompare(b.name)));
+    }
+    /**
+     * Troca a tarefa nas listas (o que o servidor devolveu), mantendo o autor que já veio com a foto. Recusada,
+     * arquivada e agrupada saem do quadro na hora (o servidor também as tira do próximo `board=true`).
+     */
+    replace(saved) {
+        const merge = (s) => ({ ...s, ...saved, author: saved.author ?? s.author });
+        const leaves = saved.status === 'recusada' || !!saved.archived_at || !!saved.merged_into;
+        this.all.update((list) => (leaves
+            ? list.filter((s) => s.id !== saved.id)
+            : list.map((s) => (s.id === saved.id ? merge(s) : s))));
+        this.archived.update((list) => list.map((s) => (s.id === saved.id ? merge(s) : s)));
+    }
+    // --- menu do cartão ---
+    buildMenu(t) {
+        const linked = new Set(t.labels.map((l) => l.id));
+        const labels = this.catalog().length
+            ? this.catalog().map((l) => ({ id: `label:${l.id}`, label: l.name, icon: linked.has(l.id) ? 'check' : 'tag' }))
+            : [{ id: 'label:none', label: this.text.menuNoLabels, disabled: true }];
+        return [
+            {
+                id: 'status', label: this.text.menuStatus, icon: 'view-columns',
+                children: SPINE_SUGGESTION_STATUSES.map((st) => ({
+                    id: `status:${st}`, label: this.text.statuses[st], icon: st === t.status ? 'check' : SPINE_SUGGESTION_STATUS_ICONS[st], disabled: st === t.status,
+                })),
+            },
+            {
+                id: 'priority', label: this.text.menuPriority, icon: TASK_PRIORITY_ICONS[t.priority],
+                children: TASK_PRIORITIES.map((p) => ({ id: `priority:${p}`, label: this.text.priorities[p], icon: p === t.priority ? 'check' : TASK_PRIORITY_ICONS[p] })),
+            },
+            {
+                id: 'waiting', label: this.text.menuWaiting, icon: 'chat-bubble',
+                children: [
+                    ...SPINE_SUGGESTION_WAITING.map((w) => ({
+                        id: `waiting:${w}`, label: this.text.waiting[w], icon: t.waiting_on === w ? 'check' : 'chat-bubble', disabled: t.waiting_on === w,
+                    })),
+                    { id: 'waiting:none', label: this.text.waitingClear, icon: t.waiting_on ? 'check-circle' : 'check', disabled: !t.waiting_on },
+                ],
+            },
+            { id: 'assign-me', label: this.text.menuAssignMe, icon: 'user-plus', disabled: assignedTo(t, this.me()) },
+            { id: 'labels', label: this.text.menuLabel, icon: 'tag', children: labels },
+            { id: 'copy-link', label: this.text.menuCopyLink, icon: 'link', separatorAbove: true },
+            { id: 'copy-key', label: this.text.menuCopyKey, icon: 'copy' },
+            // Sem cadeia: a que já recebeu outras não pode ser agrupada (o seletor explica; aqui fica desligado).
+            { id: 'merge', label: this.text.menuMerge, icon: 'layers', separatorAbove: true, disabled: !!t.merged_count },
+            { id: 'archive', label: this.text.menuArchive, icon: 'archive', separatorAbove: true },
+            { id: 'delete', label: this.text.menuDelete, icon: 'trash', danger: true },
+        ];
+    }
+    menuOf(t) {
+        return this.menus().get(t.id) ?? [];
+    }
+    menuLabel(t) {
+        return formatMessage(this.text.cardMenu, { key: t.key });
+    }
+    /** Uma escolha do "⋯": cada uma grava e devolve a tarefa nova (ou copia, ou abre a capa ancorada no botão). */
+    async onMenu(t, id, anchor) {
+        const clientId = this.clientId();
+        const [action, value] = id.split(':');
+        try {
+            if (action === 'status')
+                this.replace(await this.service.move(clientId, t.id, { status: value }));
+            else if (action === 'priority')
+                this.replace(await this.service.update(clientId, t.id, { priority: value }));
+            else if (action === 'waiting') {
+                this.replace(await this.service.update(clientId, t.id, { waiting_on: value === 'none' ? null : value }));
+                this.toast.success(this.text.waitingSaved);
+            }
+            else if (action === 'assign-me') {
+                this.replace(await this.service.addPerson(clientId, t.id, 'me', 'responsavel'));
+                this.toast.success(this.text.assignedToMe);
+            }
+            else if (action === 'label') {
+                this.replace(await this.service.setLabel(clientId, t.id, value, !t.labels.some((l) => l.id === value)));
+            }
+            else if (action === 'copy-link') {
+                if (await copyText(this.linkOf(t)))
+                    this.toast.success(this.text.linkCopied);
+                else
+                    this.toast.error(this.text.copyError);
+            }
+            else if (action === 'copy-key') {
+                if (await copyText(t.key))
+                    this.toast.success(this.text.keyCopied);
+                else
+                    this.toast.error(this.text.copyError);
+            }
+            else if (action === 'merge') {
+                this.startMerge(t);
+            }
+            else if (action === 'archive') {
+                this.replace(await this.service.setArchived(clientId, t.id, true));
+                this.toast.success(this.text.archivedToast);
+            }
+            else if (action === 'delete')
+                await this.confirmDelete(t);
+        }
+        catch {
+            this.toast.error(this.text.saveError);
+        }
+    }
+    startMerge(t) {
+        this.selected.set(null);
+        this.drafting.set(false);
+        this.mergeSource.set(t);
+    }
+    /** Agrupou: a origem sai do quadro, o destino é trocado pela versão do servidor e abre (mostra "Agrupadas aqui"). */
+    onMerged(event) {
+        this.mergeSource.set(null);
+        this.all.update((list) => list.filter((s) => s.id !== event.source.id));
+        this.replace(event.target);
+        this.selected.set(event.target);
+    }
+    /** O detalhe pediu outra tarefa (o destino de uma agrupada, uma das agrupadas): abre a completa. */
+    async openTask(id) {
+        try {
+            const task = await this.service.task(this.clientId(), id);
+            this.openDetail(task);
+        }
+        catch {
+            this.toast.error(this.text.loadError);
+        }
+    }
+    /** Desagrupou: a origem volta ao quadro (relê o que estiver à vista). */
+    onUnmerged() {
+        if (this.mode() === 'archive')
+            void this.loadArchive(this.archivePage().page);
+        else
+            void this.load();
+    }
+    mergedIntoText(key) {
+        return formatMessage(this.text.mergedInto, { key });
+    }
+    /** "Desagrupar" no arquivo. */
+    async unmergeFromArchive(t) {
+        this.reopening.set(t.id);
+        try {
+            await this.service.unmerge(this.clientId(), t.id);
+            this.toast.success(formatMessage(this.text.unmergedToast, { key: t.key }));
+            void this.loadArchive(this.archivePage().page);
+        }
+        catch {
+            this.toast.error(this.text.saveError);
+        }
+        finally {
+            this.reopening.set(null);
+        }
+    }
+    async confirmDelete(t) {
+        const ok = await this.dialogs.confirm({
+            heading: formatMessage(this.text.deleteHeading, { key: t.key }), message: this.text.deleteMessage,
+            confirmLabel: this.text.deleteConfirm, danger: true,
+        });
+        if (!ok)
+            return;
+        await this.service.remove(this.clientId(), t.id);
+        this.onRemoved(t);
+        this.toast.success(this.text.deleted);
+    }
+    /** O link da tela com a tarefa: o caminho atual (sem a query) + "?sugestao=SUG-12". */
+    linkOf(t) {
+        const path = (this.location?.path() ?? '').split('?')[0];
+        const base = this.location?.prepareExternalUrl(path) ?? path;
+        const origin = typeof window !== 'undefined' ? window.location.origin : '';
+        return `${origin}${base}?${SUGGESTION_LINK_PARAM}=${encodeURIComponent(t.key)}`;
+    }
+    /** Item do checklist marcado no próprio cartão. */
+    async toggleCardItem(t, item) {
+        try {
+            this.replace(await this.service.updateChecklistItem(this.clientId(), t.id, item.id, { done: !item.done }));
+        }
+        catch {
+            this.toast.error(this.text.saveError);
+        }
+    }
+    // --- arquivo ---
+    async loadArchive(page = 1, clientId = this.clientId()) {
+        const size = this.archivePage().size;
+        this.archiveLoading.set(true);
+        this.archiveError.set('');
+        try {
+            const res = await this.service.archive(clientId, {
+                limit: size, offset: (page - 1) * size, search: this.archiveSearch().trim(),
+                kind: this.archiveKind(), status: this.archiveStatus(),
+            });
+            this.archived.set(res.suggestions);
+            this.archiveTotal.set(res.total);
+            this.archivePage.set({ page, size });
+        }
+        catch {
+            this.archiveError.set(this.text.loadError);
+        }
+        finally {
+            this.archiveLoading.set(false);
+        }
+    }
+    onArchiveSearch(term) {
+        this.archiveSearch.set(term);
+        void this.loadArchive(1);
+    }
+    onArchiveFilter(which, value) {
+        (which === 'kind' ? this.archiveKind : this.archiveStatus).set(value);
+        void this.loadArchive(1);
+    }
+    onArchivePage(state) {
+        this.archivePage.set({ page: state.page, size: state.size });
+        void this.loadArchive(state.page);
+    }
+    /** Recusada volta para Em análise (fim da coluna); arquivada volta ao quadro com o status que tinha. */
+    async reopen(s) {
+        if (this.reopening())
+            return;
+        this.reopening.set(s.id);
+        try {
+            if (s.archived_at)
+                await this.service.setArchived(this.clientId(), s.id, false);
+            if (s.status === 'recusada')
+                await this.service.move(this.clientId(), s.id, { status: 'em_analise' });
+            this.toast.success(s.status === 'recusada' ? this.text.reopened : this.text.restoredToast);
+            const page = this.archivePage().page;
+            // Última da página: volta uma, para não cair numa página vazia.
+            await this.loadArchive(this.archived().length === 1 && page > 1 ? page - 1 : page);
+        }
+        catch {
+            this.toast.error(this.text.reopenError);
+        }
+        finally {
+            this.reopening.set(null);
+        }
+    }
+    // --- textos do cartão ---
+    sortLabel(k) {
+        if (k === 'priority')
+            return this.text.priority;
+        if (k === 'due')
+            return this.text.dueDate;
+        return this.text.sorts[k];
+    }
+    kindLabel(s) {
+        return this.text.kinds[s.kind];
+    }
+    kindIcon(s) {
+        return SPINE_SUGGESTION_KIND_ICONS[s.kind];
+    }
+    priorityIcon(s) {
+        return TASK_PRIORITY_ICONS[s.priority];
+    }
+    priorityName(s) {
+        return this.text.priorities[s.priority];
+    }
+    isTop(s) {
+        return this.topIds().has(s.id);
+    }
+    excerpt(s) {
+        const d = s.description.replace(/\s+/g, ' ').trim();
+        return d.length > EXCERPT ? `${d.slice(0, EXCERPT - 1).trimEnd()}…` : d;
+    }
+    faces(s) {
+        return s.assignees.slice(0, FACES);
+    }
+    moreFaces(s) {
+        const rest = s.assignees.length - FACES;
+        return rest > 0 ? formatMessage(this.text.moreAssignees, { count: rest }) : '';
+    }
+    dueOf(s) {
+        return dueState(s, this.today);
+    }
+    /** "Vencida há 3 dias", "Vence hoje", "Vence amanhã", "No prazo · até 12 de nov." (concluída: "Até 12 de nov."). */
+    dueText(s) {
+        if (!s.due_date)
+            return '';
+        const state = this.dueOf(s);
+        if (state === 'overdue') {
+            return pluralMessage(this.text.dueLateDays, daysBetween(s.due_date, this.today), this.messages.meta.locale);
+        }
+        if (state === 'today')
+            return this.text.dueToday;
+        if (state === 'tomorrow')
+            return this.text.dueTomorrow;
+        if (state === 'later')
+            return formatMessage(this.text.dueWithin, { date: this.day(s.due_date) });
+        return formatMessage(this.text.dueOn, { date: this.day(s.due_date) });
+    }
+    dueIcon(s) {
+        const state = this.dueOf(s);
+        if (state === 'overdue')
+            return 'alarm-clock';
+        if (state === 'today' || state === 'tomorrow')
+            return 'hourglass';
+        return 'calendar';
+    }
+    /** O nome da tela no cartão: o último nível do caminho, o nome da nova ou "Sem tela". */
+    screenNameOf(s) {
+        if (s.screen.new)
+            return s.screen.label || this.text.newScreenTag;
+        return screenName(s.screen.label) || s.screen.path || this.text.noScreen;
+    }
+    /** Selo "Aguardando…" do cartão (o `let-item` do kanban chega sem tipo). */
+    waitingName(s) {
+        return s.waiting_on ? this.text.waiting[s.waiting_on] : '';
+    }
+    waitingColor(s) {
+        return s.waiting_on ? SPINE_SUGGESTION_WAITING_COLORS[s.waiting_on] : 'neutral';
+    }
+    unreadText(count) {
+        return pluralMessage(this.text.unread, count, this.messages.meta.locale);
+    }
+    createdText(s) {
+        return formatMessage(this.text.createdOn, { date: this.date(s.created_at, true) });
+    }
+    /** Explicação da coluna vazia: com filtro, "nenhuma com estes filtros"; sem, o que costuma cair nela. */
+    emptyHint(status) {
+        if (this.isFiltered())
+            return this.text.columnEmptyFiltered;
+        const hint = this.text.columnEmptyHints[status] ?? '';
+        return formatMessage(hint, { days: this.doneDays() });
+    }
+    emptyIcon(status) {
+        return this.isFiltered() ? 'filter' : (SPINE_SUGGESTION_STATUS_ICONS[status] ?? 'inbox');
+    }
+    /** "3d 4h", "4h 12min", "12min" (o catálogo dá o formato). */
+    duration(ms) {
+        const { d, h, m } = splitDuration(ms);
+        if (d)
+            return formatMessage(this.text.duration.days, { d, h });
+        if (h)
+            return formatMessage(this.text.duration.hours, { h, m });
+        return formatMessage(this.text.duration.minutes, { m });
+    }
+    checklistText(s) {
+        return formatMessage(this.text.checklistSpoken, { done: s.checklist.done, total: s.checklist.total });
+    }
+    checklistOpen(s) {
+        return this.openChecklists().has(s.id);
+    }
+    toggleChecklist(s) {
+        this.openChecklists.update((set) => {
+            const next = new Set(set);
+            if (!next.delete(s.id))
+                next.add(s.id);
+            return next;
+        });
+    }
+    /** Os rótulos na linha de selos do cartão, cada um com a cor do token ('cat-3' → 3). */
+    labelTags(s) {
+        return s.labels.map((l) => ({ id: l.id, name: l.name, color: Number(l.color.replace('cat-', '')) || undefined }));
+    }
+    /** "3 atividades (1/3)". */
+    cardChecklistText(s) {
+        return pluralMessage(this.text.cardChecklist, s.checklist.total, this.messages.meta.locale, { done: s.checklist.done });
+    }
+    /** "Pedida por Ana" (+N relatores das agrupadas): a dica da foto de quem pediu. */
+    requestersText(s) {
+        const who = formatMessage(this.text.requestedByName, { name: this.personName(s.author) });
+        return s.reporters_count ? `${who} ${this.moreText(s.reporters_count)}` : who;
+    }
+    /** "+N". */
+    moreText(count) {
+        return formatMessage(this.text.moreAssignees, { count });
+    }
+    cardItems(s) {
+        return s.checklist_on_card ? [...(s.checklist.items ?? [])].sort((a, b) => a.position - b.position) : [];
+    }
+    personName(p) {
+        return p?.name || p?.username || this.text.removedAuthor;
+    }
+    votesText(count) {
+        return pluralMessage(this.text.votes, count, this.messages.meta.locale);
+    }
+    commentsText(count) {
+        return pluralMessage(this.text.comments, count, this.messages.meta.locale);
+    }
+    closedOn(s) {
+        if (s.archived_at)
+            return `${this.text.archivedTag} · ${this.date(s.archived_at)}`;
+        const template = s.status === 'recusada' ? this.text.closedOn.recusada : this.text.closedOn.concluida;
+        return formatMessage(template, { date: this.date(s.status_at ?? s.updated_at) });
+    }
+    /** "há 3 dias", "ontem", "há 2 horas" (Intl.RelativeTimeFormat no idioma do catálogo). */
+    age(iso) {
+        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, withTime = false) {
+        try {
+            return new Intl.DateTimeFormat(this.messages.meta.locale, {
+                dateStyle: 'short', ...(withTime ? { timeStyle: 'short' } : {}), timeZone: this.preferences.effectiveTimeZone(),
+            }).format(new Date(iso));
+        }
+        catch {
+            return iso.slice(0, 10);
+        }
+    }
+    /** Data sem hora (AAAA-MM-DD): o dia é o dia, sem fuso. */
+    day(iso) {
+        try {
+            return new Intl.DateTimeFormat(this.messages.meta.locale, { day: '2-digit', month: 'short', timeZone: 'UTC' }).format(new Date(`${iso}T00:00:00Z`));
+        }
+        catch {
+            return iso;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceSuggestionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AutoServiceSuggestionsComponent, isStandalone: true, selector: "spine-auto-service-suggestions", inputs: { clientId: { classPropertyName: "clientId", publicName: "clientId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"as-stack as-suggestions\">\n  <!-- Quadro x Arquivo, o atualizar e a nova tarefa (com o \"\u25BE\" para criar direto numa coluna). -->\n  <div class=\"as-suggestions__bar\">\n    <hm-segmented-control [label]=\"text.viewLabel\" [options]=\"modeOptions\" [value]=\"mode()\" (valueChange)=\"setMode($event)\" />\n    <span class=\"as-suggestions__spacer\"></span>\n    <hm-icon-button emphasis=\"subtle\" icon=\"refresh\" [label]=\"text.refresh\" (clicked)=\"refresh()\" />\n    <span class=\"as-split\" role=\"group\" [attr.aria-label]=\"text.newTask\">\n      <hm-button icon=\"plus\" (clicked)=\"newTask()\">{{ text.newTask }}</hm-button>\n      <hm-menu-button class=\"as-split__more\" icon=\"chevron-down\" [showArrow]=\"false\" align=\"end\" [label]=\"text.newTaskOptions\"\n                      [items]=\"newTaskItems\" (chosen)=\"newTask($any($event))\" />\n    </span>\n  </div>\n\n  @if (mode() === 'board') {\n    @if (loadError()) {\n      <hm-alert variant=\"error\">{{ loadError() }}</hm-alert>\n    } @else {\n      <!-- Indicadores do quadro inteiro (o filtro n\u00E3o mexe neles). Os bot\u00F5es filtram: vencidas, vencendo em breve,\n           atribu\u00EDdas a mim e cada prioridade da legenda. Cor sempre com texto junto. -->\n      <section class=\"as-kpis\" [attr.aria-label]=\"text.kpis\" [attr.aria-busy]=\"kpiLoading() ? 'true' : null\">\n        <button type=\"button\" class=\"as-kpi\" data-tone=\"danger\" [attr.aria-pressed]=\"due() === 'overdue'\"\n                (click)=\"toggleKpi('overdue', due() !== 'overdue')\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"alarm-clock\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiOverdue }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().overdue }}</span>\n            <span class=\"as-kpi__note\" [class.as-kpi__note--up]=\"stats().overdueNew > 0\">\n              @if (stats().overdueNew) { <hm-icon shape=\"arrow-up\" /> }{{ overdueNote() }}\n            </span>\n          </span>\n        </button>\n\n        <button type=\"button\" class=\"as-kpi\" data-tone=\"warning\" [attr.aria-pressed]=\"due() === 'soon'\"\n                (click)=\"toggleKpi('soon', due() !== 'soon')\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"hourglass\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiSoon }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().soon }}</span>\n            <span class=\"as-kpi__note\">{{ text.dueSoonFilter }}</span>\n          </span>\n        </button>\n\n        <!-- A vez \u00E9 da equipe: quem pediu escreveu na conversa. A nota conta as mensagens ainda n\u00E3o lidas. -->\n        <button type=\"button\" class=\"as-kpi\" data-tone=\"accent\" [attr.aria-pressed]=\"waiting() === 'responsaveis'\"\n                (click)=\"toggleKpi('waiting', waiting() !== 'responsaveis')\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"chat-bubble\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.waiting.responsaveis }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().waitingTeam }}</span>\n            <span class=\"as-kpi__note\" [class.as-kpi__note--up]=\"stats().unread > 0\">{{ unreadText(stats().unread) }}</span>\n          </span>\n        </button>\n\n        <div class=\"as-kpi\" data-tone=\"info\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon [shape]=\"statusIcons.em_desenvolvimento\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiOpen }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().open }}</span>\n            <span class=\"as-kpi__parts\">\n              @for (part of openParts(); track part.status) {\n                <span class=\"as-kpi__part\" [attr.data-status]=\"part.status\"><span class=\"as-kpi__dot\" aria-hidden=\"true\"></span>{{ part.text }}</span>\n              }\n            </span>\n          </span>\n        </div>\n\n        <div class=\"as-kpi\" data-tone=\"success\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon [shape]=\"statusIcons.concluida\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ doneLabel() }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().concluida }}</span>\n            <span class=\"as-kpi__note\" [class.as-kpi__note--good]=\"stats().doneToday > 0\">\n              @if (stats().doneToday) { <hm-icon shape=\"arrow-up\" /> }{{ doneNote() }}\n            </span>\n          </span>\n        </div>\n\n        <button type=\"button\" class=\"as-kpi\" data-tone=\"accent\" [attr.aria-pressed]=\"assignee() === 'me'\"\n                (click)=\"toggleKpi('mine', assignee() !== 'me')\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"user-checkmark\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiMine }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().mine }}</span>\n            <span class=\"as-kpi__note\">{{ text.kpiMineHint }}</span>\n          </span>\n        </button>\n\n        <div class=\"as-kpi as-kpi--wide\" data-tone=\"neutral\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"bar-chart\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiPriority }}</span>\n            @if (stats().open) {\n              <span class=\"as-kpi__bar\" aria-hidden=\"true\">\n                @for (p of stats().byPriority; track p.priority) {\n                  @if (p.count) {\n                    <span class=\"as-kpi__seg\" [attr.data-priority]=\"p.priority\" [style.inline-size.%]=\"priorityShare(p.count)\"></span>\n                  }\n                }\n              </span>\n              <span class=\"as-kpi__legend\">\n                @for (p of stats().byPriority; track p.priority) {\n                  <button type=\"button\" class=\"as-kpi__chip\" [attr.data-priority]=\"p.priority\" [attr.aria-pressed]=\"priority() === p.priority\"\n                          [disabled]=\"!p.count && priority() !== p.priority\" (click)=\"togglePriority(p.priority)\">\n                    <span class=\"as-kpi__dot\" aria-hidden=\"true\"></span>{{ priorityPart(p.priority, p.count) }}\n                  </button>\n                }\n              </span>\n            } @else {\n              <span class=\"as-kpi__note\">{{ text.kpiPriorityNone }}</span>\n            }\n          </span>\n        </div>\n      </section>\n\n      <!-- Filtros numa linha: busca larga, os mais usados e \"Mais filtros\" (tela, quem pediu); \u00E0 direita, a ordena\u00E7\u00E3o.\n           Valem sobre a lista inteira: a posi\u00E7\u00E3o gravada ao arrastar \u00E9 sempre a da coluna inteira. -->\n      <div class=\"as-filters\" role=\"group\" [attr.aria-label]=\"text.filters\">\n        <hm-search-field class=\"as-filters__search\" [label]=\"text.search\" labelHidden [placeholder]=\"text.search\"\n                         [landmark]=\"false\" [debounce]=\"150\" [value]=\"search()\" (search)=\"search.set($event)\" />\n        <hm-select class=\"as-filters__select\" [label]=\"text.assigneeFilter\" labelHidden [(value)]=\"assignee\">\n          <option value=\"\">{{ text.allAssignees }}</option>\n          <option value=\"me\">{{ text.assigneeMine }}</option>\n          <option value=\"none\">{{ text.assigneeNone }}</option>\n          @for (p of assigneeOptions(); track p.user_id) {\n            <option [value]=\"p.user_id\">{{ personName(p) }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.kindFilter\" labelHidden [(value)]=\"kind\">\n          <option value=\"\">{{ text.allKinds }}</option>\n          @for (k of kinds; track k) {\n            <option [value]=\"k\">{{ text.kinds[k] }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.statusFilter\" labelHidden [(value)]=\"status\">\n          <option value=\"\">{{ text.allBoardStatuses }}</option>\n          @for (st of boardStatuses; track st) {\n            <option [value]=\"st\">{{ text.statuses[st] }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.priorityFilter\" labelHidden [(value)]=\"priority\">\n          <option value=\"\">{{ text.allPriorities }}</option>\n          @for (p of priorities; track p) {\n            <option [value]=\"p\">{{ text.priorities[p] }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.labelFilter\" labelHidden [(value)]=\"label\">\n          <option value=\"\">{{ text.allLabels }}</option>\n          @for (l of catalog(); track l.id) {\n            <option [value]=\"l.id\">{{ l.name }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.dueFilter\" labelHidden [(value)]=\"due\">\n          <option value=\"\">{{ text.dueAny }}</option>\n          <option value=\"overdue\">{{ text.dueOverdueFilter }}</option>\n          <option value=\"soon\">{{ text.dueSoonFilter }}</option>\n        </hm-select>\n        <!-- A tela a mudar: \"M\u00F3dulo \u203A Tela\" (as de um m\u00F3dulo ficam juntas) e as novas, que ainda n\u00E3o existem. -->\n        <hm-select class=\"as-filters__select as-filters__select--wide\" [label]=\"text.screenFilter\" labelHidden [(value)]=\"screen\">\n          <option value=\"\">{{ text.allScreens }}</option>\n          @if (hasNewScreens()) {\n            <option [value]=\"newScreenValue\">{{ text.newScreenTag }}</option>\n          }\n          @for (sc of screens(); track sc.path) {\n            <option [value]=\"sc.path\">{{ sc.label }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.waitingFilter\" labelHidden [(value)]=\"waiting\">\n          <option value=\"\">{{ text.waitingFilter }}: {{ text.waitingAny }}</option>\n          @for (w of waitingValues; track w) {\n            <option [value]=\"w\">{{ text.waiting[w] }}</option>\n          }\n        </hm-select>\n        <button type=\"button\" class=\"as-filters__more\" [class.as-filters__more--on]=\"extraFilters() > 0\"\n                [attr.aria-expanded]=\"moreFilters()\" [attr.aria-controls]=\"moreFilters() ? 'as-more-filters' : null\"\n                (click)=\"moreFilters.set(!moreFilters())\">\n          <hm-icon shape=\"filter\" />{{ moreFiltersText() }}\n        </button>\n        <span class=\"as-filters__spacer\"></span>\n        <hm-select class=\"as-filters__select as-filters__sort\" [label]=\"text.sort\" labelHidden [value]=\"sort()\" (valueChange)=\"sort.set($any($event))\">\n          @for (k of sortKeys; track k) {\n            <option [value]=\"k\">{{ text.sort }}: {{ sortLabel(k) }}</option>\n          }\n        </hm-select>\n      </div>\n      @if (moreFilters()) {\n        <div class=\"as-filters as-filters--more\" id=\"as-more-filters\">\n          <hm-select class=\"as-filters__select\" [label]=\"text.groupFilter\" labelHidden [(value)]=\"group\">\n            <option value=\"\">{{ text.allGroups }}</option>\n            @for (g of groupOptions(); track g.id) {\n              <option [value]=\"g.id\">{{ g.name }}</option>\n            }\n            <option value=\"none\">{{ text.noGroups }}</option>\n          </hm-select>\n          <hm-select class=\"as-filters__select\" [label]=\"text.authorFilter\" labelHidden [(value)]=\"author\">\n            <option value=\"\">{{ text.allAuthors }}</option>\n            @for (p of authors(); track p.user_id) {\n              <option [value]=\"p.user_id\">{{ personName(p) }}</option>\n            }\n          </hm-select>\n        </div>\n      }\n      <div class=\"as-suggestions__status\">\n        @if (sort() !== 'position') {\n          <p class=\"as-suggestions__hint\">{{ text.sortHint }}</p>\n        }\n        @if (isFiltered()) {\n          <span class=\"as-suggestions__count\" aria-live=\"polite\">{{ filteredText() }}</span>\n          <hm-button size=\"small\" emphasis=\"minimal\" icon=\"filter-close\" (clicked)=\"clearFilters()\">{{ text.clearFilters }}</hm-button>\n        }\n      </div>\n\n      @if (!loading() && all().length === 0) {\n        <hm-empty icon=\"lightbulb\" [heading]=\"text.boardEmpty\" [description]=\"text.boardEmptyHint\" />\n      }\n\n      <hm-kanban class=\"as-board\" [label]=\"text.boardLabel\" [columns]=\"columns()\" [itemKey]=\"itemKey\" [itemLabel]=\"itemLabel\"\n                 (moved)=\"onMoved($event)\">\n        <!-- \"+\" no cabe\u00E7alho: abre o cadastro completo (o modal da \"Nova tarefa\") j\u00E1 nesta coluna. -->\n        <ng-template hmKanbanColumnActions let-column>\n          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"plus\" [label]=\"newTaskInLabel(column.id)\" (clicked)=\"newTask(column.id)\" />\n        </ng-template>\n\n        <!-- Logo abaixo do cabe\u00E7alho: h\u00E1 quanto tempo a mais antiga est\u00E1 no status e quantas venceram. -->\n        <ng-template hmKanbanColumnSummary let-column>\n          @if (columnSummaries().get(column.id); as sum) {\n            @if (sum.oldest) {\n              <span class=\"as-colsum\"><hm-icon shape=\"clock\" />{{ sum.oldest }}</span>\n            }\n            @if (sum.overdue) {\n              <span class=\"as-colsum as-colsum--late\"><hm-icon shape=\"alarm-clock\" />{{ sum.overdue }}</span>\n            }\n          }\n        </ng-template>\n\n        <!-- Coluna vazia: \u00EDcone grande, a frase e o que costuma cair nela (com filtro, \"nenhuma com estes filtros\"). -->\n        <ng-template hmKanbanColumnEmpty let-column>\n          <span class=\"as-colempty\">\n            <hm-icon class=\"as-colempty__icon\" [shape]=\"emptyIcon(column.id)\" />\n            <span class=\"as-colempty__title\">{{ text.columnEmpty }}</span>\n            <span class=\"as-colempty__hint\">{{ emptyHint(column.id) }}</span>\n          </span>\n        </ng-template>\n\n        <!-- Rodap\u00E9: \"+ Criar tarefa\" abre o mesmo cadastro, com o status da coluna j\u00E1 escolhido. -->\n        <ng-template hmKanbanColumnFooter let-column>\n          <button type=\"button\" class=\"as-colfoot\" (click)=\"newTask(column.id)\">\n            <hm-icon shape=\"plus\" />{{ text.createTask }}<span class=\"as-sr-only\">: {{ column.title }}</span>\n          </button>\n        </ng-template>\n\n        <ng-template hmKanbanCard let-item>\n          <div class=\"as-card\" [class.as-card--top]=\"isTop(item)\">\n            <div class=\"as-card__body\">\n              <!-- Uma linha s\u00F3: chave, tipo, prioridade (e o selo de mais votada) e o \"\u22EF\". -->\n              <div class=\"as-card__top\">\n                <span class=\"as-card__key\">{{ item.key }}</span>\n                <span class=\"as-card__kind\" [attr.data-kind]=\"item.kind\"><hm-icon [shape]=\"kindIcon(item)\" />{{ kindLabel(item) }}</span>\n                <span class=\"as-card__priority\" [attr.data-priority]=\"item.priority\">\n                  <hm-icon [shape]=\"priorityIcon(item)\" /><span class=\"as-sr-only\">{{ text.priority }}: </span>{{ priorityName(item) }}\n                </span>\n                @if (isTop(item)) {\n                  <span class=\"as-card__badge\" [attr.title]=\"text.topVoted\"><hm-icon shape=\"flame\" /><span class=\"as-sr-only\">{{ text.topVoted }}</span></span>\n                }\n                <span #menuAnchor class=\"as-card__menu\">\n                  <hm-menu-button size=\"small\" icon=\"ellipsis-vertical\" [showArrow]=\"false\" align=\"end\" [label]=\"menuLabel(item)\"\n                                  [items]=\"menuOf(item)\" (chosen)=\"onMenu(item, $event, menuAnchor)\" />\n                </span>\n              </div>\n              <button type=\"button\" class=\"as-card__title\" (click)=\"openDetail(item)\">{{ item.title }}</button>\n\n              <!-- Tudo o que identifica e situa a tarefa, lado a lado (quebra quando falta largura): a tela (o caminho\n                   inteiro na dica), \"Nova tela\", r\u00F3tulos, com quem est\u00E1 a vez, mensagens novas e o prazo. -->\n              <div class=\"as-card__chips\">\n                <span class=\"as-card__screen\" [class.as-card__screen--new]=\"item.screen.new\" [attr.title]=\"item.screen.label || null\">\n                  <hm-icon [shape]=\"item.screen.new ? 'plus' : 'application'\" />{{ screenNameOf(item) }}\n                </span>\n                @if (item.screen.new) { <span class=\"as-card__screen-tag\">{{ text.newScreenTag }}</span> }\n                <!-- Os r\u00F3tulos ocupam o resto da linha da tela; o que n\u00E3o cabe vira \"+N\" (n\u00E3o quebra a linha). -->\n                @if (item.labels.length) {\n                  <spine-tag-row class=\"as-card__labels\" [label]=\"text.labels\" [items]=\"labelTags(item)\" />\n                }\n                @if (item.waiting_on && item.status !== 'concluida' && item.status !== 'recusada') {\n                  <hm-tag [name]=\"waitingName(item)\" [color]=\"waitingColor(item)\" />\n                }\n                @if (item.unread) { <span class=\"as-card__unread\">{{ unreadText(item.unread) }}</span> }\n                @if (item.due_date) {\n                  <span class=\"as-card__due\" [attr.data-due]=\"dueOf(item) ?? 'closed'\"><hm-icon [shape]=\"dueIcon(item)\" />{{ dueText(item) }}</span>\n                }\n              </div>\n\n              <!-- Com o checklist no cart\u00E3o, a descri\u00E7\u00E3o sai (o checklist j\u00E1 diz o que falta). -->\n              @if (!cardItems(item).length && excerpt(item); as ex) {\n                <p class=\"as-card__excerpt\">{{ ex }}</p>\n              }\n              @if (cardItems(item).length && checklistOpen(item)) {\n                <ul class=\"as-card__checklist\" [id]=\"'as-card-checklist-' + item.id\">\n                  @for (c of cardItems(item); track c.id) {\n                    <li>\n                      <button type=\"button\" class=\"as-card__check\" [attr.aria-pressed]=\"c.done\" (click)=\"toggleCardItem(item, c)\">\n                        <hm-icon [shape]=\"c.done ? 'check-circle' : 'circle-empty'\" /><span [class.as-card__done]=\"c.done\">{{ c.text }}</span>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n\n              <!-- Rodap\u00E9: o checklist (abre e fecha os itens) \u00E0 esquerda; contadores, data, quem pediu e os respons\u00E1veis \u00E0 direita. -->\n              <div class=\"as-card__foot\">\n                @if (cardItems(item).length) {\n                  <button type=\"button\" class=\"as-card__checklist-toggle\" [class.as-card__count--full]=\"item.checklist.done === item.checklist.total\"\n                          [attr.aria-expanded]=\"checklistOpen(item)\" [attr.aria-controls]=\"checklistOpen(item) ? 'as-card-checklist-' + item.id : null\"\n                          (click)=\"toggleChecklist(item)\">\n                    <hm-icon shape=\"list-check\" />{{ cardChecklistText(item) }}<hm-icon [shape]=\"checklistOpen(item) ? 'angle-up' : 'angle-down'\" />\n                  </button>\n                } @else if (item.checklist.total) {\n                  <span class=\"as-card__count\" [class.as-card__count--full]=\"item.checklist.done === item.checklist.total\" [attr.title]=\"checklistText(item)\">\n                    <hm-icon shape=\"list-check\" /><span aria-hidden=\"true\">{{ item.checklist.done }}/{{ item.checklist.total }}</span><span class=\"as-sr-only\">{{ checklistText(item) }}</span>\n                  </span>\n                }\n                <span class=\"as-card__spacer\"></span>\n                <span class=\"as-card__count\" [class.as-card__count--zero]=\"!item.comments_count\" [attr.title]=\"commentsText(item.comments_count)\">\n                  <hm-icon shape=\"comment-message\" /><span aria-hidden=\"true\">{{ item.comments_count }}</span><span class=\"as-sr-only\">{{ commentsText(item.comments_count) }}</span>\n                </span>\n                <span class=\"as-card__count\" [class.as-card__count--on]=\"item.votes > 0\" [class.as-card__count--zero]=\"!item.votes\" [attr.title]=\"votesText(item.votes)\">\n                  <hm-icon shape=\"thumbs-up\" /><span aria-hidden=\"true\">{{ item.votes }}</span><span class=\"as-sr-only\">{{ votesText(item.votes) }}</span>\n                </span>\n                <span class=\"as-card__date\" [attr.title]=\"createdText(item)\">\n                  <hm-icon shape=\"clock\" /><span aria-hidden=\"true\">{{ date(item.created_at) }}</span><span class=\"as-sr-only\">{{ createdText(item) }}</span>\n                </span>\n                <!-- Quem pediu (a foto do autor e \"+N\" relatores das agrupadas) e, depois do fio, os respons\u00E1veis. -->\n                @if (item.author) {\n                  <span class=\"as-card__requesters\" [attr.title]=\"requestersText(item)\">\n                    <hm-account-avatar size=\"small\" [name]=\"personName(item.author)\" [imageUrl]=\"item.author.picture\" />\n                    @if (item.reporters_count) { <span class=\"as-card__more\">{{ moreText(item.reporters_count) }}</span> }\n                    <span class=\"as-sr-only\">{{ requestersText(item) }}</span>\n                  </span>\n                }\n                <span class=\"as-card__faces\">\n                  @for (p of faces(item); track p.user_id) {\n                    <hm-account-avatar size=\"small\" [name]=\"personName(p)\" [imageUrl]=\"p.picture\" [attr.title]=\"personName(p)\" />\n                  } @empty {\n                    <span class=\"as-card__nobody\" [attr.title]=\"text.assigneeNone\">\n                      <hm-icon shape=\"user-circle\" /><span class=\"as-sr-only\">{{ text.assigneeNone }}</span>\n                    </span>\n                  }\n                  @if (moreFaces(item); as more) { <span class=\"as-card__more\">{{ more }}</span> }\n                </span>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </hm-kanban>\n    }\n  } @else {\n    <!-- Arquivo: arquivadas, recusadas e conclu\u00EDdas fora da janela do quadro, paginado no servidor. -->\n    <div class=\"as-suggestions__filters\">\n      <hm-search-field class=\"as-suggestions__search\" [label]=\"text.archiveSearch\" labelHidden [placeholder]=\"text.archiveSearch\"\n                       [landmark]=\"false\" [debounce]=\"300\" [value]=\"archiveSearch()\" (search)=\"onArchiveSearch($event)\" />\n      <hm-select class=\"as-suggestions__select\" [label]=\"text.statusFilter\" labelHidden [value]=\"archiveStatus()\"\n                 (valueChange)=\"onArchiveFilter('status', $any($event))\">\n        <option value=\"\">{{ text.statusFilter }}: {{ text.allStatuses }}</option>\n        @for (st of statuses; track st) {\n          <option [value]=\"st\">{{ text.statuses[st] }}</option>\n        }\n      </hm-select>\n      <hm-select class=\"as-suggestions__select\" [label]=\"text.kindFilter\" labelHidden [value]=\"archiveKind()\"\n                 (valueChange)=\"onArchiveFilter('kind', $any($event))\">\n        <option value=\"\">{{ text.allKinds }}</option>\n        @for (k of kinds; track k) {\n          <option [value]=\"k\">{{ text.kinds[k] }}</option>\n        }\n      </hm-select>\n      @if (archiveTotal()) {\n        <span class=\"as-suggestions__count\" aria-live=\"polite\">{{ archiveCountText() }}</span>\n      }\n    </div>\n\n    @if (archiveError()) {\n      <hm-alert variant=\"error\">{{ archiveError() }}</hm-alert>\n    } @else if (!archiveLoading() && archived().length === 0) {\n      <hm-empty icon=\"archive\" [heading]=\"text.archiveEmpty\" [description]=\"archiveEmptyHint()\" />\n    } @else {\n      <ul class=\"as-archive\" [attr.aria-label]=\"text.archiveLabel\" [attr.aria-busy]=\"archiveLoading() ? 'true' : null\">\n        @for (s of archived(); track s.id) {\n          <li class=\"as-archive__item\">\n            <div class=\"as-archive__main\">\n              <div class=\"as-archive__tags\">\n                <span class=\"as-card__key\">{{ s.key }}</span>\n                <hm-tag [name]=\"text.statuses[s.status]\" [color]=\"statusColors[s.status]\" />\n                <hm-tag [name]=\"text.kinds[s.kind]\" [color]=\"kindColors[s.kind]\" />\n                @if (s.merged_into; as into) {\n                  <!-- Agrupada: no arquivo, com o destino; os coment\u00E1rios ficam nela. -->\n                  <hm-tag [name]=\"text.mergedTag\" color=\"info\" />\n                  <button type=\"button\" class=\"as-archive__link\" (click)=\"openTask(into.id)\">{{ mergedIntoText(into.key) }}</button>\n                } @else {\n                  <span class=\"as-archive__date\">{{ closedOn(s) }}</span>\n                }\n              </div>\n              <button type=\"button\" class=\"as-card__title\" (click)=\"openDetail(s)\">{{ s.title }}</button>\n              <div class=\"as-archive__meta\">\n                <hm-account-avatar size=\"small\" [name]=\"personName(s.author)\" [imageUrl]=\"s.author?.picture\" />\n                <span>{{ personName(s.author) }}</span>\n                <span aria-hidden=\"true\">\u00B7</span>\n                <span>{{ s.screen.label || text.noScreen }}</span>\n                @if (s.votes) {\n                  <span aria-hidden=\"true\">\u00B7</span>\n                  <span>{{ votesText(s.votes) }}</span>\n                }\n              </div>\n            </div>\n            @if (s.merged_into) {\n              <hm-button size=\"small\" emphasis=\"medium\" icon=\"unlink\" [loading]=\"reopening() === s.id\" (clicked)=\"unmergeFromArchive(s)\">\n                {{ text.unmerge }}\n              </hm-button>\n            } @else if (s.archived_at) {\n              <hm-button size=\"small\" emphasis=\"medium\" icon=\"unarchive\" [loading]=\"reopening() === s.id\" (clicked)=\"reopen(s)\">\n                {{ text.menuRestore }}\n              </hm-button>\n            } @else if (s.status === 'recusada') {\n              <hm-button size=\"small\" emphasis=\"medium\" icon=\"unarchive\" [loading]=\"reopening() === s.id\" (clicked)=\"reopen(s)\">\n                {{ text.reopen }}\n              </hm-button>\n            }\n          </li>\n        }\n      </ul>\n      @if (archiveTotal() > archivePage().size) {\n        <hm-paginator variant=\"simple\" [label]=\"text.pagination\" [state]=\"archivePage()\" [totalItems]=\"archiveTotal()\"\n                      [sizes]=\"[20, 50]\" (stateChanged)=\"onArchivePage($event)\" />\n      }\n    }\n  }\n</div>\n\n\n<spine-suggestion-task-detail [clientId]=\"clientId()\" [task]=\"selected()\" [draft]=\"drafting()\" [draftStatus]=\"draftStatus()\"\n                              [labels]=\"catalog()\" [canOpenScreen]=\"canOpenScreen()\"\n                              (changed)=\"replace($event)\" (created)=\"onCreated($event)\" (removed)=\"onRemoved($event)\"\n                              (closed)=\"closeDetail()\" (labelCreated)=\"onLabelCreated($event)\"\n                              (mergeRequested)=\"startMerge($event)\" (openTask)=\"openTask($event)\" (unmerged)=\"onUnmerged()\" />\n\n<!-- \"Agrupar em\u2026\" (do \"\u22EF\" do cart\u00E3o ou do detalhe): as abertas do quadro, com a pr\u00E9via do servidor. -->\n<spine-suggestion-merge-picker [clientId]=\"clientId()\" [source]=\"mergeSource()\" [candidates]=\"all()\"\n                               (merged)=\"onMerged($event)\" (closed)=\"mergeSource.set(null)\" />\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface-muted);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.as-tok--cat-1{--as-tok: var(--hm-data-categorical-1);background:var(--as-tok)}.as-tok--cat-2{--as-tok: var(--hm-data-categorical-2);background:var(--as-tok)}.as-tok--cat-3{--as-tok: var(--hm-data-categorical-3);background:var(--as-tok)}.as-tok--cat-4{--as-tok: var(--hm-data-categorical-4);background:var(--as-tok)}.as-tok--cat-5{--as-tok: var(--hm-data-categorical-5);background:var(--as-tok)}.as-tok--cat-6{--as-tok: var(--hm-data-categorical-6);background:var(--as-tok)}.as-tok--cat-7{--as-tok: var(--hm-data-categorical-7);background:var(--as-tok)}.as-tok--cat-8{--as-tok: var(--hm-data-categorical-8);background:var(--as-tok)}.as-label{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--as-tok, var(--hm-border)) 18%,var(--hm-surface-raised));color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-label:before{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-tok, var(--hm-border));content:\"\"}@media(forced-colors:active){.as-label{border:var(--hm-border-hairline) solid CanvasText}}:host{display:block;container-type:inline-size}.as-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.as-suggestions__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-suggestions__spacer{flex:1}.as-split{display:inline-flex;align-items:stretch}.as-split ::ng-deep hm-button .hm-btn{border-start-end-radius:0;border-end-end-radius:0}.as-split ::ng-deep .as-split__more .hm-menu-button{--hm-icon-btn-color: var(--hm-on-action);--hm-icon-btn-hover: var(--hm-action-hover);block-size:var(--hm-control-height);border-inline-start:var(--hm-border-hairline) solid color-mix(in srgb,var(--hm-on-action) 40%,transparent);border-start-start-radius:0;border-end-start-radius:0;background:var(--hm-action)}.as-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:var(--hm-space-xs)}.as-kpis[aria-busy=true] .as-kpi__value{color:var(--hm-muted)}.as-kpi{--as-tone: var(--hm-muted);--as-tone-bg: var(--hm-hover);--as-tint: 0%;display:flex;align-items:center;gap:var(--hm-space-xs);box-sizing:border-box;min-inline-size:0;margin:0;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid color-mix(in srgb,var(--as-tone) 35%,var(--hm-border));border-radius:var(--hm-radius);background:color-mix(in srgb,var(--as-tone) var(--as-tint),var(--hm-surface-raised));color:var(--hm-text);font:inherit;text-align:start}.as-kpi[data-tone=danger]{--as-tone: var(--hm-danger);--as-tone-bg: var(--hm-danger-bg);--as-tint: 7%}.as-kpi[data-tone=warning]{--as-tone: var(--hm-warning);--as-tone-bg: var(--hm-warning-bg);--as-tint: 7%}.as-kpi[data-tone=info]{--as-tone: var(--hm-info);--as-tone-bg: var(--hm-info-bg);--as-tint: 7%}.as-kpi[data-tone=success]{--as-tone: var(--hm-success);--as-tone-bg: var(--hm-success-bg);--as-tint: 7%}.as-kpi[data-tone=accent]{--as-tone: var(--hm-accent);--as-tone-bg: var(--hm-accent-subtle);--as-tint: 7%}.as-kpi--wide{grid-column:span 2}.as-kpi--wide .as-kpi__label{grid-column:1}.as-kpi--wide .as-kpi__bar{grid-row:1;grid-column:2;align-self:center}.as-kpi__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--hm-control-height);block-size:var(--hm-control-height);border-radius:var(--hm-radius);background:var(--as-tone-bg);color:var(--as-tone)}.as-kpi__icon hm-icon{--hm-icon-size: calc(var(--hm-control-height) * .55)}.as-kpi__body{display:grid;flex:1;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:var(--hm-space-xs);min-inline-size:0}.as-kpi__label{grid-row:1;grid-column:2;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-medium);text-overflow:ellipsis;white-space:nowrap}.as-kpi__note,.as-kpi__parts,.as-kpi__legend{grid-column:1/-1;min-inline-size:0}.as-kpi__value{grid-row:1;grid-column:1;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-bold);font-variant-numeric:tabular-nums;line-height:var(--hm-line-height-tight)}.as-kpi__note{overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-xs);text-overflow:ellipsis;white-space:nowrap}.as-kpi__note hm-icon{margin-inline-end:var(--hm-space-micro);vertical-align:middle}.as-kpi__note--up{color:var(--hm-danger);font-weight:var(--hm-font-weight-semibold)}.as-kpi__note--good{color:var(--hm-success);font-weight:var(--hm-font-weight-semibold)}.as-kpi__parts,.as-kpi__legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xs);font-size:var(--hm-font-size-xs)}.as-kpi__part{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);white-space:nowrap}.as-kpi__dot{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-dot, var(--hm-muted))}.as-kpi__part[data-status=em_analise]{--as-dot: var(--hm-info)}.as-kpi__part[data-status=planejada]{--as-dot: var(--hm-accent)}.as-kpi__part[data-status=em_desenvolvimento]{--as-dot: var(--hm-warning)}.as-kpi__bar{display:flex;gap:var(--hm-border-thin);block-size:var(--hm-space-xs);overflow:hidden;border-radius:var(--hm-radius-pill);background:var(--hm-hover)}.as-kpi__seg{flex:none;min-inline-size:var(--hm-space-micro);background:var(--as-dot, var(--hm-muted))}.as-kpi [data-priority=urgente]{--as-dot: var(--hm-danger)}.as-kpi [data-priority=alta]{--as-dot: var(--hm-warning)}.as-kpi [data-priority=media]{--as-dot: var(--hm-info)}.as-kpi [data-priority=baixa]{--as-dot: var(--hm-muted)}.as-kpi__chip{display:inline-flex;align-items:center;gap:var(--hm-space-micro);padding:0 var(--hm-space-xxxs);border:var(--hm-border-hairline) solid transparent;border-radius:var(--hm-radius-pill);background:none;color:var(--hm-text);font:inherit;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}.as-kpi__chip:hover:not(:disabled){background:var(--hm-hover)}.as-kpi__chip:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-kpi__chip[aria-pressed=true]{border-color:var(--hm-text);background:var(--hm-hover);font-weight:var(--hm-font-weight-semibold)}.as-kpi__chip:disabled{color:var(--hm-muted);cursor:default}button.as-kpi{cursor:pointer;transition:border-color var(--hm-duration-quick) var(--hm-ease-standard),background var(--hm-duration-quick) var(--hm-ease-standard)}button.as-kpi:hover{border-color:var(--as-tone)}button.as-kpi:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:var(--hm-border-hairline)}button.as-kpi[aria-pressed=true]{--as-tint: 16%;border-color:var(--as-tone);box-shadow:inset 0 0 0 var(--hm-border-thin) var(--as-tone)}.as-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-filters__search{flex:3 1 16rem;min-inline-size:0}.as-filters__select{flex:1 1 9rem;min-inline-size:8rem;max-inline-size:13rem}.as-filters__select--wide{max-inline-size:18rem}.as-filters__spacer{flex:1 0 0}.as-filters__more{display:inline-flex;flex:none;align-items:center;gap:var(--hm-space-nano);box-sizing:border-box;block-size:var(--hm-control-height);padding-inline:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);white-space:nowrap;cursor:pointer}.as-filters__more:hover{background:var(--hm-hover)}.as-filters__more:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-filters__more[aria-expanded=true],.as-filters__more--on{border-color:var(--hm-action);color:var(--hm-action);font-weight:var(--hm-font-weight-semibold)}.as-suggestions__status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs) var(--hm-space-sm)}.as-suggestions__hint{flex:1 1 20rem;margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-suggestions__count{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-suggestions__filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm)}.as-suggestions__search{flex:1 1 16rem;min-inline-size:0}.as-suggestions__select{flex:0 1 11rem;min-inline-size:9rem}.as-board{--hm-kanban-column-width: 17.5rem}.as-board ::ng-deep .hm-kanban__board{min-block-size:max(26rem,100dvh - 24rem)}.as-board ::ng-deep .hm-kanban-column{--as-status: var(--hm-border);flex:1 0 var(--hm-kanban-column-width);max-inline-size:36rem;gap:var(--hm-space-xs);border-block-start:var(--hm-border-thin) solid var(--as-status);background:color-mix(in srgb,var(--as-status) 9%,var(--hm-kanban-column-bg))}.as-board ::ng-deep .hm-kanban-column--collapsed{flex:0 0 var(--hm-kanban-collapsed-width)}.as-board ::ng-deep .hm-kanban-column[data-column=em_analise]{--as-status: var(--hm-info)}.as-board ::ng-deep .hm-kanban-column[data-column=planejada]{--as-status: var(--hm-accent)}.as-board ::ng-deep .hm-kanban-column[data-column=em_desenvolvimento]{--as-status: var(--hm-warning)}.as-board ::ng-deep .hm-kanban-column[data-column=concluida]{--as-status: var(--hm-success)}.as-board ::ng-deep .hm-kanban-column__title:before{display:inline-block;inline-size:.625rem;block-size:.625rem;margin-inline-end:var(--hm-space-xs);border-radius:50%;background:var(--as-status);content:\"\"}.as-board ::ng-deep .hm-kanban-column__count{padding-inline:var(--hm-space-xs);font-weight:var(--hm-font-weight-semibold)}.as-board ::ng-deep .hm-kanban-column__summary{padding-inline:var(--hm-space-micro)}.as-board ::ng-deep .hm-kanban-column__list{gap:var(--hm-space-xs)}.as-board ::ng-deep .hm-kanban-card{padding:0;overflow:hidden}.as-board ::ng-deep .hm-kanban-card:has(.as-card--top){border-color:var(--hm-warning)}.as-colsum{display:inline-flex;align-items:center;gap:var(--hm-space-micro);white-space:nowrap}.as-colsum--late{color:var(--hm-danger);font-weight:var(--hm-font-weight-semibold)}.as-colempty{display:flex;flex-direction:column;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-lg) var(--hm-space-sm);text-align:center}.as-colempty__icon{--hm-icon-size: var(--hm-control-height-large);color:var(--hm-muted);opacity:.6}.as-colempty__title{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.as-colempty__hint{max-inline-size:16rem;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-colfoot{display:flex;align-items:center;gap:var(--hm-space-nano);box-sizing:border-box;inline-size:100%;block-size:var(--hm-control-height-dense);padding-inline:var(--hm-space-xs);border:0;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-muted);font:inherit;font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold);cursor:pointer}.as-colfoot:hover{background:var(--hm-hover);color:var(--hm-text)}.as-colfoot:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-card{display:flex;flex-direction:column;min-inline-size:0}.as-card__body{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-xs) var(--hm-space-sm);min-inline-size:0}.as-card__top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xxxs);min-inline-size:0}.as-card__key{flex:none;color:var(--hm-muted);font-family:var(--hm-font-mono, monospace);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-card__menu{margin-inline-start:auto}.as-card__kind,.as-card__priority{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}.as-card__kind hm-icon,.as-card__priority hm-icon{--hm-icon-size: .875rem;color:var(--hm-muted)}.as-card__kind{color:var(--hm-action)}.as-card__kind[data-kind=melhoria] hm-icon{color:var(--hm-accent)}.as-card__kind[data-kind=nova_funcionalidade] hm-icon{color:var(--hm-info)}.as-card__kind[data-kind=problema] hm-icon{color:var(--hm-danger)}.as-card__priority[data-priority=urgente]{background:var(--hm-danger-bg);color:var(--hm-danger)}.as-card__priority[data-priority=urgente] hm-icon{color:var(--hm-danger)}.as-card__priority[data-priority=alta]{background:var(--hm-warning-bg)}.as-card__priority[data-priority=alta] hm-icon{color:var(--hm-warning)}.as-card__priority[data-priority=media]{background:var(--hm-info-bg)}.as-card__priority[data-priority=media] hm-icon{color:var(--hm-info)}.as-card__badge{display:inline-flex;align-items:center;padding:0 var(--hm-space-micro);border-radius:var(--hm-radius-pill);background:var(--hm-warning-bg);color:var(--hm-warning);line-height:1.6}.as-card__badge hm-icon{--hm-icon-size: .875rem}.as-card__title{padding:0;border:0;background:none;color:var(--hm-text);font:inherit;font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-snug);text-align:start;overflow-wrap:anywhere;cursor:pointer}.as-card__title:hover,.as-card__title:focus-visible{color:var(--hm-accent);text-decoration:underline}.as-card__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);min-inline-size:0}.as-card__labels{flex:1 1 5rem;min-inline-size:5rem}.as-card__screen{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-micro);background:var(--hm-surface-muted);color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow-wrap:anywhere}.as-card__screen>hm-icon{--hm-icon-size: .875rem;flex:none;color:var(--hm-muted)}.as-card__screen--new{border-color:transparent;background:var(--hm-info-bg)}.as-card__screen--new>hm-icon{color:var(--hm-info)}.as-card__screen-tag{flex:none;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;white-space:nowrap}.as-card__unread{color:var(--hm-accent);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-card__excerpt{margin:0;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-sm);white-space:nowrap;text-overflow:ellipsis}.as-card__checklist{display:flex;flex-direction:column;gap:1px;margin:0;padding:var(--hm-space-micro);border-radius:var(--hm-radius-control);background:var(--hm-hover);list-style:none}.as-card__check{display:flex;align-items:flex-start;gap:var(--hm-space-micro);inline-size:100%;padding:1px var(--hm-space-micro);border:0;border-radius:var(--hm-radius-control);background:none;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;cursor:pointer}.as-card__check[aria-pressed=true] hm-icon{color:var(--hm-success)}.as-card__check:hover{background:var(--hm-hover)}.as-card__check:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-card__done{color:var(--hm-muted);text-decoration:line-through}.as-card__checklist-toggle{display:inline-flex;align-items:center;gap:var(--hm-space-micro);padding:0 var(--hm-space-micro);border:0;border-radius:var(--hm-radius-control);background:none;color:var(--hm-muted);font:inherit;font-size:var(--hm-font-size-xs);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}.as-card__checklist-toggle:hover{background:var(--hm-hover);color:var(--hm-text)}.as-card__checklist-toggle:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-card__due{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-muted);font-size:var(--hm-font-size-xs);line-height:1.6;white-space:nowrap}.as-card__due[data-due=overdue]{background:var(--hm-danger-bg);color:var(--hm-danger);font-weight:var(--hm-font-weight-semibold)}.as-card__due[data-due=today],.as-card__due[data-due=tomorrow]{background:var(--hm-warning-bg);color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.as-card__due[data-due=today] hm-icon,.as-card__due[data-due=tomorrow] hm-icon{color:var(--hm-warning)}.as-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xs);margin-block-start:var(--hm-space-micro);padding-block-start:var(--hm-space-xxxs);border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.as-card__spacer{flex:1 1 auto}.as-card__count,.as-card__date{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-variant-numeric:tabular-nums;white-space:nowrap}.as-card__count--on{color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.as-card__count--full{color:var(--hm-success)}.as-card__count--zero{opacity:.75}.as-card__requesters{display:inline-flex;align-items:center;padding-inline-end:var(--hm-space-xxxs);border-inline-end:var(--hm-border-hairline) solid var(--hm-border)}.as-card__faces{display:inline-flex;align-items:center}.as-card__faces>hm-account-avatar{border-radius:50%;box-shadow:0 0 0 var(--hm-border-thin) var(--hm-kanban-card-bg, var(--hm-surface-raised))}.as-card__faces>hm-account-avatar+hm-account-avatar{margin-inline-start:calc(var(--hm-space-xs) * -1)}.as-card__more{margin-inline-start:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-card__nobody{display:inline-flex;color:var(--hm-muted);opacity:.7}.as-archive{display:flex;flex-direction:column;gap:var(--hm-space-xs);margin:0;padding:0;list-style:none}.as-archive[aria-busy=true]{opacity:.6}.as-archive__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm);padding:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.as-archive__main{display:flex;flex:1 1 20rem;flex-direction:column;gap:var(--hm-space-xxxs);min-inline-size:0}.as-archive__tags,.as-archive__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs) var(--hm-space-xs)}.as-archive__meta,.as-archive__date{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-archive__link{padding:0;border:0;background:none;color:var(--hm-accent);font:inherit;font-size:var(--hm-font-size-sm);cursor:pointer}.as-archive__link:hover{text-decoration:underline}.as-archive__link:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-thin)}@media(forced-colors:active){.as-kpi,.as-card__priority,.as-card__due{border:var(--hm-border-hairline) solid CanvasText}button.as-kpi[aria-pressed=true],.as-kpi__chip[aria-pressed=true]{outline:var(--hm-border-thin) solid Highlight}}@container (max-width: 52rem){.as-kpi--wide{grid-column:1/-1}}@container (max-width: 40rem){.as-kpis{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}.as-board{--hm-kanban-column-width: min(18rem, 85cqi)}.as-board ::ng-deep .hm-kanban__board{min-block-size:0;scroll-snap-type:x proximity;scroll-padding-inline:var(--hm-space-xs)}.as-board ::ng-deep .hm-kanban-column{flex:0 0 var(--hm-kanban-column-width);scroll-snap-align:start}.as-board ::ng-deep .hm-kanban-column--collapsed{flex:0 0 var(--hm-kanban-collapsed-width)}.as-filters__select,.as-suggestions__select{flex:1 1 9rem;max-inline-size:none}.as-filters__spacer{display:none}}\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: EmptyComponent, selector: "hm-empty", inputs: ["heading", "description", "icon", "appearance", "size", "headingLevel"] }, { kind: "component", type: IconButtonComponent, selector: "hm-icon-button", inputs: ["label", "icon", "solid", "iconDirection", "emphasis", "intent", "size", "disabled", "toggle", "pressed", "keyShortcuts"], outputs: ["pressedChange", "clicked"] }, { kind: "component", type: IconComponent, selector: "hm-icon", inputs: ["shape", "direction", "size", "solid", "badge", "status", "flip", "inverse", "label"] }, { kind: "directive", type: KanbanCardDirective, selector: "ng-template[hmKanbanCard]" }, { kind: "directive", type: KanbanColumnActionsDirective, selector: "ng-template[hmKanbanColumnActions]" }, { kind: "directive", type: KanbanColumnEmptyDirective, selector: "ng-template[hmKanbanColumnEmpty]" }, { kind: "directive", type: KanbanColumnFooterDirective, selector: "ng-template[hmKanbanColumnFooter]" }, { kind: "directive", type: KanbanColumnSummaryDirective, selector: "ng-template[hmKanbanColumnSummary]" }, { kind: "component", type: KanbanComponent, selector: "hm-kanban", inputs: ["columns", "collapsed", "canMove", "itemKey", "itemLabel", "label", "collapsible", "headingLevel", "disabled"], outputs: ["columnsChange", "collapsedChange", "moved"] }, { 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: 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: SelectComponent, selector: "hm-select", inputs: ["value", "label", "labelHidden", "hint"], outputs: ["valueChange"] }, { kind: "component", type: SpineTagRowComponent, selector: "spine-tag-row", inputs: ["items", "label", "empty"] }, { kind: "component", type: SuggestionMergePickerComponent, selector: "spine-suggestion-merge-picker", inputs: ["clientId", "source", "candidates"], outputs: ["merged", "closed"] }, { kind: "component", type: SuggestionTaskDetailComponent, selector: "spine-suggestion-task-detail", inputs: ["clientId", "task", "draft", "draftStatus", "labels", "canOpenScreen"], outputs: ["changed", "created", "removed", "closed", "labelCreated", "mergeRequested", "openTask", "unmerged"] }, { 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: AutoServiceSuggestionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-auto-service-suggestions', imports: [
+                        AccountAvatarComponent, AlertComponent, ButtonComponent, EmptyComponent, IconButtonComponent, IconComponent,
+                        KanbanCardDirective, KanbanColumnActionsDirective, KanbanColumnEmptyDirective, KanbanColumnFooterDirective,
+                        KanbanColumnSummaryDirective, KanbanComponent, MenuButtonComponent, PaginatorComponent,
+                        SearchFieldComponent, SegmentedControlComponent, SelectComponent, SpineTagRowComponent, SuggestionMergePickerComponent,
+                        SuggestionTaskDetailComponent, TagComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"as-stack as-suggestions\">\n  <!-- Quadro x Arquivo, o atualizar e a nova tarefa (com o \"\u25BE\" para criar direto numa coluna). -->\n  <div class=\"as-suggestions__bar\">\n    <hm-segmented-control [label]=\"text.viewLabel\" [options]=\"modeOptions\" [value]=\"mode()\" (valueChange)=\"setMode($event)\" />\n    <span class=\"as-suggestions__spacer\"></span>\n    <hm-icon-button emphasis=\"subtle\" icon=\"refresh\" [label]=\"text.refresh\" (clicked)=\"refresh()\" />\n    <span class=\"as-split\" role=\"group\" [attr.aria-label]=\"text.newTask\">\n      <hm-button icon=\"plus\" (clicked)=\"newTask()\">{{ text.newTask }}</hm-button>\n      <hm-menu-button class=\"as-split__more\" icon=\"chevron-down\" [showArrow]=\"false\" align=\"end\" [label]=\"text.newTaskOptions\"\n                      [items]=\"newTaskItems\" (chosen)=\"newTask($any($event))\" />\n    </span>\n  </div>\n\n  @if (mode() === 'board') {\n    @if (loadError()) {\n      <hm-alert variant=\"error\">{{ loadError() }}</hm-alert>\n    } @else {\n      <!-- Indicadores do quadro inteiro (o filtro n\u00E3o mexe neles). Os bot\u00F5es filtram: vencidas, vencendo em breve,\n           atribu\u00EDdas a mim e cada prioridade da legenda. Cor sempre com texto junto. -->\n      <section class=\"as-kpis\" [attr.aria-label]=\"text.kpis\" [attr.aria-busy]=\"kpiLoading() ? 'true' : null\">\n        <button type=\"button\" class=\"as-kpi\" data-tone=\"danger\" [attr.aria-pressed]=\"due() === 'overdue'\"\n                (click)=\"toggleKpi('overdue', due() !== 'overdue')\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"alarm-clock\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiOverdue }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().overdue }}</span>\n            <span class=\"as-kpi__note\" [class.as-kpi__note--up]=\"stats().overdueNew > 0\">\n              @if (stats().overdueNew) { <hm-icon shape=\"arrow-up\" /> }{{ overdueNote() }}\n            </span>\n          </span>\n        </button>\n\n        <button type=\"button\" class=\"as-kpi\" data-tone=\"warning\" [attr.aria-pressed]=\"due() === 'soon'\"\n                (click)=\"toggleKpi('soon', due() !== 'soon')\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"hourglass\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiSoon }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().soon }}</span>\n            <span class=\"as-kpi__note\">{{ text.dueSoonFilter }}</span>\n          </span>\n        </button>\n\n        <!-- A vez \u00E9 da equipe: quem pediu escreveu na conversa. A nota conta as mensagens ainda n\u00E3o lidas. -->\n        <button type=\"button\" class=\"as-kpi\" data-tone=\"accent\" [attr.aria-pressed]=\"waiting() === 'responsaveis'\"\n                (click)=\"toggleKpi('waiting', waiting() !== 'responsaveis')\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"chat-bubble\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.waiting.responsaveis }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().waitingTeam }}</span>\n            <span class=\"as-kpi__note\" [class.as-kpi__note--up]=\"stats().unread > 0\">{{ unreadText(stats().unread) }}</span>\n          </span>\n        </button>\n\n        <div class=\"as-kpi\" data-tone=\"info\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon [shape]=\"statusIcons.em_desenvolvimento\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiOpen }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().open }}</span>\n            <span class=\"as-kpi__parts\">\n              @for (part of openParts(); track part.status) {\n                <span class=\"as-kpi__part\" [attr.data-status]=\"part.status\"><span class=\"as-kpi__dot\" aria-hidden=\"true\"></span>{{ part.text }}</span>\n              }\n            </span>\n          </span>\n        </div>\n\n        <div class=\"as-kpi\" data-tone=\"success\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon [shape]=\"statusIcons.concluida\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ doneLabel() }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().concluida }}</span>\n            <span class=\"as-kpi__note\" [class.as-kpi__note--good]=\"stats().doneToday > 0\">\n              @if (stats().doneToday) { <hm-icon shape=\"arrow-up\" /> }{{ doneNote() }}\n            </span>\n          </span>\n        </div>\n\n        <button type=\"button\" class=\"as-kpi\" data-tone=\"accent\" [attr.aria-pressed]=\"assignee() === 'me'\"\n                (click)=\"toggleKpi('mine', assignee() !== 'me')\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"user-checkmark\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiMine }}</span>\n            <span class=\"as-kpi__value\">{{ kpiLoading() ? '\u2014' : stats().mine }}</span>\n            <span class=\"as-kpi__note\">{{ text.kpiMineHint }}</span>\n          </span>\n        </button>\n\n        <div class=\"as-kpi as-kpi--wide\" data-tone=\"neutral\">\n          <span class=\"as-kpi__icon\" aria-hidden=\"true\"><hm-icon shape=\"bar-chart\" /></span>\n          <span class=\"as-kpi__body\">\n            <span class=\"as-kpi__label\">{{ text.kpiPriority }}</span>\n            @if (stats().open) {\n              <span class=\"as-kpi__bar\" aria-hidden=\"true\">\n                @for (p of stats().byPriority; track p.priority) {\n                  @if (p.count) {\n                    <span class=\"as-kpi__seg\" [attr.data-priority]=\"p.priority\" [style.inline-size.%]=\"priorityShare(p.count)\"></span>\n                  }\n                }\n              </span>\n              <span class=\"as-kpi__legend\">\n                @for (p of stats().byPriority; track p.priority) {\n                  <button type=\"button\" class=\"as-kpi__chip\" [attr.data-priority]=\"p.priority\" [attr.aria-pressed]=\"priority() === p.priority\"\n                          [disabled]=\"!p.count && priority() !== p.priority\" (click)=\"togglePriority(p.priority)\">\n                    <span class=\"as-kpi__dot\" aria-hidden=\"true\"></span>{{ priorityPart(p.priority, p.count) }}\n                  </button>\n                }\n              </span>\n            } @else {\n              <span class=\"as-kpi__note\">{{ text.kpiPriorityNone }}</span>\n            }\n          </span>\n        </div>\n      </section>\n\n      <!-- Filtros numa linha: busca larga, os mais usados e \"Mais filtros\" (tela, quem pediu); \u00E0 direita, a ordena\u00E7\u00E3o.\n           Valem sobre a lista inteira: a posi\u00E7\u00E3o gravada ao arrastar \u00E9 sempre a da coluna inteira. -->\n      <div class=\"as-filters\" role=\"group\" [attr.aria-label]=\"text.filters\">\n        <hm-search-field class=\"as-filters__search\" [label]=\"text.search\" labelHidden [placeholder]=\"text.search\"\n                         [landmark]=\"false\" [debounce]=\"150\" [value]=\"search()\" (search)=\"search.set($event)\" />\n        <hm-select class=\"as-filters__select\" [label]=\"text.assigneeFilter\" labelHidden [(value)]=\"assignee\">\n          <option value=\"\">{{ text.allAssignees }}</option>\n          <option value=\"me\">{{ text.assigneeMine }}</option>\n          <option value=\"none\">{{ text.assigneeNone }}</option>\n          @for (p of assigneeOptions(); track p.user_id) {\n            <option [value]=\"p.user_id\">{{ personName(p) }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.kindFilter\" labelHidden [(value)]=\"kind\">\n          <option value=\"\">{{ text.allKinds }}</option>\n          @for (k of kinds; track k) {\n            <option [value]=\"k\">{{ text.kinds[k] }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.statusFilter\" labelHidden [(value)]=\"status\">\n          <option value=\"\">{{ text.allBoardStatuses }}</option>\n          @for (st of boardStatuses; track st) {\n            <option [value]=\"st\">{{ text.statuses[st] }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.priorityFilter\" labelHidden [(value)]=\"priority\">\n          <option value=\"\">{{ text.allPriorities }}</option>\n          @for (p of priorities; track p) {\n            <option [value]=\"p\">{{ text.priorities[p] }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.labelFilter\" labelHidden [(value)]=\"label\">\n          <option value=\"\">{{ text.allLabels }}</option>\n          @for (l of catalog(); track l.id) {\n            <option [value]=\"l.id\">{{ l.name }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.dueFilter\" labelHidden [(value)]=\"due\">\n          <option value=\"\">{{ text.dueAny }}</option>\n          <option value=\"overdue\">{{ text.dueOverdueFilter }}</option>\n          <option value=\"soon\">{{ text.dueSoonFilter }}</option>\n        </hm-select>\n        <!-- A tela a mudar: \"M\u00F3dulo \u203A Tela\" (as de um m\u00F3dulo ficam juntas) e as novas, que ainda n\u00E3o existem. -->\n        <hm-select class=\"as-filters__select as-filters__select--wide\" [label]=\"text.screenFilter\" labelHidden [(value)]=\"screen\">\n          <option value=\"\">{{ text.allScreens }}</option>\n          @if (hasNewScreens()) {\n            <option [value]=\"newScreenValue\">{{ text.newScreenTag }}</option>\n          }\n          @for (sc of screens(); track sc.path) {\n            <option [value]=\"sc.path\">{{ sc.label }}</option>\n          }\n        </hm-select>\n        <hm-select class=\"as-filters__select\" [label]=\"text.waitingFilter\" labelHidden [(value)]=\"waiting\">\n          <option value=\"\">{{ text.waitingFilter }}: {{ text.waitingAny }}</option>\n          @for (w of waitingValues; track w) {\n            <option [value]=\"w\">{{ text.waiting[w] }}</option>\n          }\n        </hm-select>\n        <button type=\"button\" class=\"as-filters__more\" [class.as-filters__more--on]=\"extraFilters() > 0\"\n                [attr.aria-expanded]=\"moreFilters()\" [attr.aria-controls]=\"moreFilters() ? 'as-more-filters' : null\"\n                (click)=\"moreFilters.set(!moreFilters())\">\n          <hm-icon shape=\"filter\" />{{ moreFiltersText() }}\n        </button>\n        <span class=\"as-filters__spacer\"></span>\n        <hm-select class=\"as-filters__select as-filters__sort\" [label]=\"text.sort\" labelHidden [value]=\"sort()\" (valueChange)=\"sort.set($any($event))\">\n          @for (k of sortKeys; track k) {\n            <option [value]=\"k\">{{ text.sort }}: {{ sortLabel(k) }}</option>\n          }\n        </hm-select>\n      </div>\n      @if (moreFilters()) {\n        <div class=\"as-filters as-filters--more\" id=\"as-more-filters\">\n          <hm-select class=\"as-filters__select\" [label]=\"text.groupFilter\" labelHidden [(value)]=\"group\">\n            <option value=\"\">{{ text.allGroups }}</option>\n            @for (g of groupOptions(); track g.id) {\n              <option [value]=\"g.id\">{{ g.name }}</option>\n            }\n            <option value=\"none\">{{ text.noGroups }}</option>\n          </hm-select>\n          <hm-select class=\"as-filters__select\" [label]=\"text.authorFilter\" labelHidden [(value)]=\"author\">\n            <option value=\"\">{{ text.allAuthors }}</option>\n            @for (p of authors(); track p.user_id) {\n              <option [value]=\"p.user_id\">{{ personName(p) }}</option>\n            }\n          </hm-select>\n        </div>\n      }\n      <div class=\"as-suggestions__status\">\n        @if (sort() !== 'position') {\n          <p class=\"as-suggestions__hint\">{{ text.sortHint }}</p>\n        }\n        @if (isFiltered()) {\n          <span class=\"as-suggestions__count\" aria-live=\"polite\">{{ filteredText() }}</span>\n          <hm-button size=\"small\" emphasis=\"minimal\" icon=\"filter-close\" (clicked)=\"clearFilters()\">{{ text.clearFilters }}</hm-button>\n        }\n      </div>\n\n      @if (!loading() && all().length === 0) {\n        <hm-empty icon=\"lightbulb\" [heading]=\"text.boardEmpty\" [description]=\"text.boardEmptyHint\" />\n      }\n\n      <hm-kanban class=\"as-board\" [label]=\"text.boardLabel\" [columns]=\"columns()\" [itemKey]=\"itemKey\" [itemLabel]=\"itemLabel\"\n                 (moved)=\"onMoved($event)\">\n        <!-- \"+\" no cabe\u00E7alho: abre o cadastro completo (o modal da \"Nova tarefa\") j\u00E1 nesta coluna. -->\n        <ng-template hmKanbanColumnActions let-column>\n          <hm-icon-button size=\"small\" emphasis=\"subtle\" icon=\"plus\" [label]=\"newTaskInLabel(column.id)\" (clicked)=\"newTask(column.id)\" />\n        </ng-template>\n\n        <!-- Logo abaixo do cabe\u00E7alho: h\u00E1 quanto tempo a mais antiga est\u00E1 no status e quantas venceram. -->\n        <ng-template hmKanbanColumnSummary let-column>\n          @if (columnSummaries().get(column.id); as sum) {\n            @if (sum.oldest) {\n              <span class=\"as-colsum\"><hm-icon shape=\"clock\" />{{ sum.oldest }}</span>\n            }\n            @if (sum.overdue) {\n              <span class=\"as-colsum as-colsum--late\"><hm-icon shape=\"alarm-clock\" />{{ sum.overdue }}</span>\n            }\n          }\n        </ng-template>\n\n        <!-- Coluna vazia: \u00EDcone grande, a frase e o que costuma cair nela (com filtro, \"nenhuma com estes filtros\"). -->\n        <ng-template hmKanbanColumnEmpty let-column>\n          <span class=\"as-colempty\">\n            <hm-icon class=\"as-colempty__icon\" [shape]=\"emptyIcon(column.id)\" />\n            <span class=\"as-colempty__title\">{{ text.columnEmpty }}</span>\n            <span class=\"as-colempty__hint\">{{ emptyHint(column.id) }}</span>\n          </span>\n        </ng-template>\n\n        <!-- Rodap\u00E9: \"+ Criar tarefa\" abre o mesmo cadastro, com o status da coluna j\u00E1 escolhido. -->\n        <ng-template hmKanbanColumnFooter let-column>\n          <button type=\"button\" class=\"as-colfoot\" (click)=\"newTask(column.id)\">\n            <hm-icon shape=\"plus\" />{{ text.createTask }}<span class=\"as-sr-only\">: {{ column.title }}</span>\n          </button>\n        </ng-template>\n\n        <ng-template hmKanbanCard let-item>\n          <div class=\"as-card\" [class.as-card--top]=\"isTop(item)\">\n            <div class=\"as-card__body\">\n              <!-- Uma linha s\u00F3: chave, tipo, prioridade (e o selo de mais votada) e o \"\u22EF\". -->\n              <div class=\"as-card__top\">\n                <span class=\"as-card__key\">{{ item.key }}</span>\n                <span class=\"as-card__kind\" [attr.data-kind]=\"item.kind\"><hm-icon [shape]=\"kindIcon(item)\" />{{ kindLabel(item) }}</span>\n                <span class=\"as-card__priority\" [attr.data-priority]=\"item.priority\">\n                  <hm-icon [shape]=\"priorityIcon(item)\" /><span class=\"as-sr-only\">{{ text.priority }}: </span>{{ priorityName(item) }}\n                </span>\n                @if (isTop(item)) {\n                  <span class=\"as-card__badge\" [attr.title]=\"text.topVoted\"><hm-icon shape=\"flame\" /><span class=\"as-sr-only\">{{ text.topVoted }}</span></span>\n                }\n                <span #menuAnchor class=\"as-card__menu\">\n                  <hm-menu-button size=\"small\" icon=\"ellipsis-vertical\" [showArrow]=\"false\" align=\"end\" [label]=\"menuLabel(item)\"\n                                  [items]=\"menuOf(item)\" (chosen)=\"onMenu(item, $event, menuAnchor)\" />\n                </span>\n              </div>\n              <button type=\"button\" class=\"as-card__title\" (click)=\"openDetail(item)\">{{ item.title }}</button>\n\n              <!-- Tudo o que identifica e situa a tarefa, lado a lado (quebra quando falta largura): a tela (o caminho\n                   inteiro na dica), \"Nova tela\", r\u00F3tulos, com quem est\u00E1 a vez, mensagens novas e o prazo. -->\n              <div class=\"as-card__chips\">\n                <span class=\"as-card__screen\" [class.as-card__screen--new]=\"item.screen.new\" [attr.title]=\"item.screen.label || null\">\n                  <hm-icon [shape]=\"item.screen.new ? 'plus' : 'application'\" />{{ screenNameOf(item) }}\n                </span>\n                @if (item.screen.new) { <span class=\"as-card__screen-tag\">{{ text.newScreenTag }}</span> }\n                <!-- Os r\u00F3tulos ocupam o resto da linha da tela; o que n\u00E3o cabe vira \"+N\" (n\u00E3o quebra a linha). -->\n                @if (item.labels.length) {\n                  <spine-tag-row class=\"as-card__labels\" [label]=\"text.labels\" [items]=\"labelTags(item)\" />\n                }\n                @if (item.waiting_on && item.status !== 'concluida' && item.status !== 'recusada') {\n                  <hm-tag [name]=\"waitingName(item)\" [color]=\"waitingColor(item)\" />\n                }\n                @if (item.unread) { <span class=\"as-card__unread\">{{ unreadText(item.unread) }}</span> }\n                @if (item.due_date) {\n                  <span class=\"as-card__due\" [attr.data-due]=\"dueOf(item) ?? 'closed'\"><hm-icon [shape]=\"dueIcon(item)\" />{{ dueText(item) }}</span>\n                }\n              </div>\n\n              <!-- Com o checklist no cart\u00E3o, a descri\u00E7\u00E3o sai (o checklist j\u00E1 diz o que falta). -->\n              @if (!cardItems(item).length && excerpt(item); as ex) {\n                <p class=\"as-card__excerpt\">{{ ex }}</p>\n              }\n              @if (cardItems(item).length && checklistOpen(item)) {\n                <ul class=\"as-card__checklist\" [id]=\"'as-card-checklist-' + item.id\">\n                  @for (c of cardItems(item); track c.id) {\n                    <li>\n                      <button type=\"button\" class=\"as-card__check\" [attr.aria-pressed]=\"c.done\" (click)=\"toggleCardItem(item, c)\">\n                        <hm-icon [shape]=\"c.done ? 'check-circle' : 'circle-empty'\" /><span [class.as-card__done]=\"c.done\">{{ c.text }}</span>\n                      </button>\n                    </li>\n                  }\n                </ul>\n              }\n\n              <!-- Rodap\u00E9: o checklist (abre e fecha os itens) \u00E0 esquerda; contadores, data, quem pediu e os respons\u00E1veis \u00E0 direita. -->\n              <div class=\"as-card__foot\">\n                @if (cardItems(item).length) {\n                  <button type=\"button\" class=\"as-card__checklist-toggle\" [class.as-card__count--full]=\"item.checklist.done === item.checklist.total\"\n                          [attr.aria-expanded]=\"checklistOpen(item)\" [attr.aria-controls]=\"checklistOpen(item) ? 'as-card-checklist-' + item.id : null\"\n                          (click)=\"toggleChecklist(item)\">\n                    <hm-icon shape=\"list-check\" />{{ cardChecklistText(item) }}<hm-icon [shape]=\"checklistOpen(item) ? 'angle-up' : 'angle-down'\" />\n                  </button>\n                } @else if (item.checklist.total) {\n                  <span class=\"as-card__count\" [class.as-card__count--full]=\"item.checklist.done === item.checklist.total\" [attr.title]=\"checklistText(item)\">\n                    <hm-icon shape=\"list-check\" /><span aria-hidden=\"true\">{{ item.checklist.done }}/{{ item.checklist.total }}</span><span class=\"as-sr-only\">{{ checklistText(item) }}</span>\n                  </span>\n                }\n                <span class=\"as-card__spacer\"></span>\n                <span class=\"as-card__count\" [class.as-card__count--zero]=\"!item.comments_count\" [attr.title]=\"commentsText(item.comments_count)\">\n                  <hm-icon shape=\"comment-message\" /><span aria-hidden=\"true\">{{ item.comments_count }}</span><span class=\"as-sr-only\">{{ commentsText(item.comments_count) }}</span>\n                </span>\n                <span class=\"as-card__count\" [class.as-card__count--on]=\"item.votes > 0\" [class.as-card__count--zero]=\"!item.votes\" [attr.title]=\"votesText(item.votes)\">\n                  <hm-icon shape=\"thumbs-up\" /><span aria-hidden=\"true\">{{ item.votes }}</span><span class=\"as-sr-only\">{{ votesText(item.votes) }}</span>\n                </span>\n                <span class=\"as-card__date\" [attr.title]=\"createdText(item)\">\n                  <hm-icon shape=\"clock\" /><span aria-hidden=\"true\">{{ date(item.created_at) }}</span><span class=\"as-sr-only\">{{ createdText(item) }}</span>\n                </span>\n                <!-- Quem pediu (a foto do autor e \"+N\" relatores das agrupadas) e, depois do fio, os respons\u00E1veis. -->\n                @if (item.author) {\n                  <span class=\"as-card__requesters\" [attr.title]=\"requestersText(item)\">\n                    <hm-account-avatar size=\"small\" [name]=\"personName(item.author)\" [imageUrl]=\"item.author.picture\" />\n                    @if (item.reporters_count) { <span class=\"as-card__more\">{{ moreText(item.reporters_count) }}</span> }\n                    <span class=\"as-sr-only\">{{ requestersText(item) }}</span>\n                  </span>\n                }\n                <span class=\"as-card__faces\">\n                  @for (p of faces(item); track p.user_id) {\n                    <hm-account-avatar size=\"small\" [name]=\"personName(p)\" [imageUrl]=\"p.picture\" [attr.title]=\"personName(p)\" />\n                  } @empty {\n                    <span class=\"as-card__nobody\" [attr.title]=\"text.assigneeNone\">\n                      <hm-icon shape=\"user-circle\" /><span class=\"as-sr-only\">{{ text.assigneeNone }}</span>\n                    </span>\n                  }\n                  @if (moreFaces(item); as more) { <span class=\"as-card__more\">{{ more }}</span> }\n                </span>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </hm-kanban>\n    }\n  } @else {\n    <!-- Arquivo: arquivadas, recusadas e conclu\u00EDdas fora da janela do quadro, paginado no servidor. -->\n    <div class=\"as-suggestions__filters\">\n      <hm-search-field class=\"as-suggestions__search\" [label]=\"text.archiveSearch\" labelHidden [placeholder]=\"text.archiveSearch\"\n                       [landmark]=\"false\" [debounce]=\"300\" [value]=\"archiveSearch()\" (search)=\"onArchiveSearch($event)\" />\n      <hm-select class=\"as-suggestions__select\" [label]=\"text.statusFilter\" labelHidden [value]=\"archiveStatus()\"\n                 (valueChange)=\"onArchiveFilter('status', $any($event))\">\n        <option value=\"\">{{ text.statusFilter }}: {{ text.allStatuses }}</option>\n        @for (st of statuses; track st) {\n          <option [value]=\"st\">{{ text.statuses[st] }}</option>\n        }\n      </hm-select>\n      <hm-select class=\"as-suggestions__select\" [label]=\"text.kindFilter\" labelHidden [value]=\"archiveKind()\"\n                 (valueChange)=\"onArchiveFilter('kind', $any($event))\">\n        <option value=\"\">{{ text.allKinds }}</option>\n        @for (k of kinds; track k) {\n          <option [value]=\"k\">{{ text.kinds[k] }}</option>\n        }\n      </hm-select>\n      @if (archiveTotal()) {\n        <span class=\"as-suggestions__count\" aria-live=\"polite\">{{ archiveCountText() }}</span>\n      }\n    </div>\n\n    @if (archiveError()) {\n      <hm-alert variant=\"error\">{{ archiveError() }}</hm-alert>\n    } @else if (!archiveLoading() && archived().length === 0) {\n      <hm-empty icon=\"archive\" [heading]=\"text.archiveEmpty\" [description]=\"archiveEmptyHint()\" />\n    } @else {\n      <ul class=\"as-archive\" [attr.aria-label]=\"text.archiveLabel\" [attr.aria-busy]=\"archiveLoading() ? 'true' : null\">\n        @for (s of archived(); track s.id) {\n          <li class=\"as-archive__item\">\n            <div class=\"as-archive__main\">\n              <div class=\"as-archive__tags\">\n                <span class=\"as-card__key\">{{ s.key }}</span>\n                <hm-tag [name]=\"text.statuses[s.status]\" [color]=\"statusColors[s.status]\" />\n                <hm-tag [name]=\"text.kinds[s.kind]\" [color]=\"kindColors[s.kind]\" />\n                @if (s.merged_into; as into) {\n                  <!-- Agrupada: no arquivo, com o destino; os coment\u00E1rios ficam nela. -->\n                  <hm-tag [name]=\"text.mergedTag\" color=\"info\" />\n                  <button type=\"button\" class=\"as-archive__link\" (click)=\"openTask(into.id)\">{{ mergedIntoText(into.key) }}</button>\n                } @else {\n                  <span class=\"as-archive__date\">{{ closedOn(s) }}</span>\n                }\n              </div>\n              <button type=\"button\" class=\"as-card__title\" (click)=\"openDetail(s)\">{{ s.title }}</button>\n              <div class=\"as-archive__meta\">\n                <hm-account-avatar size=\"small\" [name]=\"personName(s.author)\" [imageUrl]=\"s.author?.picture\" />\n                <span>{{ personName(s.author) }}</span>\n                <span aria-hidden=\"true\">\u00B7</span>\n                <span>{{ s.screen.label || text.noScreen }}</span>\n                @if (s.votes) {\n                  <span aria-hidden=\"true\">\u00B7</span>\n                  <span>{{ votesText(s.votes) }}</span>\n                }\n              </div>\n            </div>\n            @if (s.merged_into) {\n              <hm-button size=\"small\" emphasis=\"medium\" icon=\"unlink\" [loading]=\"reopening() === s.id\" (clicked)=\"unmergeFromArchive(s)\">\n                {{ text.unmerge }}\n              </hm-button>\n            } @else if (s.archived_at) {\n              <hm-button size=\"small\" emphasis=\"medium\" icon=\"unarchive\" [loading]=\"reopening() === s.id\" (clicked)=\"reopen(s)\">\n                {{ text.menuRestore }}\n              </hm-button>\n            } @else if (s.status === 'recusada') {\n              <hm-button size=\"small\" emphasis=\"medium\" icon=\"unarchive\" [loading]=\"reopening() === s.id\" (clicked)=\"reopen(s)\">\n                {{ text.reopen }}\n              </hm-button>\n            }\n          </li>\n        }\n      </ul>\n      @if (archiveTotal() > archivePage().size) {\n        <hm-paginator variant=\"simple\" [label]=\"text.pagination\" [state]=\"archivePage()\" [totalItems]=\"archiveTotal()\"\n                      [sizes]=\"[20, 50]\" (stateChanged)=\"onArchivePage($event)\" />\n      }\n    }\n  }\n</div>\n\n\n<spine-suggestion-task-detail [clientId]=\"clientId()\" [task]=\"selected()\" [draft]=\"drafting()\" [draftStatus]=\"draftStatus()\"\n                              [labels]=\"catalog()\" [canOpenScreen]=\"canOpenScreen()\"\n                              (changed)=\"replace($event)\" (created)=\"onCreated($event)\" (removed)=\"onRemoved($event)\"\n                              (closed)=\"closeDetail()\" (labelCreated)=\"onLabelCreated($event)\"\n                              (mergeRequested)=\"startMerge($event)\" (openTask)=\"openTask($event)\" (unmerged)=\"onUnmerged()\" />\n\n<!-- \"Agrupar em\u2026\" (do \"\u22EF\" do cart\u00E3o ou do detalhe): as abertas do quadro, com a pr\u00E9via do servidor. -->\n<spine-suggestion-merge-picker [clientId]=\"clientId()\" [source]=\"mergeSource()\" [candidates]=\"all()\"\n                               (merged)=\"onMerged($event)\" (closed)=\"mergeSource.set(null)\" />\n", styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface-muted);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.as-tok--cat-1{--as-tok: var(--hm-data-categorical-1);background:var(--as-tok)}.as-tok--cat-2{--as-tok: var(--hm-data-categorical-2);background:var(--as-tok)}.as-tok--cat-3{--as-tok: var(--hm-data-categorical-3);background:var(--as-tok)}.as-tok--cat-4{--as-tok: var(--hm-data-categorical-4);background:var(--as-tok)}.as-tok--cat-5{--as-tok: var(--hm-data-categorical-5);background:var(--as-tok)}.as-tok--cat-6{--as-tok: var(--hm-data-categorical-6);background:var(--as-tok)}.as-tok--cat-7{--as-tok: var(--hm-data-categorical-7);background:var(--as-tok)}.as-tok--cat-8{--as-tok: var(--hm-data-categorical-8);background:var(--as-tok)}.as-label{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border-radius:var(--hm-radius-pill);background:color-mix(in srgb,var(--as-tok, var(--hm-border)) 18%,var(--hm-surface-raised));color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.as-label:before{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-tok, var(--hm-border));content:\"\"}@media(forced-colors:active){.as-label{border:var(--hm-border-hairline) solid CanvasText}}:host{display:block;container-type:inline-size}.as-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.as-suggestions__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-suggestions__spacer{flex:1}.as-split{display:inline-flex;align-items:stretch}.as-split ::ng-deep hm-button .hm-btn{border-start-end-radius:0;border-end-end-radius:0}.as-split ::ng-deep .as-split__more .hm-menu-button{--hm-icon-btn-color: var(--hm-on-action);--hm-icon-btn-hover: var(--hm-action-hover);block-size:var(--hm-control-height);border-inline-start:var(--hm-border-hairline) solid color-mix(in srgb,var(--hm-on-action) 40%,transparent);border-start-start-radius:0;border-end-start-radius:0;background:var(--hm-action)}.as-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:var(--hm-space-xs)}.as-kpis[aria-busy=true] .as-kpi__value{color:var(--hm-muted)}.as-kpi{--as-tone: var(--hm-muted);--as-tone-bg: var(--hm-hover);--as-tint: 0%;display:flex;align-items:center;gap:var(--hm-space-xs);box-sizing:border-box;min-inline-size:0;margin:0;padding:var(--hm-space-xs) var(--hm-space-sm);border:var(--hm-border-hairline) solid color-mix(in srgb,var(--as-tone) 35%,var(--hm-border));border-radius:var(--hm-radius);background:color-mix(in srgb,var(--as-tone) var(--as-tint),var(--hm-surface-raised));color:var(--hm-text);font:inherit;text-align:start}.as-kpi[data-tone=danger]{--as-tone: var(--hm-danger);--as-tone-bg: var(--hm-danger-bg);--as-tint: 7%}.as-kpi[data-tone=warning]{--as-tone: var(--hm-warning);--as-tone-bg: var(--hm-warning-bg);--as-tint: 7%}.as-kpi[data-tone=info]{--as-tone: var(--hm-info);--as-tone-bg: var(--hm-info-bg);--as-tint: 7%}.as-kpi[data-tone=success]{--as-tone: var(--hm-success);--as-tone-bg: var(--hm-success-bg);--as-tint: 7%}.as-kpi[data-tone=accent]{--as-tone: var(--hm-accent);--as-tone-bg: var(--hm-accent-subtle);--as-tint: 7%}.as-kpi--wide{grid-column:span 2}.as-kpi--wide .as-kpi__label{grid-column:1}.as-kpi--wide .as-kpi__bar{grid-row:1;grid-column:2;align-self:center}.as-kpi__icon{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--hm-control-height);block-size:var(--hm-control-height);border-radius:var(--hm-radius);background:var(--as-tone-bg);color:var(--as-tone)}.as-kpi__icon hm-icon{--hm-icon-size: calc(var(--hm-control-height) * .55)}.as-kpi__body{display:grid;flex:1;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:var(--hm-space-xs);min-inline-size:0}.as-kpi__label{grid-row:1;grid-column:2;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-medium);text-overflow:ellipsis;white-space:nowrap}.as-kpi__note,.as-kpi__parts,.as-kpi__legend{grid-column:1/-1;min-inline-size:0}.as-kpi__value{grid-row:1;grid-column:1;color:var(--hm-text);font-size:var(--hm-font-size-lg);font-weight:var(--hm-font-weight-bold);font-variant-numeric:tabular-nums;line-height:var(--hm-line-height-tight)}.as-kpi__note{overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-xs);text-overflow:ellipsis;white-space:nowrap}.as-kpi__note hm-icon{margin-inline-end:var(--hm-space-micro);vertical-align:middle}.as-kpi__note--up{color:var(--hm-danger);font-weight:var(--hm-font-weight-semibold)}.as-kpi__note--good{color:var(--hm-success);font-weight:var(--hm-font-weight-semibold)}.as-kpi__parts,.as-kpi__legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xs);font-size:var(--hm-font-size-xs)}.as-kpi__part{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);white-space:nowrap}.as-kpi__dot{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--as-dot, var(--hm-muted))}.as-kpi__part[data-status=em_analise]{--as-dot: var(--hm-info)}.as-kpi__part[data-status=planejada]{--as-dot: var(--hm-accent)}.as-kpi__part[data-status=em_desenvolvimento]{--as-dot: var(--hm-warning)}.as-kpi__bar{display:flex;gap:var(--hm-border-thin);block-size:var(--hm-space-xs);overflow:hidden;border-radius:var(--hm-radius-pill);background:var(--hm-hover)}.as-kpi__seg{flex:none;min-inline-size:var(--hm-space-micro);background:var(--as-dot, var(--hm-muted))}.as-kpi [data-priority=urgente]{--as-dot: var(--hm-danger)}.as-kpi [data-priority=alta]{--as-dot: var(--hm-warning)}.as-kpi [data-priority=media]{--as-dot: var(--hm-info)}.as-kpi [data-priority=baixa]{--as-dot: var(--hm-muted)}.as-kpi__chip{display:inline-flex;align-items:center;gap:var(--hm-space-micro);padding:0 var(--hm-space-xxxs);border:var(--hm-border-hairline) solid transparent;border-radius:var(--hm-radius-pill);background:none;color:var(--hm-text);font:inherit;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}.as-kpi__chip:hover:not(:disabled){background:var(--hm-hover)}.as-kpi__chip:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-kpi__chip[aria-pressed=true]{border-color:var(--hm-text);background:var(--hm-hover);font-weight:var(--hm-font-weight-semibold)}.as-kpi__chip:disabled{color:var(--hm-muted);cursor:default}button.as-kpi{cursor:pointer;transition:border-color var(--hm-duration-quick) var(--hm-ease-standard),background var(--hm-duration-quick) var(--hm-ease-standard)}button.as-kpi:hover{border-color:var(--as-tone)}button.as-kpi:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color);outline-offset:var(--hm-border-hairline)}button.as-kpi[aria-pressed=true]{--as-tint: 16%;border-color:var(--as-tone);box-shadow:inset 0 0 0 var(--hm-border-thin) var(--as-tone)}.as-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-filters__search{flex:3 1 16rem;min-inline-size:0}.as-filters__select{flex:1 1 9rem;min-inline-size:8rem;max-inline-size:13rem}.as-filters__select--wide{max-inline-size:18rem}.as-filters__spacer{flex:1 0 0}.as-filters__more{display:inline-flex;flex:none;align-items:center;gap:var(--hm-space-nano);box-sizing:border-box;block-size:var(--hm-control-height);padding-inline:var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-control);background:var(--hm-surface-raised);color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);white-space:nowrap;cursor:pointer}.as-filters__more:hover{background:var(--hm-hover)}.as-filters__more:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-filters__more[aria-expanded=true],.as-filters__more--on{border-color:var(--hm-action);color:var(--hm-action);font-weight:var(--hm-font-weight-semibold)}.as-suggestions__status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs) var(--hm-space-sm)}.as-suggestions__hint{flex:1 1 20rem;margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-suggestions__count{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-suggestions__filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs) var(--hm-space-sm)}.as-suggestions__search{flex:1 1 16rem;min-inline-size:0}.as-suggestions__select{flex:0 1 11rem;min-inline-size:9rem}.as-board{--hm-kanban-column-width: 17.5rem}.as-board ::ng-deep .hm-kanban__board{min-block-size:max(26rem,100dvh - 24rem)}.as-board ::ng-deep .hm-kanban-column{--as-status: var(--hm-border);flex:1 0 var(--hm-kanban-column-width);max-inline-size:36rem;gap:var(--hm-space-xs);border-block-start:var(--hm-border-thin) solid var(--as-status);background:color-mix(in srgb,var(--as-status) 9%,var(--hm-kanban-column-bg))}.as-board ::ng-deep .hm-kanban-column--collapsed{flex:0 0 var(--hm-kanban-collapsed-width)}.as-board ::ng-deep .hm-kanban-column[data-column=em_analise]{--as-status: var(--hm-info)}.as-board ::ng-deep .hm-kanban-column[data-column=planejada]{--as-status: var(--hm-accent)}.as-board ::ng-deep .hm-kanban-column[data-column=em_desenvolvimento]{--as-status: var(--hm-warning)}.as-board ::ng-deep .hm-kanban-column[data-column=concluida]{--as-status: var(--hm-success)}.as-board ::ng-deep .hm-kanban-column__title:before{display:inline-block;inline-size:.625rem;block-size:.625rem;margin-inline-end:var(--hm-space-xs);border-radius:50%;background:var(--as-status);content:\"\"}.as-board ::ng-deep .hm-kanban-column__count{padding-inline:var(--hm-space-xs);font-weight:var(--hm-font-weight-semibold)}.as-board ::ng-deep .hm-kanban-column__summary{padding-inline:var(--hm-space-micro)}.as-board ::ng-deep .hm-kanban-column__list{gap:var(--hm-space-xs)}.as-board ::ng-deep .hm-kanban-card{padding:0;overflow:hidden}.as-board ::ng-deep .hm-kanban-card:has(.as-card--top){border-color:var(--hm-warning)}.as-colsum{display:inline-flex;align-items:center;gap:var(--hm-space-micro);white-space:nowrap}.as-colsum--late{color:var(--hm-danger);font-weight:var(--hm-font-weight-semibold)}.as-colempty{display:flex;flex-direction:column;align-items:center;gap:var(--hm-space-xxxs);padding:var(--hm-space-lg) var(--hm-space-sm);text-align:center}.as-colempty__icon{--hm-icon-size: var(--hm-control-height-large);color:var(--hm-muted);opacity:.6}.as-colempty__title{color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold)}.as-colempty__hint{max-inline-size:16rem;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-colfoot{display:flex;align-items:center;gap:var(--hm-space-nano);box-sizing:border-box;inline-size:100%;block-size:var(--hm-control-height-dense);padding-inline:var(--hm-space-xs);border:0;border-radius:var(--hm-radius-control);background:transparent;color:var(--hm-muted);font:inherit;font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold);cursor:pointer}.as-colfoot:hover{background:var(--hm-hover);color:var(--hm-text)}.as-colfoot:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-card{display:flex;flex-direction:column;min-inline-size:0}.as-card__body{display:flex;flex-direction:column;gap:var(--hm-space-xxxs);padding:var(--hm-space-xs) var(--hm-space-sm);min-inline-size:0}.as-card__top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xxxs);min-inline-size:0}.as-card__key{flex:none;color:var(--hm-muted);font-family:var(--hm-font-mono, monospace);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-card__menu{margin-inline-start:auto}.as-card__kind,.as-card__priority{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}.as-card__kind hm-icon,.as-card__priority hm-icon{--hm-icon-size: .875rem;color:var(--hm-muted)}.as-card__kind{color:var(--hm-action)}.as-card__kind[data-kind=melhoria] hm-icon{color:var(--hm-accent)}.as-card__kind[data-kind=nova_funcionalidade] hm-icon{color:var(--hm-info)}.as-card__kind[data-kind=problema] hm-icon{color:var(--hm-danger)}.as-card__priority[data-priority=urgente]{background:var(--hm-danger-bg);color:var(--hm-danger)}.as-card__priority[data-priority=urgente] hm-icon{color:var(--hm-danger)}.as-card__priority[data-priority=alta]{background:var(--hm-warning-bg)}.as-card__priority[data-priority=alta] hm-icon{color:var(--hm-warning)}.as-card__priority[data-priority=media]{background:var(--hm-info-bg)}.as-card__priority[data-priority=media] hm-icon{color:var(--hm-info)}.as-card__badge{display:inline-flex;align-items:center;padding:0 var(--hm-space-micro);border-radius:var(--hm-radius-pill);background:var(--hm-warning-bg);color:var(--hm-warning);line-height:1.6}.as-card__badge hm-icon{--hm-icon-size: .875rem}.as-card__title{padding:0;border:0;background:none;color:var(--hm-text);font:inherit;font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-snug);text-align:start;overflow-wrap:anywhere;cursor:pointer}.as-card__title:hover,.as-card__title:focus-visible{color:var(--hm-accent);text-decoration:underline}.as-card__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);min-inline-size:0}.as-card__labels{flex:1 1 5rem;min-inline-size:5rem}.as-card__screen{display:inline-flex;align-items:center;gap:var(--hm-space-micro);max-inline-size:100%;padding:0 var(--hm-space-xxxs);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius-micro);background:var(--hm-surface-muted);color:var(--hm-text);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold);line-height:1.6;overflow-wrap:anywhere}.as-card__screen>hm-icon{--hm-icon-size: .875rem;flex:none;color:var(--hm-muted)}.as-card__screen--new{border-color:transparent;background:var(--hm-info-bg)}.as-card__screen--new>hm-icon{color:var(--hm-info)}.as-card__screen-tag{flex:none;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;white-space:nowrap}.as-card__unread{color:var(--hm-accent);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-card__excerpt{margin:0;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-sm);white-space:nowrap;text-overflow:ellipsis}.as-card__checklist{display:flex;flex-direction:column;gap:1px;margin:0;padding:var(--hm-space-micro);border-radius:var(--hm-radius-control);background:var(--hm-hover);list-style:none}.as-card__check{display:flex;align-items:flex-start;gap:var(--hm-space-micro);inline-size:100%;padding:1px var(--hm-space-micro);border:0;border-radius:var(--hm-radius-control);background:none;color:var(--hm-text);font:inherit;font-size:var(--hm-font-size-sm);text-align:start;cursor:pointer}.as-card__check[aria-pressed=true] hm-icon{color:var(--hm-success)}.as-card__check:hover{background:var(--hm-hover)}.as-card__check:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-card__done{color:var(--hm-muted);text-decoration:line-through}.as-card__checklist-toggle{display:inline-flex;align-items:center;gap:var(--hm-space-micro);padding:0 var(--hm-space-micro);border:0;border-radius:var(--hm-radius-control);background:none;color:var(--hm-muted);font:inherit;font-size:var(--hm-font-size-xs);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}.as-card__checklist-toggle:hover{background:var(--hm-hover);color:var(--hm-text)}.as-card__checklist-toggle:focus-visible{outline:var(--hm-border-thin) solid var(--hm-focus-color)}.as-card__due{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-muted);font-size:var(--hm-font-size-xs);line-height:1.6;white-space:nowrap}.as-card__due[data-due=overdue]{background:var(--hm-danger-bg);color:var(--hm-danger);font-weight:var(--hm-font-weight-semibold)}.as-card__due[data-due=today],.as-card__due[data-due=tomorrow]{background:var(--hm-warning-bg);color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.as-card__due[data-due=today] hm-icon,.as-card__due[data-due=tomorrow] hm-icon{color:var(--hm-warning)}.as-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro) var(--hm-space-xs);margin-block-start:var(--hm-space-micro);padding-block-start:var(--hm-space-xxxs);border-block-start:var(--hm-border-hairline) solid var(--hm-border)}.as-card__spacer{flex:1 1 auto}.as-card__count,.as-card__date{display:inline-flex;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-variant-numeric:tabular-nums;white-space:nowrap}.as-card__count--on{color:var(--hm-text);font-weight:var(--hm-font-weight-semibold)}.as-card__count--full{color:var(--hm-success)}.as-card__count--zero{opacity:.75}.as-card__requesters{display:inline-flex;align-items:center;padding-inline-end:var(--hm-space-xxxs);border-inline-end:var(--hm-border-hairline) solid var(--hm-border)}.as-card__faces{display:inline-flex;align-items:center}.as-card__faces>hm-account-avatar{border-radius:50%;box-shadow:0 0 0 var(--hm-border-thin) var(--hm-kanban-card-bg, var(--hm-surface-raised))}.as-card__faces>hm-account-avatar+hm-account-avatar{margin-inline-start:calc(var(--hm-space-xs) * -1)}.as-card__more{margin-inline-start:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-semibold)}.as-card__nobody{display:inline-flex;color:var(--hm-muted);opacity:.7}.as-archive{display:flex;flex-direction:column;gap:var(--hm-space-xs);margin:0;padding:0;list-style:none}.as-archive[aria-busy=true]{opacity:.6}.as-archive__item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm);padding:var(--hm-space-sm);border:var(--hm-border-hairline) solid var(--hm-border);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.as-archive__main{display:flex;flex:1 1 20rem;flex-direction:column;gap:var(--hm-space-xxxs);min-inline-size:0}.as-archive__tags,.as-archive__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xxxs) var(--hm-space-xs)}.as-archive__meta,.as-archive__date{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.as-archive__link{padding:0;border:0;background:none;color:var(--hm-accent);font:inherit;font-size:var(--hm-font-size-sm);cursor:pointer}.as-archive__link:hover{text-decoration:underline}.as-archive__link:focus-visible{outline:var(--hm-border-thin) solid var(--hm-accent);outline-offset:var(--hm-border-thin)}@media(forced-colors:active){.as-kpi,.as-card__priority,.as-card__due{border:var(--hm-border-hairline) solid CanvasText}button.as-kpi[aria-pressed=true],.as-kpi__chip[aria-pressed=true]{outline:var(--hm-border-thin) solid Highlight}}@container (max-width: 52rem){.as-kpi--wide{grid-column:1/-1}}@container (max-width: 40rem){.as-kpis{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}.as-board{--hm-kanban-column-width: min(18rem, 85cqi)}.as-board ::ng-deep .hm-kanban__board{min-block-size:0;scroll-snap-type:x proximity;scroll-padding-inline:var(--hm-space-xs)}.as-board ::ng-deep .hm-kanban-column{flex:0 0 var(--hm-kanban-column-width);scroll-snap-align:start}.as-board ::ng-deep .hm-kanban-column--collapsed{flex:0 0 var(--hm-kanban-collapsed-width)}.as-filters__select,.as-suggestions__select{flex:1 1 9rem;max-inline-size:none}.as-filters__spacer{display:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { clientId: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientId", required: true }] }] } });
+
+/**
+ * Tela "Sugestões" do auto-serviço (router `AUTO_SERVICE_SUGGESTIONS_TEMPLATE_ROUTER_ID`, na raiz do menu; migration
+ * 0036 do argos): o seletor de client + o quadro de sugestões que era a aba Cliente › Sugestões. Carregada só por
+ * `AUTO_SERVICE_SCREENS.suggestions` -- nunca exportada pelo ponto de entrada (ver `public-api.ts`).
+ */
+class AutoServiceSuggestionsPageComponent {
+    constructor() {
+        this.client = signal(null, ...(ngDevMode ? [{ debugName: "client" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceSuggestionsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AutoServiceSuggestionsPageComponent, isStandalone: true, selector: "spine-auto-service-suggestions-page", ngImport: i0, template: `
+    <div class="as-stack">
+      <spine-auto-service-client-picker (clientChange)="client.set($event)" />
+      @if (client(); as c) {
+        <spine-auto-service-suggestions [clientId]="c.id" />
+      }
+    </div>
+  `, isInline: true, styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface-muted);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: AutoServiceClientPickerComponent, selector: "spine-auto-service-client-picker", outputs: ["clientChange"] }, { kind: "component", type: AutoServiceSuggestionsComponent, selector: "spine-auto-service-suggestions", inputs: ["clientId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceSuggestionsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-auto-service-suggestions-page', imports: [AutoServiceClientPickerComponent, AutoServiceSuggestionsComponent], template: `
+    <div class="as-stack">
+      <spine-auto-service-client-picker (clientChange)="client.set($event)" />
+      @if (client(); as c) {
+        <spine-auto-service-suggestions [clientId]="c.id" />
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".as-stack{display:flex;flex-direction:column;gap:var(--hm-space-md);min-inline-size:0}.as-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--hm-space-xs)}.as-field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--hm-space-sm)}.as-field-row>hm-combobox{flex:1 1 16rem;min-inline-size:0}.as-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm)}.as-summary__info{display:flex;flex:1 1 16rem;flex-direction:column;gap:var(--hm-space-micro);min-inline-size:0}.as-summary__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs);margin:0;color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.as-summary__detail{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.muted{color:var(--hm-muted)}.as-empty{margin:var(--hm-space-xs) 0 0;font-size:var(--hm-font-size-sm)}.as-secret{display:grid;gap:var(--hm-space-micro)}.as-secret__label{color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.as-secret__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}.as-secret__value{flex:1 1 240px;min-width:0;border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-control);padding:var(--hm-space-xs) var(--hm-space-sm);background:var(--hm-surface-muted);color:var(--hm-text);font-family:var(--hm-font-mono);font-size:var(--hm-font-size-sm);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}:host{display:block;min-inline-size:0}\n"] }]
+        }] });
+
+export { AutoServiceSuggestionsPageComponent };
+//# sourceMappingURL=trismegisto-spine-auto-service-auto-service-suggestions-page.component-mMjE3JOL.mjs.map