@muxima-ui/core 1.0.0 → 1.2.0

package/fesm2022/muxima-ui-core-notification-center.mjs

@@ -0,0 +1,487 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, booleanAttribute, output, contentChild, signal, computed, DestroyRef, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { mxUniqueId } from '@muxima-ui/core/form-field';
+
+/** "agora", "há 5 min", "ontem", "há 3 dias" e, depois de uma semana, a data. */
+function mxRelativeTime(date, now = new Date(), locale = 'pt-AO') {
+    const diff = (date.getTime() - now.getTime()) / 1000;
+    const abs = Math.abs(diff);
+    if (abs < 45)
+        return 'agora';
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+    if (abs < 3600)
+        return rtf.format(Math.round(diff / 60), 'minute');
+    if (abs < 86400)
+        return rtf.format(Math.round(diff / 3600), 'hour');
+    if (abs < 7 * 86400)
+        return rtf.format(Math.round(diff / 86400), 'day');
+    return new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short' }).format(date);
+}
+/** Modelo para o conteúdo de cada notificação: `<ng-template mxNotificationContent let-n>`. */
+class MxNotificationContent {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxNotificationContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: MxNotificationContent, isStandalone: true, selector: "ng-template[mxNotificationContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxNotificationContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[mxNotificationContent]' }]
+        }] });
+/**
+ * Lista de notificações com por ler e lidas, filtro "Por ler", "Marcar todas como lidas"
+ * e acções por notificação. Usa-se dentro de um popover, de um drawer ou numa página.
+ *
+ * ```html
+ * <mx-notification-center [items]="notificacoes()" (opened)="abrir($event)"
+ *   (markRead)="marcar($event)" (markAllRead)="marcarTodas()" (dismiss)="remover($event)" />
+ * ```
+ *
+ * O componente não guarda estado: recebe a lista e emite o que a pessoa fez.
+ * Quando chegam notificações novas por ler, anuncia-as ao leitor de ecrã.
+ */
+class MxNotificationCenter {
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    title = input('Notificações', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Nível do título para o leitor de ecrã (h2 por omissão). */
+    headingLevel = input(2, ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+    markAllText = input('Marcar todas como lidas', ...(ngDevMode ? [{ debugName: "markAllText" }] : /* istanbul ignore next */ []));
+    emptyText = input('Sem notificações.', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    emptyUnreadText = input('Está tudo lido.', ...(ngDevMode ? [{ debugName: "emptyUnreadText" }] : /* istanbul ignore next */ []));
+    filterLabel = input('Mostrar', ...(ngDevMode ? [{ debugName: "filterLabel" }] : /* istanbul ignore next */ []));
+    /** Mostra os filtros Todas, Por ler e as categorias. */
+    showFilter = input(true, { ...(ngDevMode ? { debugName: "showFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mostra o botão de remover em cada notificação. */
+    dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Marca como lida ao abrir (emite markRead além de opened). */
+    markReadOnOpen = input(true, { ...(ngDevMode ? { debugName: "markReadOnOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Anuncia ao leitor de ecrã quando chegam notificações por ler. */
+    announce = input(true, { ...(ngDevMode ? { debugName: "announce" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    locale = input('pt-AO', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    opened = output();
+    markRead = output();
+    markAllRead = output();
+    dismiss = output();
+    contentTpl = contentChild(MxNotificationContent, ...(ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []));
+    announcer = inject(LiveAnnouncer);
+    titleId = mxUniqueId('mx-notification-title');
+    filter = signal('all', ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    /** Muda a cada minuto, para "há 5 min" se actualizar. */
+    now = signal(new Date(), ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+    unread = computed(() => this.items().filter((n) => !n.read).length, ...(ngDevMode ? [{ debugName: "unread" }] : /* istanbul ignore next */ []));
+    categories = computed(() => [
+        ...new Set(this.items()
+            .map((n) => n.category)
+            .filter((c) => !!c)),
+    ], ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    visible = computed(() => {
+        const f = this.filter();
+        const list = [...this.items()].sort((a, b) => b.time.getTime() - a.time.getTime());
+        if (f === 'unread')
+            return list.filter((n) => !n.read);
+        if (f !== 'all')
+            return list.filter((n) => n.category === f);
+        return list;
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const timer = setInterval(() => this.now.set(new Date()), 60_000);
+        inject(DestroyRef).onDestroy(() => clearInterval(timer));
+        let previous = null;
+        effect(() => {
+            const items = this.items();
+            const ids = new Set(items.map((n) => n.id));
+            if (previous && untracked(() => this.announce())) {
+                const fresh = items.filter((n) => !n.read && !previous.has(n.id));
+                if (fresh.length)
+                    this.announcer.announce(fresh.length === 1
+                        ? `Nova notificação: ${fresh[0].title}`
+                        : `${fresh.length} notificações novas`);
+            }
+            previous = ids;
+        });
+    }
+    relative(d) {
+        return mxRelativeTime(d, this.now(), this.locale());
+    }
+    open(n) {
+        if (!n.read && this.markReadOnOpen())
+            this.markRead.emit(n);
+        this.opened.emit(n);
+    }
+    dismissItem(n) {
+        this.dismiss.emit(n);
+        this.announcer.announce(`${n.title} removida.`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxNotificationCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MxNotificationCenter, isStandalone: true, selector: "mx-notification-center", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, markAllText: { classPropertyName: "markAllText", publicName: "markAllText", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, emptyUnreadText: { classPropertyName: "emptyUnreadText", publicName: "emptyUnreadText", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, markReadOnOpen: { classPropertyName: "markReadOnOpen", publicName: "markReadOnOpen", isSignal: true, isRequired: false, transformFunction: null }, announce: { classPropertyName: "announce", publicName: "announce", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", markRead: "markRead", markAllRead: "markAllRead", dismiss: "dismiss" }, host: { properties: { "attr.aria-label": "null" }, classAttribute: "mx-notification-center" }, queries: [{ propertyName: "contentTpl", first: true, predicate: MxNotificationContent, descendants: true, isSignal: true }], exportAs: ["mxNotificationCenter"], ngImport: i0, template: `
+    <div class="mx-notification-head">
+      <p
+        class="mx-notification-title"
+        role="heading"
+        [attr.aria-level]="headingLevel()"
+        [id]="titleId"
+      >
+        {{ title() }}
+      </p>
+      @if (unread()) {
+        <span class="mx-notification-count"
+          >{{ unread() }}<span class="mx-visually-hidden"> por ler</span></span
+        >
+      }
+      <button
+        type="button"
+        class="mx-notification-link"
+        [disabled]="!unread()"
+        (click)="markAllRead.emit()"
+      >
+        {{ markAllText() }}
+      </button>
+    </div>
+
+    @if (showFilter()) {
+      <div class="mx-notification-filters" role="group" [attr.aria-label]="filterLabel()">
+        <button
+          type="button"
+          class="mx-chip mx-chip-toggle"
+          data-size="sm"
+          [attr.aria-pressed]="filter() === 'all'"
+          (click)="filter.set('all')"
+        >
+          Todas
+        </button>
+        <button
+          type="button"
+          class="mx-chip mx-chip-toggle"
+          data-size="sm"
+          [attr.aria-pressed]="filter() === 'unread'"
+          (click)="filter.set('unread')"
+        >
+          Por ler ({{ unread() }})
+        </button>
+        @for (c of categories(); track c) {
+          <button
+            type="button"
+            class="mx-chip mx-chip-toggle"
+            data-size="sm"
+            [attr.aria-pressed]="filter() === c"
+            (click)="filter.set(c)"
+          >
+            {{ c }}
+          </button>
+        }
+      </div>
+    }
+
+    @if (visible().length) {
+      <ul class="mx-notification-list" [attr.aria-labelledby]="titleId">
+        @for (n of visible(); track n.id) {
+          <li
+            class="mx-notification"
+            [attr.data-unread]="n.read ? null : ''"
+            [attr.data-variant]="n.variant && n.variant !== 'default' ? n.variant : null"
+          >
+            <span class="mx-notification-dot" aria-hidden="true"></span>
+            <button type="button" class="mx-notification-main" (click)="open(n)">
+              @if (!n.read) {
+                <span class="mx-visually-hidden">Por ler: </span>
+              }
+              @if (contentTpl(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: n }" />
+              } @else {
+                <span class="mx-notification-text">{{ n.title }}</span>
+                @if (n.description) {
+                  <span class="mx-notification-desc">{{ n.description }}</span>
+                }
+              }
+              <time class="mx-notification-time" [attr.datetime]="n.time.toISOString()">{{
+                relative(n.time)
+              }}</time>
+            </button>
+            <div class="mx-notification-actions">
+              @if (!n.read) {
+                <button
+                  type="button"
+                  class="mx-notification-action"
+                  [attr.aria-label]="'Marcar como lida: ' + n.title"
+                  (click)="markRead.emit(n)"
+                >
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path
+                      d="M3.5 8.5l3 3 6-7"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </button>
+              }
+              @if (dismissible()) {
+                <button
+                  type="button"
+                  class="mx-notification-action"
+                  [attr.aria-label]="'Remover: ' + n.title"
+                  (click)="dismissItem(n)"
+                >
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path
+                      d="M4.5 4.5l7 7M11.5 4.5l-7 7"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
+              }
+            </div>
+          </li>
+        }
+      </ul>
+    } @else {
+      <div class="mx-notification-empty">
+        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path
+            d="M6 16.5V11a6 6 0 1 1 12 0v5.5l1.5 2h-15l1.5-2z M10 20.5a2 2 0 0 0 4 0"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <p>{{ filter() === 'unread' ? emptyUnreadText() : emptyText() }}</p>
+      </div>
+    }
+    <ng-content select="[mxNotificationFooter]" />
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxNotificationCenter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mx-notification-center',
+                    exportAs: 'mxNotificationCenter',
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'mx-notification-center', '[attr.aria-label]': 'null' },
+                    template: `
+    <div class="mx-notification-head">
+      <p
+        class="mx-notification-title"
+        role="heading"
+        [attr.aria-level]="headingLevel()"
+        [id]="titleId"
+      >
+        {{ title() }}
+      </p>
+      @if (unread()) {
+        <span class="mx-notification-count"
+          >{{ unread() }}<span class="mx-visually-hidden"> por ler</span></span
+        >
+      }
+      <button
+        type="button"
+        class="mx-notification-link"
+        [disabled]="!unread()"
+        (click)="markAllRead.emit()"
+      >
+        {{ markAllText() }}
+      </button>
+    </div>
+
+    @if (showFilter()) {
+      <div class="mx-notification-filters" role="group" [attr.aria-label]="filterLabel()">
+        <button
+          type="button"
+          class="mx-chip mx-chip-toggle"
+          data-size="sm"
+          [attr.aria-pressed]="filter() === 'all'"
+          (click)="filter.set('all')"
+        >
+          Todas
+        </button>
+        <button
+          type="button"
+          class="mx-chip mx-chip-toggle"
+          data-size="sm"
+          [attr.aria-pressed]="filter() === 'unread'"
+          (click)="filter.set('unread')"
+        >
+          Por ler ({{ unread() }})
+        </button>
+        @for (c of categories(); track c) {
+          <button
+            type="button"
+            class="mx-chip mx-chip-toggle"
+            data-size="sm"
+            [attr.aria-pressed]="filter() === c"
+            (click)="filter.set(c)"
+          >
+            {{ c }}
+          </button>
+        }
+      </div>
+    }
+
+    @if (visible().length) {
+      <ul class="mx-notification-list" [attr.aria-labelledby]="titleId">
+        @for (n of visible(); track n.id) {
+          <li
+            class="mx-notification"
+            [attr.data-unread]="n.read ? null : ''"
+            [attr.data-variant]="n.variant && n.variant !== 'default' ? n.variant : null"
+          >
+            <span class="mx-notification-dot" aria-hidden="true"></span>
+            <button type="button" class="mx-notification-main" (click)="open(n)">
+              @if (!n.read) {
+                <span class="mx-visually-hidden">Por ler: </span>
+              }
+              @if (contentTpl(); as tpl) {
+                <ng-container *ngTemplateOutlet="tpl.template; context: { $implicit: n }" />
+              } @else {
+                <span class="mx-notification-text">{{ n.title }}</span>
+                @if (n.description) {
+                  <span class="mx-notification-desc">{{ n.description }}</span>
+                }
+              }
+              <time class="mx-notification-time" [attr.datetime]="n.time.toISOString()">{{
+                relative(n.time)
+              }}</time>
+            </button>
+            <div class="mx-notification-actions">
+              @if (!n.read) {
+                <button
+                  type="button"
+                  class="mx-notification-action"
+                  [attr.aria-label]="'Marcar como lida: ' + n.title"
+                  (click)="markRead.emit(n)"
+                >
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path
+                      d="M3.5 8.5l3 3 6-7"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </button>
+              }
+              @if (dismissible()) {
+                <button
+                  type="button"
+                  class="mx-notification-action"
+                  [attr.aria-label]="'Remover: ' + n.title"
+                  (click)="dismissItem(n)"
+                >
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path
+                      d="M4.5 4.5l7 7M11.5 4.5l-7 7"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                </button>
+              }
+            </div>
+          </li>
+        }
+      </ul>
+    } @else {
+      <div class="mx-notification-empty">
+        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path
+            d="M6 16.5V11a6 6 0 1 1 12 0v5.5l1.5 2h-15l1.5-2z M10 20.5a2 2 0 0 0 4 0"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <p>{{ filter() === 'unread' ? emptyUnreadText() : emptyText() }}</p>
+      </div>
+    }
+    <ng-content select="[mxNotificationFooter]" />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], markAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "markAllText", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], emptyUnreadText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyUnreadText", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], markReadOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "markReadOnOpen", required: false }] }], announce: [{ type: i0.Input, args: [{ isSignal: true, alias: "announce", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], markRead: [{ type: i0.Output, args: ["markRead"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MxNotificationContent), { isSignal: true }] }] } });
+/**
+ * Botão do sino com a contagem por ler. O nome inclui a contagem:
+ * "Notificações, 3 por ler".
+ *
+ * ```html
+ * <button mxNotificationBell [count]="porLer()" [mxPopoverTrigger]="painel"></button>
+ * ```
+ */
+class MxNotificationBell {
+    count = input(0, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    max = input(99, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    label = input('Notificações', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxNotificationBell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MxNotificationBell, isStandalone: true, selector: "button[mxNotificationBell]", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.aria-label": "count() ? label() + \", \" + count() + \" por ler\" : label()" }, classAttribute: "mx-notification-bell" }, exportAs: ["mxNotificationBell"], ngImport: i0, template: `
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M6 16.5V11a6 6 0 1 1 12 0v5.5l1.5 2h-15l1.5-2z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10 20.5a2 2 0 0 0 4 0"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+      />
+    </svg>
+    @if (count()) {
+      <span class="mx-notification-bell-count" aria-hidden="true">{{
+        count() > max() ? max() + '+' : count()
+      }}</span>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxNotificationBell, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[mxNotificationBell]',
+                    exportAs: 'mxNotificationBell',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'mx-notification-bell',
+                        type: 'button',
+                        '[attr.aria-label]': 'count() ? label() + ", " + count() + " por ler" : label()',
+                    },
+                    template: `
+    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M6 16.5V11a6 6 0 1 1 12 0v5.5l1.5 2h-15l1.5-2z"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10 20.5a2 2 0 0 0 4 0"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+      />
+    </svg>
+    @if (count()) {
+      <span class="mx-notification-bell-count" aria-hidden="true">{{
+        count() > max() ? max() + '+' : count()
+      }}</span>
+    }
+  `,
+                }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MxNotificationBell, MxNotificationCenter, MxNotificationContent, mxRelativeTime };
+//# sourceMappingURL=muxima-ui-core-notification-center.mjs.map

package/fesm2022/muxima-ui-core-notification-center.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"muxima-ui-core-notification-center.mjs","sources":["../../../projects/core/notification-center/notification-center.ts","../../../projects/core/notification-center/muxima-ui-core-notification-center.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  Directive,\n  TemplateRef,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { mxUniqueId } from '@muxima-ui/core/form-field';\n\nexport interface MxNotification<D = unknown> {\n  id: string | number;\n  title: string;\n  description?: string;\n  time: Date;\n  read?: boolean;\n  /** Cor do marcador: info em Kwanza, success, warning, danger. */\n  variant?: 'default' | 'info' | 'success' | 'warning' | 'danger';\n  /** Agrupa por categoria nos filtros (ex.: \"Facturas\"). */\n  category?: string;\n  data?: D;\n}\n\n/** \"agora\", \"há 5 min\", \"ontem\", \"há 3 dias\" e, depois de uma semana, a data. */\nexport function mxRelativeTime(date: Date, now = new Date(), locale = 'pt-AO'): string {\n  const diff = (date.getTime() - now.getTime()) / 1000;\n  const abs = Math.abs(diff);\n  if (abs < 45) return 'agora';\n  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });\n  if (abs < 3600) return rtf.format(Math.round(diff / 60), 'minute');\n  if (abs < 86400) return rtf.format(Math.round(diff / 3600), 'hour');\n  if (abs < 7 * 86400) return rtf.format(Math.round(diff / 86400), 'day');\n  return new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short' }).format(date);\n}\n\n/** Modelo para o conteúdo de cada notificação: `<ng-template mxNotificationContent let-n>`. */\n@Directive({ selector: 'ng-template[mxNotificationContent]' })\nexport class MxNotificationContent {\n  readonly template = inject(TemplateRef);\n}\n\n/**\n * Lista de notificações com por ler e lidas, filtro \"Por ler\", \"Marcar todas como lidas\"\n * e acções por notificação. Usa-se dentro de um popover, de um drawer ou numa página.\n *\n * ```html\n * <mx-notification-center [items]=\"notificacoes()\" (opened)=\"abrir($event)\"\n *   (markRead)=\"marcar($event)\" (markAllRead)=\"marcarTodas()\" (dismiss)=\"remover($event)\" />\n * ```\n *\n * O componente não guarda estado: recebe a lista e emite o que a pessoa fez.\n * Quando chegam notificações novas por ler, anuncia-as ao leitor de ecrã.\n */\n@Component({\n  selector: 'mx-notification-center',\n  exportAs: 'mxNotificationCenter',\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'mx-notification-center', '[attr.aria-label]': 'null' },\n  template: `\n    <div class=\"mx-notification-head\">\n      <p\n        class=\"mx-notification-title\"\n        role=\"heading\"\n        [attr.aria-level]=\"headingLevel()\"\n        [id]=\"titleId\"\n      >\n        {{ title() }}\n      </p>\n      @if (unread()) {\n        <span class=\"mx-notification-count\"\n          >{{ unread() }}<span class=\"mx-visually-hidden\"> por ler</span></span\n        >\n      }\n      <button\n        type=\"button\"\n        class=\"mx-notification-link\"\n        [disabled]=\"!unread()\"\n        (click)=\"markAllRead.emit()\"\n      >\n        {{ markAllText() }}\n      </button>\n    </div>\n\n    @if (showFilter()) {\n      <div class=\"mx-notification-filters\" role=\"group\" [attr.aria-label]=\"filterLabel()\">\n        <button\n          type=\"button\"\n          class=\"mx-chip mx-chip-toggle\"\n          data-size=\"sm\"\n          [attr.aria-pressed]=\"filter() === 'all'\"\n          (click)=\"filter.set('all')\"\n        >\n          Todas\n        </button>\n        <button\n          type=\"button\"\n          class=\"mx-chip mx-chip-toggle\"\n          data-size=\"sm\"\n          [attr.aria-pressed]=\"filter() === 'unread'\"\n          (click)=\"filter.set('unread')\"\n        >\n          Por ler ({{ unread() }})\n        </button>\n        @for (c of categories(); track c) {\n          <button\n            type=\"button\"\n            class=\"mx-chip mx-chip-toggle\"\n            data-size=\"sm\"\n            [attr.aria-pressed]=\"filter() === c\"\n            (click)=\"filter.set(c)\"\n          >\n            {{ c }}\n          </button>\n        }\n      </div>\n    }\n\n    @if (visible().length) {\n      <ul class=\"mx-notification-list\" [attr.aria-labelledby]=\"titleId\">\n        @for (n of visible(); track n.id) {\n          <li\n            class=\"mx-notification\"\n            [attr.data-unread]=\"n.read ? null : ''\"\n            [attr.data-variant]=\"n.variant && n.variant !== 'default' ? n.variant : null\"\n          >\n            <span class=\"mx-notification-dot\" aria-hidden=\"true\"></span>\n            <button type=\"button\" class=\"mx-notification-main\" (click)=\"open(n)\">\n              @if (!n.read) {\n                <span class=\"mx-visually-hidden\">Por ler: </span>\n              }\n              @if (contentTpl(); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: n }\" />\n              } @else {\n                <span class=\"mx-notification-text\">{{ n.title }}</span>\n                @if (n.description) {\n                  <span class=\"mx-notification-desc\">{{ n.description }}</span>\n                }\n              }\n              <time class=\"mx-notification-time\" [attr.datetime]=\"n.time.toISOString()\">{{\n                relative(n.time)\n              }}</time>\n            </button>\n            <div class=\"mx-notification-actions\">\n              @if (!n.read) {\n                <button\n                  type=\"button\"\n                  class=\"mx-notification-action\"\n                  [attr.aria-label]=\"'Marcar como lida: ' + n.title\"\n                  (click)=\"markRead.emit(n)\"\n                >\n                  <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                    <path\n                      d=\"M3.5 8.5l3 3 6-7\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                    />\n                  </svg>\n                </button>\n              }\n              @if (dismissible()) {\n                <button\n                  type=\"button\"\n                  class=\"mx-notification-action\"\n                  [attr.aria-label]=\"'Remover: ' + n.title\"\n                  (click)=\"dismissItem(n)\"\n                >\n                  <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n                    <path\n                      d=\"M4.5 4.5l7 7M11.5 4.5l-7 7\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-linecap=\"round\"\n                    />\n                  </svg>\n                </button>\n              }\n            </div>\n          </li>\n        }\n      </ul>\n    } @else {\n      <div class=\"mx-notification-empty\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M6 16.5V11a6 6 0 1 1 12 0v5.5l1.5 2h-15l1.5-2z M10 20.5a2 2 0 0 0 4 0\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n        <p>{{ filter() === 'unread' ? emptyUnreadText() : emptyText() }}</p>\n      </div>\n    }\n    <ng-content select=\"[mxNotificationFooter]\" />\n  `,\n})\nexport class MxNotificationCenter<D = unknown> {\n  readonly items = input.required<readonly MxNotification<D>[]>();\n  readonly title = input('Notificações');\n  /** Nível do título para o leitor de ecrã (h2 por omissão). */\n  readonly headingLevel = input(2);\n  readonly markAllText = input('Marcar todas como lidas');\n  readonly emptyText = input('Sem notificações.');\n  readonly emptyUnreadText = input('Está tudo lido.');\n  readonly filterLabel = input('Mostrar');\n  /** Mostra os filtros Todas, Por ler e as categorias. */\n  readonly showFilter = input(true, { transform: booleanAttribute });\n  /** Mostra o botão de remover em cada notificação. */\n  readonly dismissible = input(false, { transform: booleanAttribute });\n  /** Marca como lida ao abrir (emite markRead além de opened). */\n  readonly markReadOnOpen = input(true, { transform: booleanAttribute });\n  /** Anuncia ao leitor de ecrã quando chegam notificações por ler. */\n  readonly announce = input(true, { transform: booleanAttribute });\n  readonly locale = input('pt-AO');\n\n  readonly opened = output<MxNotification<D>>();\n  readonly markRead = output<MxNotification<D>>();\n  readonly markAllRead = output<void>();\n  readonly dismiss = output<MxNotification<D>>();\n\n  protected readonly contentTpl = contentChild(MxNotificationContent);\n  private readonly announcer = inject(LiveAnnouncer);\n  protected readonly titleId = mxUniqueId('mx-notification-title');\n  readonly filter = signal<string>('all');\n  /** Muda a cada minuto, para \"há 5 min\" se actualizar. */\n  private readonly now = signal(new Date());\n\n  readonly unread = computed(() => this.items().filter((n) => !n.read).length);\n  protected readonly categories = computed(() => [\n    ...new Set(\n      this.items()\n        .map((n) => n.category)\n        .filter((c): c is string => !!c),\n    ),\n  ]);\n  protected readonly visible = computed(() => {\n    const f = this.filter();\n    const list = [...this.items()].sort((a, b) => b.time.getTime() - a.time.getTime());\n    if (f === 'unread') return list.filter((n) => !n.read);\n    if (f !== 'all') return list.filter((n) => n.category === f);\n    return list;\n  });\n\n  constructor() {\n    const timer = setInterval(() => this.now.set(new Date()), 60_000);\n    inject(DestroyRef).onDestroy(() => clearInterval(timer));\n    let previous: Set<string | number> | null = null;\n    effect(() => {\n      const items = this.items();\n      const ids = new Set(items.map((n) => n.id));\n      if (previous && untracked(() => this.announce())) {\n        const fresh = items.filter((n) => !n.read && !previous!.has(n.id));\n        if (fresh.length)\n          this.announcer.announce(\n            fresh.length === 1\n              ? `Nova notificação: ${fresh[0].title}`\n              : `${fresh.length} notificações novas`,\n          );\n      }\n      previous = ids;\n    });\n  }\n\n  protected relative(d: Date): string {\n    return mxRelativeTime(d, this.now(), this.locale());\n  }\n\n  protected open(n: MxNotification<D>): void {\n    if (!n.read && this.markReadOnOpen()) this.markRead.emit(n);\n    this.opened.emit(n);\n  }\n\n  protected dismissItem(n: MxNotification<D>): void {\n    this.dismiss.emit(n);\n    this.announcer.announce(`${n.title} removida.`);\n  }\n}\n\n/**\n * Botão do sino com a contagem por ler. O nome inclui a contagem:\n * \"Notificações, 3 por ler\".\n *\n * ```html\n * <button mxNotificationBell [count]=\"porLer()\" [mxPopoverTrigger]=\"painel\"></button>\n * ```\n */\n@Component({\n  selector: 'button[mxNotificationBell]',\n  exportAs: 'mxNotificationBell',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'mx-notification-bell',\n    type: 'button',\n    '[attr.aria-label]': 'count() ? label() + \", \" + count() + \" por ler\" : label()',\n  },\n  template: `\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M6 16.5V11a6 6 0 1 1 12 0v5.5l1.5 2h-15l1.5-2z\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.75\"\n        stroke-linejoin=\"round\"\n      />\n      <path\n        d=\"M10 20.5a2 2 0 0 0 4 0\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.75\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n    @if (count()) {\n      <span class=\"mx-notification-bell-count\" aria-hidden=\"true\">{{\n        count() > max() ? max() + '+' : count()\n      }}</span>\n    }\n  `,\n})\nexport class MxNotificationBell {\n  readonly count = input(0);\n  readonly max = input(99);\n  readonly label = input('Notificações');\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}