@trismegisto/spine 3.3.0 → 3.3.2

package/fesm2022/trismegisto-spine-auto-service-auto-service-news-page.component-CBemH4hr.mjs

@@ -0,0 +1,432 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { A as AutoServiceClientPickerComponent } from './trismegisto-spine-auto-service-auto-service-client-picker.component-NawbfdLW.mjs';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { HermesDialogService, AccountAvatarComponent, AlertComponent, ButtonComponent, ComboboxMultiComponent, DataGridComponent, DataGridCellDirective, DatePickerComponent, IconComponent, InputComponent, ListEditorComponent, ModalComponent, RichTextComponent, SegmentedControlComponent, TagComponent, TextareaComponent, TimePickerComponent } from '@trismegisto/angular';
+import { urlPath, formatMessage } from '@trismegisto/primitives';
+import { SPINE_MESSAGES } from '@trismegisto/spine';
+import { A as AutoServiceDeleteFeedback } from './trismegisto-spine-auto-service-auto-service-delete-CV_t9vxm.mjs';
+import { firstValueFrom } from 'rxjs';
+import { AuthorizationService } from '@orfeu/angular/core';
+import { AUTO_SERVICE_CONFIG } from './trismegisto-spine-auto-service.mjs';
+
+/**
+ * Novidades do app no auto-serviço (`{adminApi}/auto-service/:clientId/news*`): o servidor recorta pelo client da URL
+ * e exige o grupo de administração com o crachá Administrador. Próprio da aba (o `AutoServiceService` é o das outras
+ * telas).
+ */
+class AutoServiceNewsService {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.auth = inject(AuthorizationService);
+        this.config = inject(AUTO_SERVICE_CONFIG);
+    }
+    url(clientId, rest = '') {
+        return `${this.config.adminApi}/auto-service${urlPath `/${clientId}`}/news${rest}`;
+    }
+    get headers() {
+        return new HttpHeaders({ 'x-access-token': this.auth.getToken() ?? '' });
+    }
+    list(clientId, page, limit) {
+        return firstValueFrom(this.http.get(this.url(clientId), { headers: this.headers, params: { page, limit } }));
+    }
+    get(clientId, newsId) {
+        return firstValueFrom(this.http.get(this.url(clientId, urlPath `/${newsId}`), { headers: this.headers }));
+    }
+    audience(clientId) {
+        return firstValueFrom(this.http.get(this.url(clientId, '/audience'), { headers: this.headers }));
+    }
+    create(clientId, body) {
+        return firstValueFrom(this.http.post(this.url(clientId), body, { headers: this.headers }));
+    }
+    update(clientId, newsId, body) {
+        return firstValueFrom(this.http.put(this.url(clientId, urlPath `/${newsId}`), body, { headers: this.headers }));
+    }
+    remove(clientId, newsId) {
+        return firstValueFrom(this.http.delete(this.url(clientId, urlPath `/${newsId}`), { headers: this.headers }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceNewsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceNewsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceNewsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const PAGE_SIZE = 20;
+const TITLE_MAX = 140;
+const SUMMARY_MAX = 300;
+let sequence = 0;
+/** Teto da lista de mudanças (implementação) e de cada item -- os mesmos do servidor. */
+const ITEMS_MAX = 30;
+const ITEM_MAX = 300;
+/** Ícone de cada tipo (seletor do topo e prévia). */
+const KIND_ICONS = {
+    informativo: 'file-text',
+    implementacao: 'rocket-diagonal',
+    alteracao: 'two-way-arrows',
+};
+/** HTML de rich text com texto de verdade (não só tags vazias). */
+function newsHtmlHasText(html) {
+    return !!html && html.replace(/<[^>]*>/g, '').replace(/&nbsp;|&#160;/g, ' ').trim() !== '';
+}
+const pad = (n) => String(n).padStart(2, '0');
+/** Data e hora LOCAIS (do navegador) de um instante ISO, no formato dos campos (`AAAA-MM-DD`, `HH:mm`). */
+function newsLocalParts(iso) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return { date: null, time: null };
+    return { date: `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`, time: `${pad(d.getHours())}:${pad(d.getMinutes())}` };
+}
+/** Instante ISO (UTC) da data e hora locais dos campos; sem data = null (o servidor publica ao salvar); sem hora = 00:00. */
+function newsPublishedAt(date, time) {
+    if (!date)
+        return null;
+    const d = new Date(`${date}T${time || '00:00'}:00`);
+    return Number.isNaN(d.getTime()) ? null : d.toISOString();
+}
+/** Código do argos-admin (`{ error }`) → texto no idioma ativo; desconhecido, o `detail` do servidor ou `fallback`. */
+function newsErrorText(err, text, fallback) {
+    if (!(err instanceof HttpErrorResponse))
+        return fallback;
+    const body = err.error;
+    const known = {
+        invalid_title: text.errors.invalidTitle,
+        invalid_summary: text.errors.invalidSummary,
+        body_too_large: text.errors.bodyTooLarge,
+        invalid_published_at: text.errors.invalidPublishedAt,
+        invalid_until: text.errors.invalidUntil,
+        invalid_group_ids: text.errors.invalidGroupIds,
+        invalid_kind: text.errors.invalidKind,
+        invalid_items: text.errors.invalidItems,
+        invalid_compare: text.errors.invalidCompare,
+        compare_too_large: text.errors.compareTooLarge,
+    };
+    const code = typeof body?.error === 'string' ? body.error : '';
+    if (Object.prototype.hasOwnProperty.call(known, code))
+        return known[code];
+    return typeof body?.detail === 'string' && body.detail ? body.detail : fallback;
+}
+const emptyForm = () => ({
+    kind: 'informativo', title: '', summary: '', body: '', items: [], before: '', after: '', publishDate: null, publishTime: null,
+    until: null, groupIds: [],
+});
+/**
+ * Aba Novidades do Cliente: o que o spine mostra em "Novidades" (menu do perfil, aviso da entrada, card do Início)
+ * para quem entra no app. Grade paginada no servidor (agendadas e vencidas também), criar/editar num modal e excluir
+ * com confirmação (no menu da linha ou no rodapé do modal, ao editar). O modal é um editor em seções numeradas
+ * (título e resumo, texto em rich text, publicação, validade e público) com a prévia ao vivo do card do Início ao
+ * lado. Sem rascunho: a novidade não tem esse estado (sem data, sai ao salvar). O texto é saneado pelo argos-admin ao
+ * gravar; o público vazio é todo mundo que entra no app.
+ */
+class AutoServiceNewsComponent {
+    /** Validade antes do dia da publicação: a novidade nunca apareceria. */
+    get untilBeforePublish() {
+        const publishDay = this.form.publishDate ?? newsLocalParts(new Date().toISOString()).date;
+        return !!this.form.until && !!publishDay && this.form.until < publishDay;
+    }
+    /** Data e hora da prévia: as dos campos; sem data, "ao salvar". */
+    get previewDate() {
+        const at = newsPublishedAt(this.form.publishDate, this.form.publishTime);
+        return at ? this.formatDate(at) : this.text.previewNow;
+    }
+    /** Publicação no futuro: a prévia marca "Agendada". */
+    get previewScheduled() {
+        const at = newsPublishedAt(this.form.publishDate, this.form.publishTime);
+        return !!at && new Date(at).getTime() > Date.now();
+    }
+    get canSave() {
+        const title = this.form.title.trim();
+        return !!title && title.length <= TITLE_MAX && this.form.summary.trim().length <= SUMMARY_MAX && !this.untilBeforePublish
+            && this.kindReady;
+    }
+    /** O conteúdo do tipo está completo: a implementação com ao menos uma mudança; a alteração com o antes e o agora. */
+    get kindReady() {
+        if (this.form.kind === 'implementacao')
+            return this.form.items.length > 0 && this.form.items.length <= ITEMS_MAX;
+        if (this.form.kind === 'alteracao')
+            return newsHtmlHasText(this.form.before) && newsHtmlHasText(this.form.after);
+        return true;
+    }
+    get kindIcon() {
+        return KIND_ICONS[this.form.kind];
+    }
+    get kindLabel() {
+        return this.kindOptions.find((o) => o.value === this.form.kind)?.label ?? '';
+    }
+    setKind(kind) {
+        if (kind === 'informativo' || kind === 'implementacao' || kind === 'alteracao')
+            this.form = { ...this.form, kind };
+        this.saveError.set(null);
+    }
+    constructor() {
+        this.service = inject(AutoServiceNewsService);
+        this.deletion = inject(AutoServiceDeleteFeedback);
+        this.dialogs = inject(HermesDialogService);
+        this.text = inject(SPINE_MESSAGES).autoServiceNews;
+        this.common = inject(SPINE_MESSAGES).autoService;
+        /** Rótulos do card Novidades do Início, repetidos na prévia. */
+        this.home = inject(SPINE_MESSAGES).home;
+        this.uid = `spine-as-news-${++sequence}`;
+        this.dateFormat = new Intl.DateTimeFormat(inject(SPINE_MESSAGES).meta.locale, { dateStyle: 'short', timeStyle: 'short' });
+        this.dayFormat = new Intl.DateTimeFormat(inject(SPINE_MESSAGES).meta.locale, { dateStyle: 'short', timeZone: 'UTC' });
+        this.TITLE_MAX = TITLE_MAX;
+        this.SUMMARY_MAX = SUMMARY_MAX;
+        this.ITEMS_MAX = ITEMS_MAX;
+        /** Tipos do seletor do topo, com ícone. */
+        this.kindOptions = [
+            { value: 'informativo', label: this.text.kindInformativo, icon: KIND_ICONS.informativo },
+            { value: 'implementacao', label: this.text.kindImplementacao, icon: KIND_ICONS.implementacao },
+            { value: 'alteracao', label: this.text.kindAlteracao, icon: KIND_ICONS.alteracao },
+        ];
+        /** Cada mudança até 300 caracteres (o vazio e o repetido o próprio hm-list-editor recusa). */
+        this.itemRule = (item) => item.length > ITEM_MAX ? this.text.errors.invalidItems : null;
+        this.clientId = input('', ...(ngDevMode ? [{ debugName: "clientId" }] : /* istanbul ignore next */ []));
+        this.rows = signal([], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        this.pageState = signal({ page: 1, size: PAGE_SIZE }, ...(ngDevMode ? [{ debugName: "pageState" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loadError = signal('', ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
+        this.audienceOptions = signal([], ...(ngDevMode ? [{ debugName: "audienceOptions" }] : /* istanbul ignore next */ []));
+        this.modalOpen = signal(false, ...(ngDevMode ? [{ debugName: "modalOpen" }] : /* istanbul ignore next */ []));
+        this.editingId = signal('', ...(ngDevMode ? [{ debugName: "editingId" }] : /* istanbul ignore next */ []));
+        this.form = emptyForm();
+        this.saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+        this.saveError = signal(null, ...(ngDevMode ? [{ debugName: "saveError" }] : /* istanbul ignore next */ []));
+        /** O texto da novidade em edição ainda está vindo (o editor espera). */
+        this.loadingBody = signal(false, ...(ngDevMode ? [{ debugName: "loadingBody" }] : /* istanbul ignore next */ []));
+        /** Excluindo pelo rodapé do modal. */
+        this.removing = signal(false, ...(ngDevMode ? [{ debugName: "removing" }] : /* istanbul ignore next */ []));
+        this.rowId = (n) => n.id;
+        this.columns = computed(() => [
+            { key: 'title', title: this.text.colTitle, value: (n) => n.title },
+            { key: 'status', title: this.text.colStatus, value: (n) => this.statusLabel(n.status) },
+            { key: 'published_at', title: this.text.colPublishedAt, value: (n) => this.formatDate(n.published_at) },
+            { key: 'until', title: this.text.colUntil, value: (n) => this.formatDay(n.until) },
+            { key: 'groups', title: this.text.colAudience, value: (n) => n.groups.map((g) => g.name).join(', ') || this.text.audienceAll },
+            { key: 'author', title: this.text.colAuthor, value: (n) => n.author?.name || n.author?.username || '' },
+        ], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.rowActions = computed(() => [
+            { id: 'edit', icon: 'pencil', label: this.common.edit },
+            {
+                id: 'delete', icon: 'trash', label: this.common.delete, danger: true, separatorAbove: true,
+                confirm: (n) => ({ heading: this.text.confirmDeleteHeading, message: formatMessage(this.text.confirmDelete, { title: n.title }) }),
+            },
+        ], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const id = this.clientId();
+            untracked(() => {
+                this.pageState.set({ page: 1, size: this.pageState().size });
+                void this.load();
+                void this.loadAudience(id);
+            });
+        });
+    }
+    statusLabel(status) {
+        return status === 'scheduled' ? this.text.statusScheduled : status === 'expired' ? this.text.statusExpired : this.text.statusPublished;
+    }
+    statusColor(status) {
+        return status === 'scheduled' ? 'info' : status === 'expired' ? 'neutral' : 'success';
+    }
+    formatDate(iso) {
+        const d = new Date(iso);
+        return Number.isNaN(d.getTime()) ? '' : this.dateFormat.format(d);
+    }
+    /** `until` é um dia (AAAA-MM-DD), sem fuso: formatado em UTC para não mudar de dia. */
+    formatDay(day) {
+        if (!day)
+            return this.text.noUntil;
+        const d = new Date(`${day}T00:00:00Z`);
+        return Number.isNaN(d.getTime()) ? day : this.dayFormat.format(d);
+    }
+    async load(page = this.pageState().page, size = this.pageState().size) {
+        const clientId = this.clientId();
+        if (!clientId) {
+            this.rows.set([]);
+            this.total.set(0);
+            return;
+        }
+        this.loading.set(true);
+        this.loadError.set('');
+        try {
+            const res = await this.service.list(clientId, page, size);
+            this.rows.set(res.news ?? []);
+            this.total.set(res.total ?? 0);
+            this.pageState.set({ page, size });
+        }
+        catch (err) {
+            this.rows.set([]);
+            this.total.set(0);
+            this.loadError.set(newsErrorText(err, this.text, this.text.loadError));
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    /** Sem a lista de público o campo fica sem opção (a novidade sai para todos). */
+    async loadAudience(clientId) {
+        if (!clientId) {
+            this.audienceOptions.set([]);
+            return;
+        }
+        try {
+            const res = await this.service.audience(clientId);
+            this.audienceOptions.set((res.groups ?? []).map((g) => ({ value: g.id, label: g.name })));
+        }
+        catch {
+            this.audienceOptions.set([]);
+        }
+    }
+    onPageStateChange(state) {
+        void this.load(state.page, state.size);
+    }
+    openCreate() {
+        this.editingId.set('');
+        this.form = emptyForm();
+        this.saveError.set(null);
+        this.loadingBody.set(false);
+        this.removing.set(false);
+        this.modalOpen.set(true);
+    }
+    /** O corpo não vem na lista: busca o detalhe antes de liberar o editor. */
+    async openEdit(row) {
+        const parts = newsLocalParts(row.published_at);
+        this.editingId.set(row.id);
+        this.form = {
+            kind: row.kind ?? 'informativo', title: row.title, summary: row.summary, body: '', items: [], before: '', after: '',
+            publishDate: parts.date, publishTime: parts.time, until: row.until, groupIds: row.groups.map((g) => g.id),
+        };
+        this.saveError.set(null);
+        this.loadingBody.set(true);
+        this.removing.set(false);
+        this.modalOpen.set(true);
+        try {
+            const full = await this.service.get(this.clientId(), row.id);
+            if (this.editingId() === row.id) {
+                this.form = {
+                    ...this.form, kind: full.kind ?? this.form.kind, body: full.body_html ?? '', items: [...(full.items ?? [])],
+                    before: full.before_html ?? '', after: full.after_html ?? '',
+                };
+            }
+        }
+        catch (err) {
+            this.saveError.set(newsErrorText(err, this.text, this.text.loadError));
+        }
+        finally {
+            this.loadingBody.set(false);
+        }
+    }
+    async save() {
+        if (!this.canSave || this.saving() || this.loadingBody())
+            return;
+        const body = {
+            kind: this.form.kind,
+            title: this.form.title.trim(),
+            summary: this.form.summary.trim(),
+            body_html: this.form.body,
+            // Só o conteúdo do tipo escolhido; o resto vai vazio (o servidor zera também).
+            items: this.form.kind === 'implementacao' ? [...this.form.items] : [],
+            before_html: this.form.kind === 'alteracao' ? this.form.before : '',
+            after_html: this.form.kind === 'alteracao' ? this.form.after : '',
+            published_at: newsPublishedAt(this.form.publishDate, this.form.publishTime),
+            until: this.form.until || null,
+            group_ids: [...this.form.groupIds],
+        };
+        this.saving.set(true);
+        this.saveError.set(null);
+        try {
+            if (this.editingId())
+                await this.service.update(this.clientId(), this.editingId(), body);
+            else
+                await this.service.create(this.clientId(), body);
+        }
+        catch (err) {
+            // O modal fica aberto com o motivo no idioma ativo.
+            this.saveError.set(newsErrorText(err, this.text, this.text.saveError));
+            return;
+        }
+        finally {
+            this.saving.set(false);
+        }
+        this.modalOpen.set(false);
+        await this.load(this.editingId() ? this.pageState().page : 1);
+    }
+    /** "Excluir" no rodapé do modal (só ao editar): confirma, exclui, fecha e recarrega; falha deixa o modal aberto. */
+    async removeFromModal() {
+        const id = this.editingId();
+        if (!id || this.saving() || this.removing())
+            return;
+        const title = this.form.title.trim();
+        const ok = await this.dialogs.confirm({
+            heading: this.text.confirmDeleteHeading, message: formatMessage(this.text.confirmDelete, { title }),
+            confirmLabel: this.common.delete, danger: true,
+        });
+        if (!ok || this.editingId() !== id || !this.modalOpen())
+            return;
+        this.removing.set(true);
+        try {
+            if (!(await this.deletion.run(() => this.service.remove(this.clientId(), id))))
+                return;
+        }
+        finally {
+            this.removing.set(false);
+        }
+        this.modalOpen.set(false);
+        await this.load();
+    }
+    /** Já confirmado pelo `confirm` da ação na grade. */
+    async remove(row) {
+        if (await this.deletion.run(() => this.service.remove(this.clientId(), row.id)))
+            await this.load();
+    }
+    onAction(e) {
+        if (e.action === 'edit')
+            void this.openEdit(e.row);
+        if (e.action === 'delete')
+            void this.remove(e.row);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceNewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AutoServiceNewsComponent, isStandalone: true, selector: "spine-auto-service-news", inputs: { clientId: { classPropertyName: "clientId", publicName: "clientId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Pagina\u00E7\u00E3o no servidor (agendadas e vencidas tamb\u00E9m); a busca/filtro local da grade fica desligada. -->\n<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"rows()\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.caption\"\n  [loading]=\"loading()\"\n  [error]=\"loadError()\"\n  [emptyMessage]=\"text.empty\"\n  [rowActions]=\"rowActions()\"\n  [filterable]=\"false\"\n  [paginated]=\"false\"\n  [totalItems]=\"total()\"\n  [pageState]=\"pageState()\"\n  (pageStateChange)=\"onPageStateChange($event)\"\n  [pageSizes]=\"[10, 20, 50, 100]\"\n  (actionTriggered)=\"onAction($event)\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreate()\">{{ text.newNews }}</hm-button>\n  <ng-template hmCell=\"title\" let-n>\n    <span class=\"news-title\">\n      <span>{{ n.title }}</span>\n      @if (n.summary) { <span class=\"news-title__summary\">{{ n.summary }}</span> }\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"status\" let-n>\n    <hm-tag [name]=\"statusLabel(n.status)\" [color]=\"statusColor(n.status)\" />\n  </ng-template>\n  <ng-template hmCell=\"groups\" let-n>\n    @if (n.groups.length) {\n      <span class=\"news-tags\">\n        @for (g of n.groups; track g.id) { <hm-tag [name]=\"g.name\" color=\"info\" /> }\n      </span>\n    } @else {\n      <span class=\"muted\">{{ text.audienceAll }}</span>\n    }\n  </ng-template>\n  <ng-template hmCell=\"author\" let-n>\n    @if (n.author; as a) {\n      <span class=\"news-author\">\n        <hm-account-avatar size=\"small\" [name]=\"a.name || a.username\" [imageUrl]=\"a.picture\" />\n        <span>{{ a.name || a.username }}</span>\n      </span>\n    }\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: criar/editar novidade. O cabe\u00E7alho do hm-modal some da vista (o t\u00EDtulo segue como nome do di\u00E1logo, ver o\n     .scss) e o editor desenha o seu: \u00EDcone, t\u00EDtulo e subt\u00EDtulo. Pensado para caber sem rolagem num notebook: em cima,\n     \"1. Informa\u00E7\u00F5es principais\" (t\u00EDtulo) com o resumo ao lado; embaixo, o conte\u00FAdo do tipo escolhido no topo (texto;\n     introdu\u00E7\u00E3o + lista; ou introdu\u00E7\u00E3o + antes e agora), que estica e rola por dentro, ao lado do painel com publica\u00E7\u00E3o,\n     validade, p\u00FAblico, dica e a pr\u00E9via do In\u00EDcio no fim. O modal n\u00E3o rola; em tela estreita, tudo empilha. -->\n<hm-modal [open]=\"modalOpen()\" (openChange)=\"modalOpen.set($event)\" [heading]=\"editingId() ? text.editNews : text.newNews\" size=\"xlarge\"\n  (closed)=\"modalOpen.set(false)\">\n  <div class=\"ne\">\n    <header class=\"ne-head\">\n      <span class=\"ne-head__icon\" aria-hidden=\"true\"><hm-icon shape=\"announcement\" size=\"md\" /></span>\n      <span class=\"ne-head__text\">\n        <!-- O h2 do hm-modal j\u00E1 d\u00E1 o nome ao di\u00E1logo: este \u00E9 s\u00F3 o visual. -->\n        <span class=\"ne-head__title\" aria-hidden=\"true\">{{ editingId() ? text.editNews : text.newNews }}</span>\n        <span class=\"ne-head__intro\">{{ editingId() ? text.editNewsIntro : text.newNewsIntro }}</span>\n      </span>\n      <!-- Tipo de publica\u00E7\u00E3o: muda os campos do conte\u00FAdo e a pr\u00E9via. -->\n      <hm-segmented-control class=\"ne-kind\" [label]=\"text.kind\" [options]=\"kindOptions\" [value]=\"form.kind\" (valueChange)=\"setKind($event)\" />\n    </header>\n\n    <div class=\"ne-scroll\">\n      @if (saveError()) { <hm-alert variant=\"error\">{{ saveError() }}</hm-alert> }\n\n      <div class=\"ne-grid\">\n        <!-- Linha de cima: a se\u00E7\u00E3o 1 ocupa as duas colunas (subgrid): t\u00EDtulo \u00E0 esquerda, resumo \u00E0 direita. -->\n        <section class=\"ne-section ne-intro\" [attr.aria-labelledby]=\"uid + '-main'\">\n          <div class=\"ne-intro__lead\">\n            <div class=\"ne-section__head\">\n              <h3 class=\"ne-section__title\" [id]=\"uid + '-main'\"><span class=\"ne-step\" aria-hidden=\"true\">1</span>{{ text.sectionMain }}</h3>\n              <p class=\"ne-section__hint\">{{ text.sectionMainHint }}</p>\n            </div>\n            <hm-input [label]=\"text.title\" required [maxLength]=\"TITLE_MAX\" [(value)]=\"form.title\" (valueChange)=\"saveError.set(null)\" />\n          </div>\n          <hm-textarea class=\"ne-intro__summary\" [label]=\"text.summary\" [hint]=\"text.summaryHint\" [rows]=\"3\" [maxLength]=\"SUMMARY_MAX\"\n            [(value)]=\"form.summary\" />\n        </section>\n\n        <section class=\"ne-section ne-content\" [attr.aria-labelledby]=\"uid + '-body'\">\n          <div class=\"ne-section__head\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-body'\"><span class=\"ne-step\" aria-hidden=\"true\">2</span>{{ text.sectionBody }}</h3>\n            <p class=\"ne-section__hint\">\n              {{ form.kind === 'implementacao' ? text.sectionBodyHintImpl : form.kind === 'alteracao' ? text.sectionBodyHintAlt : text.sectionBodyHint }}\n            </p>\n          </div>\n          <!-- Estica at\u00E9 o fim da linha; quem rola \u00E9 o texto (ou a lista), n\u00E3o o modal. -->\n          @switch (form.kind) {\n            @case ('implementacao') {\n              <hm-rich-text class=\"ne-content__intro\" [label]=\"text.intro\" [rows]=\"2\" [maxRows]=\"4\" [loading]=\"loadingBody()\"\n                [(value)]=\"form.body\" />\n              <div class=\"ne-content__items\">\n                <hm-list-editor [label]=\"text.items\" [hint]=\"text.itemsHint\" [placeholder]=\"text.itemPlaceholder\" [emptyText]=\"text.itemsEmpty\"\n                  [max]=\"ITEMS_MAX\" [validate]=\"itemRule\" editable [items]=\"form.items\" (itemsChange)=\"form.items = [...$event]\" />\n              </div>\n            }\n            @case ('alteracao') {\n              <hm-rich-text class=\"ne-content__intro\" [label]=\"text.intro\" [rows]=\"2\" [maxRows]=\"4\" [loading]=\"loadingBody()\"\n                [(value)]=\"form.body\" />\n              <div class=\"ne-content__compare\">\n                <hm-rich-text class=\"ne-content__editor ne-content__editor--labelled\" [label]=\"text.before\" required [rows]=\"4\" [maxRows]=\"16\" [loading]=\"loadingBody()\"\n                  [(value)]=\"form.before\" />\n                <hm-rich-text class=\"ne-content__editor ne-content__editor--labelled\" [label]=\"text.after\" required [rows]=\"4\" [maxRows]=\"16\" [loading]=\"loadingBody()\"\n                  [(value)]=\"form.after\" />\n              </div>\n            }\n            @default {\n              <hm-rich-text class=\"ne-content__editor\" [label]=\"text.sectionBody\" labelHidden [hint]=\"text.bodyHint\" [rows]=\"6\" [maxRows]=\"24\"\n                showCounter [loading]=\"loadingBody()\" [(value)]=\"form.body\" />\n            }\n          }\n        </section>\n\n        <aside class=\"ne-side\">\n          <section class=\"ne-section ne-side__publish\" [attr.aria-labelledby]=\"uid + '-publish'\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-publish'\"><span class=\"ne-step\" aria-hidden=\"true\">3</span>{{ text.sectionPublish }}</h3>\n            <div class=\"ne-row\">\n              <hm-date-picker [label]=\"text.publishDate\" [(value)]=\"form.publishDate\" />\n              <hm-time-picker [label]=\"text.publishTime\" [(value)]=\"form.publishTime\" />\n            </div>\n            <p class=\"ne-note\">{{ text.publishHint }}</p>\n          </section>\n\n          <section class=\"ne-section ne-side__until\" [attr.aria-labelledby]=\"uid + '-until'\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-until'\"><span class=\"ne-step\" aria-hidden=\"true\">4</span>{{ text.sectionUntil }}</h3>\n            <hm-date-picker [label]=\"text.untilDate\" [hint]=\"text.untilHint\" [min]=\"form.publishDate\" [(value)]=\"form.until\" />\n            @if (untilBeforePublish) { <hm-alert variant=\"warning\">{{ text.errors.untilBeforePublish }}</hm-alert> }\n          </section>\n\n          <section class=\"ne-section ne-side__audience\" [attr.aria-labelledby]=\"uid + '-audience'\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-audience'\"><span class=\"ne-step\" aria-hidden=\"true\">5</span>{{ text.sectionAudience }}</h3>\n            <!-- Vazio = todos que entram no app. -->\n            <hm-combobox-multi [label]=\"text.audienceGroups\" [hint]=\"text.audienceHint\" [placeholder]=\"text.audienceAll\" [options]=\"audienceOptions()\"\n              [visibleChipsLimit]=\"null\" [selected]=\"form.groupIds\" (selectedChange)=\"form.groupIds = [...$event]\" />\n          </section>\n\n          <p class=\"ne-tip\"><hm-icon class=\"ne-tip__icon\" shape=\"lightbulb\" size=\"sm\" /><span><strong>{{ text.tipTitle }}</strong> {{ text.tipText }}</span></p>\n\n          <section class=\"ne-section ne-side__preview\" [attr.aria-labelledby]=\"uid + '-preview'\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-preview'\"><hm-icon class=\"ne-section__icon\" shape=\"eye\" size=\"sm\" />{{ text.preview }}</h3>\n            <!-- Mesmo desenho do card Novidades do In\u00EDcio; repete o que est\u00E1 nos campos, ent\u00E3o fica fora da leitura. -->\n            <div class=\"ne-preview\" aria-hidden=\"true\">\n              <div class=\"ne-preview__head\">\n                <span class=\"ne-preview__heading\">{{ home.news }}</span>\n                <span class=\"ne-preview__badge\">{{ home.newsBadge }}</span>\n              </div>\n              <div class=\"ne-preview__item\">\n                <span class=\"ne-preview__icon\"><hm-icon [shape]=\"kindIcon\" size=\"sm\" /></span>\n                <span class=\"ne-preview__text\">\n                  <span class=\"ne-preview__title\" [class.ne-preview__placeholder]=\"!form.title.trim()\">{{ form.title.trim() || text.previewTitle }}</span>\n                  <span class=\"ne-preview__summary\" [class.ne-preview__placeholder]=\"!form.summary.trim()\">{{ form.summary.trim() || text.previewSummary }}</span>\n                  <span class=\"ne-preview__date\">\n                    <hm-icon shape=\"calendar\" size=\"xs\" />{{ previewDate }}\n                    @if (previewScheduled) { <span class=\"ne-preview__status\">{{ text.statusScheduled }}</span> }\n                    <span class=\"ne-preview__kind\">{{ kindLabel }}</span>\n                  </span>\n                </span>\n                <hm-icon class=\"ne-preview__chevron\" shape=\"angle-right\" size=\"sm\" />\n              </div>\n            </div>\n          </section>\n        </aside>\n      </div>\n    </div>\n  </div>\n\n  <ng-container footer>\n    <!-- Sem rascunho: a novidade n\u00E3o tem esse estado (sem data = publica ao salvar). -->\n    @if (editingId()) {\n      <hm-button class=\"ne-delete\" emphasis=\"medium\" intent=\"danger\" icon=\"trash\" [disabled]=\"saving() || removing()\" [loading]=\"removing()\"\n        (clicked)=\"removeFromModal()\">{{ common.delete }}</hm-button>\n    }\n    <hm-button emphasis=\"medium\" (clicked)=\"modalOpen.set(false)\">{{ common.cancel }}</hm-button>\n    <hm-button [disabled]=\"!canSave || loadingBody() || removing()\" [loading]=\"saving()\" (clicked)=\"save()\">\n      {{ editingId() ? common.save : common.create }}\n    </hm-button>\n  </ng-container>\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}:host{display:block}.news-title{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.news-title__summary{overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-xs);text-overflow:ellipsis;white-space:nowrap}.news-tags,.news-author{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.ne){block-size:min(100dvh - 2 * var(--hm-space-md),60rem);max-block-size:none;grid-template-rows:minmax(0,1fr) auto}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.ne)>.hm-modal__header{position:absolute;z-index:1;inset-block-start:0;inset-inline-end:0;border:0;padding:var(--hm-space-sm)}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.ne) .hm-modal__heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.ne)>.hm-modal__body{display:flex;flex-direction:column;min-block-size:0;overflow:hidden;padding:0}.ne{container:ne/inline-size;display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.ne-head{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm);padding:var(--hm-space-sm) var(--hm-space-md);padding-inline-end:calc(var(--hm-space-md) + var(--hm-control-height) + var(--hm-space-sm));border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}.ne-head__icon{display:grid;flex:none;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:var(--hm-radius);background:var(--hm-accent-subtle);color:var(--hm-accent)}.ne-head__text{display:flex;flex-direction:column;gap:var(--hm-space-nano);min-inline-size:0}.ne-head__title{color:var(--hm-text);font-size:var(--hm-font-size-xl);font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-tight)}.ne-head__intro{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.ne-kind{margin-inline-start:auto}.ne-content__intro{flex:none}.ne-content__compare{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.ne-preview__kind{padding:var(--hm-space-nano) var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-pill);color:var(--hm-text);font-size:var(--hm-font-size-3xs)}.ne-scroll{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--hm-space-sm);min-block-size:0;overflow-y:auto;padding:var(--hm-space-md)}.ne-grid{display:grid;flex:1 0 auto;grid-template-columns:minmax(0,1fr);gap:var(--hm-space-md)}.ne-section{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:0}.ne-section__head{display:flex;flex-direction:column;gap:var(--hm-space-nano)}.ne-section__title{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)}.ne-section__icon{flex:none;color:var(--hm-accent)}.ne-section__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.ne-step{display:inline-grid;flex:none;place-items:center;inline-size:1.5rem;block-size:1.5rem;border-radius:var(--hm-radius-pill);background:var(--hm-accent-subtle);color:var(--hm-accent);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-bold)}.ne-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--hm-space-sm) var(--hm-space-md)}.ne-intro__lead{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:0}.ne-side{container:ne-side/inline-size;display:grid;grid-template-areas:\"publish\" \"until\" \"audience\" \"tip\" \"preview\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;gap:var(--hm-space-md);min-inline-size:0;padding:var(--hm-space-sm) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius);background:var(--hm-surface-muted)}.ne-side__publish{grid-area:publish}.ne-side__until{grid-area:until}.ne-side__audience{grid-area:audience}.ne-tip{grid-area:tip}.ne-side__preview{grid-area:preview;align-self:end}@container ne (min-width: 52rem){.ne-scroll{overflow:hidden}.ne-grid{flex:1 1 auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);min-block-size:0}.ne-intro{grid-column:1/-1;grid-template-columns:subgrid}.ne-content{min-block-size:0;overflow:hidden}.ne-side{min-block-size:0;overflow-y:auto}.ne-content__items{flex:1 1 0;min-block-size:0;overflow-y:auto}.ne-content__compare{display:grid;flex:1 1 0;grid-template-columns:repeat(2,minmax(0,1fr));min-block-size:0}.ne-content__editor{flex:1 1 0;grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;min-block-size:0}.ne-content__editor ::ng-deep .hm-rich-text__frame,.ne-content__editor ::ng-deep .hm-rich-text__loading{min-block-size:0}.ne-content__editor ::ng-deep .hm-rich-text__body{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.ne-content__editor ::ng-deep .hm-rich-text__area{flex:1 1 0;min-block-size:2lh;max-block-size:none;overflow-y:auto}.ne-content__editor--labelled{grid-template-rows:auto minmax(0,1fr)}}@media(max-height:55rem){@container ne-side (min-width: 34rem){.ne-side{grid-template-areas:\"publish audience\" \"until preview\" \"tip preview\";grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr}}}.ne-row{display:flex;flex-wrap:wrap;gap:var(--hm-space-sm)}.ne-row>*{flex:1 1 8rem;min-inline-size:0}.ne-note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.ne-preview{display:flex;flex-direction:column;gap:var(--hm-space-micro);padding:var(--hm-space-sm) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.ne-preview__head{display:flex;align-items:center;gap:var(--hm-space-xs)}.ne-preview__heading{color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.ne-preview__badge,.ne-preview__status{flex:none;padding:var(--hm-space-nano) var(--hm-space-xs);border-radius:var(--hm-radius-micro);background:var(--hm-accent-subtle);color:var(--hm-accent);font-size:var(--hm-font-size-3xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.ne-preview__item{display:flex;align-items:center;gap:var(--hm-space-sm);padding:var(--hm-space-xs) 0;border-block-start:var(--hm-border-hairline) solid var(--hm-divider)}.ne-preview__icon{display:grid;flex:none;place-items:center;inline-size:2rem;block-size:2rem;border-radius:var(--hm-radius-control);background:var(--hm-accent-subtle);color:var(--hm-accent)}.ne-preview__text{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--hm-space-nano);min-inline-size:0}.ne-preview__title{overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap}.ne-preview__summary{display:-webkit-box;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-xs);overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ne-preview__placeholder{color:var(--hm-muted);font-style:italic;font-weight:var(--hm-font-weight-regular)}.ne-preview__date{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.ne-preview__chevron{flex:none;color:var(--hm-muted)}.ne-tip{display:flex;align-items:flex-start;gap:var(--hm-space-xs);margin:0;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);font-size:var(--hm-font-size-xs)}@media(forced-colors:active){.ne-tip{border:var(--hm-border-hairline) solid CanvasText}}.ne-tip__icon{flex:none;color:var(--hm-info)}.ne-delete{margin-inline-end:auto}\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: ComboboxMultiComponent, selector: "hm-combobox-multi", inputs: ["label", "options", "selected", "extraOptions", "unknownLabel", "placeholder", "hint", "max", "visibleChipsLimit"], outputs: ["selectedChange"] }, { kind: "component", type: DataGridComponent, selector: "hm-data-grid", inputs: ["columns", "rows", "rowId", "caption", "rowActions", "loading", "error", "emptyMessage", "noResultsMessage", "filterable", "paginated", "pageState", "pagination", "totalItems", "sort", "selectable", "selectionMode", "selection", "rowSelectable", "rowSelectableReason", "rowDetailDisabled", "rowDetailHidden", "virtual", "rowHeight", "pinnedColumns", "columnState", "pageSizes", "fillHeight", "maxHeight", "bordered", "rowState", "rowClickable", "remoteSearch", "remoteSort", "itemsLabel", "pageSizeLabel", "exportable", "exportFileName", "groupBy", "aggregates", "aggregateFormatter", "persistKey", "persistStorage", "advancedFilter", "filterQuery", "columnManager", "columnOrder", "searchTerm"], outputs: ["pageStateChange", "sortChange", "selectionChange", "pinnedColumnsChange", "columnStateChange", "actionTriggered", "detailToggled", "rowClicked", "clearFiltersRequested", "filteredChange", "searchTermChanged", "groupByChange", "filterQueryChange", "columnOrderChange", "searchTermChange", "detailPaneToggled"] }, { kind: "directive", type: DataGridCellDirective, selector: "ng-template[hmCell]", inputs: ["hmCell"] }, { kind: "component", type: DatePickerComponent, selector: "hm-date-picker", inputs: ["value", "label", "labelHidden", "hint", "placeholder", "min", "max", "valueFormat"], outputs: ["valueChange"] }, { 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: ListEditorComponent, selector: "hm-list-editor", inputs: ["items", "label", "labelHidden", "hint", "placeholder", "descriptionPlaceholder", "pair", "itemLabel", "titleLabel", "descriptionLabel", "addLabel", "emptyText", "descriptionRequired", "allowDuplicates", "ignoreCase", "max", "validate", "editable", "readonly"], outputs: ["itemsChange", "added", "removed", "moved", "edited"] }, { kind: "component", type: ModalComponent, selector: "hm-modal", inputs: ["open", "heading", "size", "closeLabel", "closable", "beforeClose"], outputs: ["openChange", "closed"] }, { 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: SegmentedControlComponent, selector: "hm-segmented-control", inputs: ["options", "value", "label", "size", "emphasis"], outputs: ["valueChange"] }, { kind: "component", type: TagComponent, selector: "hm-tag", inputs: ["name", "color", "compact"] }, { kind: "component", type: TextareaComponent, selector: "hm-textarea", inputs: ["value", "label", "hint", "placeholder", "maxLength", "rows", "autoGrow", "labelHidden", "loading", "maxRows", "submitKey"], outputs: ["valueChange", "submitted"] }, { kind: "component", type: TimePickerComponent, selector: "hm-time-picker", inputs: ["value", "label", "labelHidden", "hint", "placeholder", "min", "max", "interval", "hourCycle"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceNewsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-auto-service-news', imports: [
+                        AccountAvatarComponent, AlertComponent, ButtonComponent, ComboboxMultiComponent, DataGridComponent, DataGridCellDirective,
+                        DatePickerComponent, IconComponent, InputComponent, ListEditorComponent, ModalComponent, RichTextComponent, SegmentedControlComponent,
+                        TagComponent, TextareaComponent, TimePickerComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Pagina\u00E7\u00E3o no servidor (agendadas e vencidas tamb\u00E9m); a busca/filtro local da grade fica desligada. -->\n<hm-data-grid\n  [columns]=\"columns()\"\n  [rows]=\"rows()\"\n  [rowId]=\"rowId\"\n  [caption]=\"text.caption\"\n  [loading]=\"loading()\"\n  [error]=\"loadError()\"\n  [emptyMessage]=\"text.empty\"\n  [rowActions]=\"rowActions()\"\n  [filterable]=\"false\"\n  [paginated]=\"false\"\n  [totalItems]=\"total()\"\n  [pageState]=\"pageState()\"\n  (pageStateChange)=\"onPageStateChange($event)\"\n  [pageSizes]=\"[10, 20, 50, 100]\"\n  (actionTriggered)=\"onAction($event)\"\n>\n  <hm-button dataGridActions icon=\"plus\" (clicked)=\"openCreate()\">{{ text.newNews }}</hm-button>\n  <ng-template hmCell=\"title\" let-n>\n    <span class=\"news-title\">\n      <span>{{ n.title }}</span>\n      @if (n.summary) { <span class=\"news-title__summary\">{{ n.summary }}</span> }\n    </span>\n  </ng-template>\n  <ng-template hmCell=\"status\" let-n>\n    <hm-tag [name]=\"statusLabel(n.status)\" [color]=\"statusColor(n.status)\" />\n  </ng-template>\n  <ng-template hmCell=\"groups\" let-n>\n    @if (n.groups.length) {\n      <span class=\"news-tags\">\n        @for (g of n.groups; track g.id) { <hm-tag [name]=\"g.name\" color=\"info\" /> }\n      </span>\n    } @else {\n      <span class=\"muted\">{{ text.audienceAll }}</span>\n    }\n  </ng-template>\n  <ng-template hmCell=\"author\" let-n>\n    @if (n.author; as a) {\n      <span class=\"news-author\">\n        <hm-account-avatar size=\"small\" [name]=\"a.name || a.username\" [imageUrl]=\"a.picture\" />\n        <span>{{ a.name || a.username }}</span>\n      </span>\n    }\n  </ng-template>\n</hm-data-grid>\n\n<!-- Modal: criar/editar novidade. O cabe\u00E7alho do hm-modal some da vista (o t\u00EDtulo segue como nome do di\u00E1logo, ver o\n     .scss) e o editor desenha o seu: \u00EDcone, t\u00EDtulo e subt\u00EDtulo. Pensado para caber sem rolagem num notebook: em cima,\n     \"1. Informa\u00E7\u00F5es principais\" (t\u00EDtulo) com o resumo ao lado; embaixo, o conte\u00FAdo do tipo escolhido no topo (texto;\n     introdu\u00E7\u00E3o + lista; ou introdu\u00E7\u00E3o + antes e agora), que estica e rola por dentro, ao lado do painel com publica\u00E7\u00E3o,\n     validade, p\u00FAblico, dica e a pr\u00E9via do In\u00EDcio no fim. O modal n\u00E3o rola; em tela estreita, tudo empilha. -->\n<hm-modal [open]=\"modalOpen()\" (openChange)=\"modalOpen.set($event)\" [heading]=\"editingId() ? text.editNews : text.newNews\" size=\"xlarge\"\n  (closed)=\"modalOpen.set(false)\">\n  <div class=\"ne\">\n    <header class=\"ne-head\">\n      <span class=\"ne-head__icon\" aria-hidden=\"true\"><hm-icon shape=\"announcement\" size=\"md\" /></span>\n      <span class=\"ne-head__text\">\n        <!-- O h2 do hm-modal j\u00E1 d\u00E1 o nome ao di\u00E1logo: este \u00E9 s\u00F3 o visual. -->\n        <span class=\"ne-head__title\" aria-hidden=\"true\">{{ editingId() ? text.editNews : text.newNews }}</span>\n        <span class=\"ne-head__intro\">{{ editingId() ? text.editNewsIntro : text.newNewsIntro }}</span>\n      </span>\n      <!-- Tipo de publica\u00E7\u00E3o: muda os campos do conte\u00FAdo e a pr\u00E9via. -->\n      <hm-segmented-control class=\"ne-kind\" [label]=\"text.kind\" [options]=\"kindOptions\" [value]=\"form.kind\" (valueChange)=\"setKind($event)\" />\n    </header>\n\n    <div class=\"ne-scroll\">\n      @if (saveError()) { <hm-alert variant=\"error\">{{ saveError() }}</hm-alert> }\n\n      <div class=\"ne-grid\">\n        <!-- Linha de cima: a se\u00E7\u00E3o 1 ocupa as duas colunas (subgrid): t\u00EDtulo \u00E0 esquerda, resumo \u00E0 direita. -->\n        <section class=\"ne-section ne-intro\" [attr.aria-labelledby]=\"uid + '-main'\">\n          <div class=\"ne-intro__lead\">\n            <div class=\"ne-section__head\">\n              <h3 class=\"ne-section__title\" [id]=\"uid + '-main'\"><span class=\"ne-step\" aria-hidden=\"true\">1</span>{{ text.sectionMain }}</h3>\n              <p class=\"ne-section__hint\">{{ text.sectionMainHint }}</p>\n            </div>\n            <hm-input [label]=\"text.title\" required [maxLength]=\"TITLE_MAX\" [(value)]=\"form.title\" (valueChange)=\"saveError.set(null)\" />\n          </div>\n          <hm-textarea class=\"ne-intro__summary\" [label]=\"text.summary\" [hint]=\"text.summaryHint\" [rows]=\"3\" [maxLength]=\"SUMMARY_MAX\"\n            [(value)]=\"form.summary\" />\n        </section>\n\n        <section class=\"ne-section ne-content\" [attr.aria-labelledby]=\"uid + '-body'\">\n          <div class=\"ne-section__head\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-body'\"><span class=\"ne-step\" aria-hidden=\"true\">2</span>{{ text.sectionBody }}</h3>\n            <p class=\"ne-section__hint\">\n              {{ form.kind === 'implementacao' ? text.sectionBodyHintImpl : form.kind === 'alteracao' ? text.sectionBodyHintAlt : text.sectionBodyHint }}\n            </p>\n          </div>\n          <!-- Estica at\u00E9 o fim da linha; quem rola \u00E9 o texto (ou a lista), n\u00E3o o modal. -->\n          @switch (form.kind) {\n            @case ('implementacao') {\n              <hm-rich-text class=\"ne-content__intro\" [label]=\"text.intro\" [rows]=\"2\" [maxRows]=\"4\" [loading]=\"loadingBody()\"\n                [(value)]=\"form.body\" />\n              <div class=\"ne-content__items\">\n                <hm-list-editor [label]=\"text.items\" [hint]=\"text.itemsHint\" [placeholder]=\"text.itemPlaceholder\" [emptyText]=\"text.itemsEmpty\"\n                  [max]=\"ITEMS_MAX\" [validate]=\"itemRule\" editable [items]=\"form.items\" (itemsChange)=\"form.items = [...$event]\" />\n              </div>\n            }\n            @case ('alteracao') {\n              <hm-rich-text class=\"ne-content__intro\" [label]=\"text.intro\" [rows]=\"2\" [maxRows]=\"4\" [loading]=\"loadingBody()\"\n                [(value)]=\"form.body\" />\n              <div class=\"ne-content__compare\">\n                <hm-rich-text class=\"ne-content__editor ne-content__editor--labelled\" [label]=\"text.before\" required [rows]=\"4\" [maxRows]=\"16\" [loading]=\"loadingBody()\"\n                  [(value)]=\"form.before\" />\n                <hm-rich-text class=\"ne-content__editor ne-content__editor--labelled\" [label]=\"text.after\" required [rows]=\"4\" [maxRows]=\"16\" [loading]=\"loadingBody()\"\n                  [(value)]=\"form.after\" />\n              </div>\n            }\n            @default {\n              <hm-rich-text class=\"ne-content__editor\" [label]=\"text.sectionBody\" labelHidden [hint]=\"text.bodyHint\" [rows]=\"6\" [maxRows]=\"24\"\n                showCounter [loading]=\"loadingBody()\" [(value)]=\"form.body\" />\n            }\n          }\n        </section>\n\n        <aside class=\"ne-side\">\n          <section class=\"ne-section ne-side__publish\" [attr.aria-labelledby]=\"uid + '-publish'\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-publish'\"><span class=\"ne-step\" aria-hidden=\"true\">3</span>{{ text.sectionPublish }}</h3>\n            <div class=\"ne-row\">\n              <hm-date-picker [label]=\"text.publishDate\" [(value)]=\"form.publishDate\" />\n              <hm-time-picker [label]=\"text.publishTime\" [(value)]=\"form.publishTime\" />\n            </div>\n            <p class=\"ne-note\">{{ text.publishHint }}</p>\n          </section>\n\n          <section class=\"ne-section ne-side__until\" [attr.aria-labelledby]=\"uid + '-until'\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-until'\"><span class=\"ne-step\" aria-hidden=\"true\">4</span>{{ text.sectionUntil }}</h3>\n            <hm-date-picker [label]=\"text.untilDate\" [hint]=\"text.untilHint\" [min]=\"form.publishDate\" [(value)]=\"form.until\" />\n            @if (untilBeforePublish) { <hm-alert variant=\"warning\">{{ text.errors.untilBeforePublish }}</hm-alert> }\n          </section>\n\n          <section class=\"ne-section ne-side__audience\" [attr.aria-labelledby]=\"uid + '-audience'\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-audience'\"><span class=\"ne-step\" aria-hidden=\"true\">5</span>{{ text.sectionAudience }}</h3>\n            <!-- Vazio = todos que entram no app. -->\n            <hm-combobox-multi [label]=\"text.audienceGroups\" [hint]=\"text.audienceHint\" [placeholder]=\"text.audienceAll\" [options]=\"audienceOptions()\"\n              [visibleChipsLimit]=\"null\" [selected]=\"form.groupIds\" (selectedChange)=\"form.groupIds = [...$event]\" />\n          </section>\n\n          <p class=\"ne-tip\"><hm-icon class=\"ne-tip__icon\" shape=\"lightbulb\" size=\"sm\" /><span><strong>{{ text.tipTitle }}</strong> {{ text.tipText }}</span></p>\n\n          <section class=\"ne-section ne-side__preview\" [attr.aria-labelledby]=\"uid + '-preview'\">\n            <h3 class=\"ne-section__title\" [id]=\"uid + '-preview'\"><hm-icon class=\"ne-section__icon\" shape=\"eye\" size=\"sm\" />{{ text.preview }}</h3>\n            <!-- Mesmo desenho do card Novidades do In\u00EDcio; repete o que est\u00E1 nos campos, ent\u00E3o fica fora da leitura. -->\n            <div class=\"ne-preview\" aria-hidden=\"true\">\n              <div class=\"ne-preview__head\">\n                <span class=\"ne-preview__heading\">{{ home.news }}</span>\n                <span class=\"ne-preview__badge\">{{ home.newsBadge }}</span>\n              </div>\n              <div class=\"ne-preview__item\">\n                <span class=\"ne-preview__icon\"><hm-icon [shape]=\"kindIcon\" size=\"sm\" /></span>\n                <span class=\"ne-preview__text\">\n                  <span class=\"ne-preview__title\" [class.ne-preview__placeholder]=\"!form.title.trim()\">{{ form.title.trim() || text.previewTitle }}</span>\n                  <span class=\"ne-preview__summary\" [class.ne-preview__placeholder]=\"!form.summary.trim()\">{{ form.summary.trim() || text.previewSummary }}</span>\n                  <span class=\"ne-preview__date\">\n                    <hm-icon shape=\"calendar\" size=\"xs\" />{{ previewDate }}\n                    @if (previewScheduled) { <span class=\"ne-preview__status\">{{ text.statusScheduled }}</span> }\n                    <span class=\"ne-preview__kind\">{{ kindLabel }}</span>\n                  </span>\n                </span>\n                <hm-icon class=\"ne-preview__chevron\" shape=\"angle-right\" size=\"sm\" />\n              </div>\n            </div>\n          </section>\n        </aside>\n      </div>\n    </div>\n  </div>\n\n  <ng-container footer>\n    <!-- Sem rascunho: a novidade n\u00E3o tem esse estado (sem data = publica ao salvar). -->\n    @if (editingId()) {\n      <hm-button class=\"ne-delete\" emphasis=\"medium\" intent=\"danger\" icon=\"trash\" [disabled]=\"saving() || removing()\" [loading]=\"removing()\"\n        (clicked)=\"removeFromModal()\">{{ common.delete }}</hm-button>\n    }\n    <hm-button emphasis=\"medium\" (clicked)=\"modalOpen.set(false)\">{{ common.cancel }}</hm-button>\n    <hm-button [disabled]=\"!canSave || loadingBody() || removing()\" [loading]=\"saving()\" (clicked)=\"save()\">\n      {{ editingId() ? common.save : common.create }}\n    </hm-button>\n  </ng-container>\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}:host{display:block}.news-title{display:flex;flex-direction:column;gap:2px;min-inline-size:0}.news-title__summary{overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-xs);text-overflow:ellipsis;white-space:nowrap}.news-tags,.news-author{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-xs)}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.ne){block-size:min(100dvh - 2 * var(--hm-space-md),60rem);max-block-size:none;grid-template-rows:minmax(0,1fr) auto}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.ne)>.hm-modal__header{position:absolute;z-index:1;inset-block-start:0;inset-inline-end:0;border:0;padding:var(--hm-space-sm)}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.ne) .hm-modal__heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host ::ng-deep .hm-modal__window:has(>.hm-modal__body>.ne)>.hm-modal__body{display:flex;flex-direction:column;min-block-size:0;overflow:hidden;padding:0}.ne{container:ne/inline-size;display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.ne-head{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:var(--hm-space-sm);padding:var(--hm-space-sm) var(--hm-space-md);padding-inline-end:calc(var(--hm-space-md) + var(--hm-control-height) + var(--hm-space-sm));border-block-end:var(--hm-border-hairline) solid var(--hm-divider)}.ne-head__icon{display:grid;flex:none;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:var(--hm-radius);background:var(--hm-accent-subtle);color:var(--hm-accent)}.ne-head__text{display:flex;flex-direction:column;gap:var(--hm-space-nano);min-inline-size:0}.ne-head__title{color:var(--hm-text);font-size:var(--hm-font-size-xl);font-weight:var(--hm-font-weight-bold);line-height:var(--hm-line-height-tight)}.ne-head__intro{color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.ne-kind{margin-inline-start:auto}.ne-content__intro{flex:none}.ne-content__compare{display:flex;flex-direction:column;gap:var(--hm-space-sm)}.ne-preview__kind{padding:var(--hm-space-nano) var(--hm-space-xs);border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius-pill);color:var(--hm-text);font-size:var(--hm-font-size-3xs)}.ne-scroll{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--hm-space-sm);min-block-size:0;overflow-y:auto;padding:var(--hm-space-md)}.ne-grid{display:grid;flex:1 0 auto;grid-template-columns:minmax(0,1fr);gap:var(--hm-space-md)}.ne-section{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:0}.ne-section__head{display:flex;flex-direction:column;gap:var(--hm-space-nano)}.ne-section__title{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)}.ne-section__icon{flex:none;color:var(--hm-accent)}.ne-section__hint{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-sm)}.ne-step{display:inline-grid;flex:none;place-items:center;inline-size:1.5rem;block-size:1.5rem;border-radius:var(--hm-radius-pill);background:var(--hm-accent-subtle);color:var(--hm-accent);font-size:var(--hm-font-size-xs);font-weight:var(--hm-font-weight-bold)}.ne-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--hm-space-sm) var(--hm-space-md)}.ne-intro__lead{display:flex;flex-direction:column;gap:var(--hm-space-xs);min-inline-size:0}.ne-side{container:ne-side/inline-size;display:grid;grid-template-areas:\"publish\" \"until\" \"audience\" \"tip\" \"preview\";grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;gap:var(--hm-space-md);min-inline-size:0;padding:var(--hm-space-sm) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius);background:var(--hm-surface-muted)}.ne-side__publish{grid-area:publish}.ne-side__until{grid-area:until}.ne-side__audience{grid-area:audience}.ne-tip{grid-area:tip}.ne-side__preview{grid-area:preview;align-self:end}@container ne (min-width: 52rem){.ne-scroll{overflow:hidden}.ne-grid{flex:1 1 auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);min-block-size:0}.ne-intro{grid-column:1/-1;grid-template-columns:subgrid}.ne-content{min-block-size:0;overflow:hidden}.ne-side{min-block-size:0;overflow-y:auto}.ne-content__items{flex:1 1 0;min-block-size:0;overflow-y:auto}.ne-content__compare{display:grid;flex:1 1 0;grid-template-columns:repeat(2,minmax(0,1fr));min-block-size:0}.ne-content__editor{flex:1 1 0;grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;min-block-size:0}.ne-content__editor ::ng-deep .hm-rich-text__frame,.ne-content__editor ::ng-deep .hm-rich-text__loading{min-block-size:0}.ne-content__editor ::ng-deep .hm-rich-text__body{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.ne-content__editor ::ng-deep .hm-rich-text__area{flex:1 1 0;min-block-size:2lh;max-block-size:none;overflow-y:auto}.ne-content__editor--labelled{grid-template-rows:auto minmax(0,1fr)}}@media(max-height:55rem){@container ne-side (min-width: 34rem){.ne-side{grid-template-areas:\"publish audience\" \"until preview\" \"tip preview\";grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr}}}.ne-row{display:flex;flex-wrap:wrap;gap:var(--hm-space-sm)}.ne-row>*{flex:1 1 8rem;min-inline-size:0}.ne-note{margin:0;color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.ne-preview{display:flex;flex-direction:column;gap:var(--hm-space-micro);padding:var(--hm-space-sm) var(--hm-space-md);border:var(--hm-border-hairline) solid var(--hm-divider);border-radius:var(--hm-radius);background:var(--hm-surface-raised)}.ne-preview__head{display:flex;align-items:center;gap:var(--hm-space-xs)}.ne-preview__heading{color:var(--hm-text);font-size:var(--hm-font-size-md);font-weight:var(--hm-font-weight-semibold)}.ne-preview__badge,.ne-preview__status{flex:none;padding:var(--hm-space-nano) var(--hm-space-xs);border-radius:var(--hm-radius-micro);background:var(--hm-accent-subtle);color:var(--hm-accent);font-size:var(--hm-font-size-3xs);font-weight:var(--hm-font-weight-semibold);letter-spacing:.04em;text-transform:uppercase}.ne-preview__item{display:flex;align-items:center;gap:var(--hm-space-sm);padding:var(--hm-space-xs) 0;border-block-start:var(--hm-border-hairline) solid var(--hm-divider)}.ne-preview__icon{display:grid;flex:none;place-items:center;inline-size:2rem;block-size:2rem;border-radius:var(--hm-radius-control);background:var(--hm-accent-subtle);color:var(--hm-accent)}.ne-preview__text{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--hm-space-nano);min-inline-size:0}.ne-preview__title{overflow:hidden;color:var(--hm-text);font-size:var(--hm-font-size-sm);font-weight:var(--hm-font-weight-semibold);text-overflow:ellipsis;white-space:nowrap}.ne-preview__summary{display:-webkit-box;overflow:hidden;color:var(--hm-muted);font-size:var(--hm-font-size-xs);overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ne-preview__placeholder{color:var(--hm-muted);font-style:italic;font-weight:var(--hm-font-weight-regular)}.ne-preview__date{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--hm-space-micro);color:var(--hm-muted);font-size:var(--hm-font-size-xs)}.ne-preview__chevron{flex:none;color:var(--hm-muted)}.ne-tip{display:flex;align-items:flex-start;gap:var(--hm-space-xs);margin:0;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);font-size:var(--hm-font-size-xs)}@media(forced-colors:active){.ne-tip{border:var(--hm-border-hairline) solid CanvasText}}.ne-tip__icon{flex:none;color:var(--hm-info)}.ne-delete{margin-inline-end:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { clientId: [{ type: i0.Input, args: [{ isSignal: true, alias: "clientId", required: false }] }] } });
+
+/**
+ * Tela "Novidades" do auto-serviço (router `AUTO_SERVICE_NEWS_TEMPLATE_ROUTER_ID`, na raiz do menu; migration 0036 do
+ * argos): o seletor de client + o painel de novidades que era a aba Cliente › Novidades. Carregada só por
+ * `AUTO_SERVICE_SCREENS.news` -- nunca exportada pelo ponto de entrada (ver `public-api.ts`).
+ */
+class AutoServiceNewsPageComponent {
+    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: AutoServiceNewsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: AutoServiceNewsPageComponent, isStandalone: true, selector: "spine-auto-service-news-page", ngImport: i0, template: `
+    <div class="as-stack">
+      <spine-auto-service-client-picker (clientChange)="client.set($event)" />
+      @if (client(); as c) {
+        <spine-auto-service-news [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: AutoServiceNewsComponent, selector: "spine-auto-service-news", inputs: ["clientId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: AutoServiceNewsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spine-auto-service-news-page', imports: [AutoServiceClientPickerComponent, AutoServiceNewsComponent], template: `
+    <div class="as-stack">
+      <spine-auto-service-client-picker (clientChange)="client.set($event)" />
+      @if (client(); as c) {
+        <spine-auto-service-news [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 { AutoServiceNewsPageComponent };
+//# sourceMappingURL=trismegisto-spine-auto-service-auto-service-news-page.component-CBemH4hr.mjs.map