@mesgflow/ui-kit 0.6.0 → 0.7.0

package/fesm2022/mesgflow-ui-kit-nav-menu.mjs

@@ -0,0 +1,276 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, inject, ElementRef, computed, DestroyRef, Component } from '@angular/core';
+import { nextId } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+
+/**
+ * `<mf-nav-menu [items]="nav" ariaLabel="Ana gezinme" (linkClick)="go($event)" />`
+ *
+ * Pazarlama/site başlığı gezinmesi — WAI-ARIA APG "Disclosure Navigation
+ * Menu" (bilerek `role="menu"` DEĞİL: site gezinmesi bağlantılardır, menü
+ * uygulama komutlarıdır). Üst düğmeler `aria-expanded` + `aria-controls`;
+ * paneller ızgara bağlantılar + isteğe bağlı vurgulu kart.
+ *
+ * - Fare: üzerine gelince kısa gecikmeyle açılır, ayrılınca kapanır.
+ * - Klavye: Enter/Boşluk aç/kapa, Escape kapatır ve odağı düğmeye döndürür,
+ *   odak gezinmeden çıkınca panel kapanır.
+ * - `linkClick`: yönlendirici kullanan uygulamalar için (orta tık/yeni sekme
+ *   için `href` korunur; `event.preventDefault()` tüketicidedir).
+ */
+class NavMenu {
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** ms — fare ile açılma gecikmesi. */
+    hoverDelay = input(120, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverDelay" }] : /* istanbul ignore next */ []));
+    linkClick = output();
+    baseId = nextId('mf-nav-menu');
+    open = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    timer;
+    anyOpen = computed(() => this.open() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anyOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+    }
+    panelWidth(item) {
+        const cols = (item.links?.length ?? 0) > 3 ? 2 : 1;
+        return `min(${cols * 18 + (item.featured ? 15 : 0)}rem, calc(100vw - 2rem))`;
+    }
+    toggle(i) {
+        clearTimeout(this.timer);
+        this.open.set(this.open() === i ? null : i);
+    }
+    hoverOpen(i) {
+        if (!this.items()[i]?.links?.length)
+            return this.hoverClose();
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => this.open.set(i), this.anyOpen() ? 0 : this.hoverDelay());
+    }
+    hoverClose() {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => this.open.set(null), 200);
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (!next || !this.host.nativeElement.contains(next))
+            this.open.set(null);
+    }
+    closeAndFocus() {
+        const i = this.open();
+        if (i === null)
+            return;
+        this.open.set(null);
+        this.host.nativeElement.querySelector(`#${this.baseId}-trigger-${i}`)?.focus();
+    }
+    onLink(event, link) {
+        this.linkClick.emit({ link, event });
+        this.open.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavMenu, isStandalone: true, selector: "mf-nav-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hoverDelay: { classPropertyName: "hoverDelay", publicName: "hoverDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick" }, host: { listeners: { "focusout": "onFocusOut($event)", "keydown.escape": "closeAndFocus()" }, classAttribute: "relative block" }, exportAs: ["mfNavMenu"], ngImport: i0, template: `
+    <nav [attr.aria-label]="ariaLabel() || null">
+      <ul class="m-0 flex list-none items-center gap-0.5 p-0">
+        @for (item of items(); track item.label; let i = $index) {
+          <li (pointerenter)="hoverOpen(i)" (pointerleave)="hoverClose()">
+            @if (item.links?.length) {
+              <button
+                type="button"
+                [id]="baseId + '-trigger-' + i"
+                [attr.aria-expanded]="open() === i"
+                [attr.aria-controls]="baseId + '-panel-' + i"
+                class="inline-flex h-9 items-center gap-1 rounded-md px-3 text-sm font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-expanded:text-fg"
+                (click)="toggle(i)"
+              >
+                {{ item.label }}
+                <span
+                  mfIcon
+                  [size]="14"
+                  class="transition-transform duration-base ease-emphasis"
+                  [class.rotate-180]="open() === i"
+                  >expand_more</span
+                >
+              </button>
+              <div
+                [id]="baseId + '-panel-' + i"
+                [hidden]="open() !== i"
+                class="absolute start-0 top-full z-overlay pt-2"
+              >
+                <div
+                  class="flex gap-2 rounded-xl border border-hairline bg-overlay p-2 shadow-3 animate-overlay-in"
+                  [style.width]="panelWidth(item)"
+                >
+                  <ul
+                    class="m-0 grid flex-1 list-none gap-1 p-0"
+                    [class.grid-cols-2]="item.links.length > 3"
+                  >
+                    @for (link of item.links; track link.href) {
+                      <li>
+                        <a
+                          [href]="link.href"
+                          class="flex items-start gap-3 rounded-lg p-2.5 no-underline transition-colors duration-fast hover:bg-state-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring"
+                          (click)="onLink($event, link)"
+                        >
+                          @if (link.icon) {
+                            <span
+                              mfIcon
+                              [size]="18"
+                              class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary-tint text-primary-tint-fg"
+                              >{{ link.icon }}</span
+                            >
+                          }
+                          <span class="min-w-0">
+                            <span class="block text-sm font-medium text-fg">{{ link.label }}</span>
+                            @if (link.description) {
+                              <span class="mt-0.5 block text-xs text-fg-muted">{{
+                                link.description
+                              }}</span>
+                            }
+                          </span>
+                        </a>
+                      </li>
+                    }
+                  </ul>
+                  @if (item.featured; as f) {
+                    <a
+                      [href]="f.href"
+                      class="relative flex w-56 shrink-0 flex-col justify-end overflow-hidden rounded-lg bg-brand-deep p-4 text-white no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+                      (click)="onLink($event, f)"
+                    >
+                      <span class="pointer-events-none absolute inset-0 bg-grid opacity-40"></span>
+                      <span class="relative font-display font-semibold">{{ f.label }}</span>
+                      @if (f.description) {
+                        <span class="relative mt-1 text-xs text-white/80">{{ f.description }}</span>
+                      }
+                    </a>
+                  }
+                </div>
+              </div>
+            } @else {
+              <a
+                [href]="item.href ?? '#'"
+                class="inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-fg-muted no-underline transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+                (click)="onLink($event, { label: item.label, href: item.href ?? '#' })"
+                >{{ item.label }}</a
+              >
+            }
+          </li>
+        }
+      </ul>
+    </nav>
+  `, isInline: true, dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-nav-menu',
+                    exportAs: 'mfNavMenu',
+                    imports: [Icon],
+                    host: {
+                        class: 'relative block',
+                        '(focusout)': 'onFocusOut($event)',
+                        '(keydown.escape)': 'closeAndFocus()',
+                    },
+                    template: `
+    <nav [attr.aria-label]="ariaLabel() || null">
+      <ul class="m-0 flex list-none items-center gap-0.5 p-0">
+        @for (item of items(); track item.label; let i = $index) {
+          <li (pointerenter)="hoverOpen(i)" (pointerleave)="hoverClose()">
+            @if (item.links?.length) {
+              <button
+                type="button"
+                [id]="baseId + '-trigger-' + i"
+                [attr.aria-expanded]="open() === i"
+                [attr.aria-controls]="baseId + '-panel-' + i"
+                class="inline-flex h-9 items-center gap-1 rounded-md px-3 text-sm font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-expanded:text-fg"
+                (click)="toggle(i)"
+              >
+                {{ item.label }}
+                <span
+                  mfIcon
+                  [size]="14"
+                  class="transition-transform duration-base ease-emphasis"
+                  [class.rotate-180]="open() === i"
+                  >expand_more</span
+                >
+              </button>
+              <div
+                [id]="baseId + '-panel-' + i"
+                [hidden]="open() !== i"
+                class="absolute start-0 top-full z-overlay pt-2"
+              >
+                <div
+                  class="flex gap-2 rounded-xl border border-hairline bg-overlay p-2 shadow-3 animate-overlay-in"
+                  [style.width]="panelWidth(item)"
+                >
+                  <ul
+                    class="m-0 grid flex-1 list-none gap-1 p-0"
+                    [class.grid-cols-2]="item.links.length > 3"
+                  >
+                    @for (link of item.links; track link.href) {
+                      <li>
+                        <a
+                          [href]="link.href"
+                          class="flex items-start gap-3 rounded-lg p-2.5 no-underline transition-colors duration-fast hover:bg-state-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring"
+                          (click)="onLink($event, link)"
+                        >
+                          @if (link.icon) {
+                            <span
+                              mfIcon
+                              [size]="18"
+                              class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary-tint text-primary-tint-fg"
+                              >{{ link.icon }}</span
+                            >
+                          }
+                          <span class="min-w-0">
+                            <span class="block text-sm font-medium text-fg">{{ link.label }}</span>
+                            @if (link.description) {
+                              <span class="mt-0.5 block text-xs text-fg-muted">{{
+                                link.description
+                              }}</span>
+                            }
+                          </span>
+                        </a>
+                      </li>
+                    }
+                  </ul>
+                  @if (item.featured; as f) {
+                    <a
+                      [href]="f.href"
+                      class="relative flex w-56 shrink-0 flex-col justify-end overflow-hidden rounded-lg bg-brand-deep p-4 text-white no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+                      (click)="onLink($event, f)"
+                    >
+                      <span class="pointer-events-none absolute inset-0 bg-grid opacity-40"></span>
+                      <span class="relative font-display font-semibold">{{ f.label }}</span>
+                      @if (f.description) {
+                        <span class="relative mt-1 text-xs text-white/80">{{ f.description }}</span>
+                      }
+                    </a>
+                  }
+                </div>
+              </div>
+            } @else {
+              <a
+                [href]="item.href ?? '#'"
+                class="inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-fg-muted no-underline transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+                (click)="onLink($event, { label: item.label, href: item.href ?? '#' })"
+                >{{ item.label }}</a
+              >
+            }
+          </li>
+        }
+      </ul>
+    </nav>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hoverDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverDelay", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavMenu };
+//# sourceMappingURL=mesgflow-ui-kit-nav-menu.mjs.map

package/fesm2022/mesgflow-ui-kit-nav-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-nav-menu.mjs","sources":["../../../projects/ui-kit/nav-menu/nav-menu.ts","../../../projects/ui-kit/nav-menu/mesgflow-ui-kit-nav-menu.ts"],"sourcesContent":["import {\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport { nextId } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\n\r\nexport interface NavMenuLink {\r\n  label: string;\r\n  href: string;\r\n  description?: string;\r\n  icon?: string;\r\n}\r\n\r\nexport interface NavMenuItem {\r\n  label: string;\r\n  /** Alt panel yoksa doğrudan bağlantı. */\r\n  href?: string;\r\n  links?: NavMenuLink[];\r\n  /** Panelin yan tarafındaki vurgulu kart (yeni özellik, duyuru). */\r\n  featured?: NavMenuLink;\r\n}\r\n\r\n/**\r\n * `<mf-nav-menu [items]=\"nav\" ariaLabel=\"Ana gezinme\" (linkClick)=\"go($event)\" />`\r\n *\r\n * Pazarlama/site başlığı gezinmesi — WAI-ARIA APG \"Disclosure Navigation\r\n * Menu\" (bilerek `role=\"menu\"` DEĞİL: site gezinmesi bağlantılardır, menü\r\n * uygulama komutlarıdır). Üst düğmeler `aria-expanded` + `aria-controls`;\r\n * paneller ızgara bağlantılar + isteğe bağlı vurgulu kart.\r\n *\r\n * - Fare: üzerine gelince kısa gecikmeyle açılır, ayrılınca kapanır.\r\n * - Klavye: Enter/Boşluk aç/kapa, Escape kapatır ve odağı düğmeye döndürür,\r\n *   odak gezinmeden çıkınca panel kapanır.\r\n * - `linkClick`: yönlendirici kullanan uygulamalar için (orta tık/yeni sekme\r\n *   için `href` korunur; `event.preventDefault()` tüketicidedir).\r\n */\r\n@Component({\r\n  selector: 'mf-nav-menu',\r\n  exportAs: 'mfNavMenu',\r\n  imports: [Icon],\r\n  host: {\r\n    class: 'relative block',\r\n    '(focusout)': 'onFocusOut($event)',\r\n    '(keydown.escape)': 'closeAndFocus()',\r\n  },\r\n  template: `\r\n    <nav [attr.aria-label]=\"ariaLabel() || null\">\r\n      <ul class=\"m-0 flex list-none items-center gap-0.5 p-0\">\r\n        @for (item of items(); track item.label; let i = $index) {\r\n          <li (pointerenter)=\"hoverOpen(i)\" (pointerleave)=\"hoverClose()\">\r\n            @if (item.links?.length) {\r\n              <button\r\n                type=\"button\"\r\n                [id]=\"baseId + '-trigger-' + i\"\r\n                [attr.aria-expanded]=\"open() === i\"\r\n                [attr.aria-controls]=\"baseId + '-panel-' + i\"\r\n                class=\"inline-flex h-9 items-center gap-1 rounded-md px-3 text-sm font-medium text-fg-muted transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-expanded:text-fg\"\r\n                (click)=\"toggle(i)\"\r\n              >\r\n                {{ item.label }}\r\n                <span\r\n                  mfIcon\r\n                  [size]=\"14\"\r\n                  class=\"transition-transform duration-base ease-emphasis\"\r\n                  [class.rotate-180]=\"open() === i\"\r\n                  >expand_more</span\r\n                >\r\n              </button>\r\n              <div\r\n                [id]=\"baseId + '-panel-' + i\"\r\n                [hidden]=\"open() !== i\"\r\n                class=\"absolute start-0 top-full z-overlay pt-2\"\r\n              >\r\n                <div\r\n                  class=\"flex gap-2 rounded-xl border border-hairline bg-overlay p-2 shadow-3 animate-overlay-in\"\r\n                  [style.width]=\"panelWidth(item)\"\r\n                >\r\n                  <ul\r\n                    class=\"m-0 grid flex-1 list-none gap-1 p-0\"\r\n                    [class.grid-cols-2]=\"item.links.length > 3\"\r\n                  >\r\n                    @for (link of item.links; track link.href) {\r\n                      <li>\r\n                        <a\r\n                          [href]=\"link.href\"\r\n                          class=\"flex items-start gap-3 rounded-lg p-2.5 no-underline transition-colors duration-fast hover:bg-state-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring\"\r\n                          (click)=\"onLink($event, link)\"\r\n                        >\r\n                          @if (link.icon) {\r\n                            <span\r\n                              mfIcon\r\n                              [size]=\"18\"\r\n                              class=\"mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary-tint text-primary-tint-fg\"\r\n                              >{{ link.icon }}</span\r\n                            >\r\n                          }\r\n                          <span class=\"min-w-0\">\r\n                            <span class=\"block text-sm font-medium text-fg\">{{ link.label }}</span>\r\n                            @if (link.description) {\r\n                              <span class=\"mt-0.5 block text-xs text-fg-muted\">{{\r\n                                link.description\r\n                              }}</span>\r\n                            }\r\n                          </span>\r\n                        </a>\r\n                      </li>\r\n                    }\r\n                  </ul>\r\n                  @if (item.featured; as f) {\r\n                    <a\r\n                      [href]=\"f.href\"\r\n                      class=\"relative flex w-56 shrink-0 flex-col justify-end overflow-hidden rounded-lg bg-brand-deep p-4 text-white no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                      (click)=\"onLink($event, f)\"\r\n                    >\r\n                      <span class=\"pointer-events-none absolute inset-0 bg-grid opacity-40\"></span>\r\n                      <span class=\"relative font-display font-semibold\">{{ f.label }}</span>\r\n                      @if (f.description) {\r\n                        <span class=\"relative mt-1 text-xs text-white/80\">{{ f.description }}</span>\r\n                      }\r\n                    </a>\r\n                  }\r\n                </div>\r\n              </div>\r\n            } @else {\r\n              <a\r\n                [href]=\"item.href ?? '#'\"\r\n                class=\"inline-flex h-9 items-center rounded-md px-3 text-sm font-medium text-fg-muted no-underline transition-colors duration-fast ease-emphasis hover:bg-state-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                (click)=\"onLink($event, { label: item.label, href: item.href ?? '#' })\"\r\n                >{{ item.label }}</a\r\n              >\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </nav>\r\n  `,\r\n})\r\nexport class NavMenu {\r\n  readonly items = input.required<NavMenuItem[]>();\r\n  readonly ariaLabel = input('');\r\n  /** ms — fare ile açılma gecikmesi. */\r\n  readonly hoverDelay = input(120);\r\n  readonly linkClick = output<{ link: NavMenuLink; event: MouseEvent }>();\r\n\r\n  protected readonly baseId = nextId('mf-nav-menu');\r\n  protected readonly open = signal<number | null>(null);\r\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\r\n  private timer?: ReturnType<typeof setTimeout>;\r\n\r\n  protected readonly anyOpen = computed(() => this.open() !== null);\r\n\r\n  constructor() {\r\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\r\n  }\r\n\r\n  protected panelWidth(item: NavMenuItem): string {\r\n    const cols = (item.links?.length ?? 0) > 3 ? 2 : 1;\r\n    return `min(${cols * 18 + (item.featured ? 15 : 0)}rem, calc(100vw - 2rem))`;\r\n  }\r\n\r\n  protected toggle(i: number): void {\r\n    clearTimeout(this.timer);\r\n    this.open.set(this.open() === i ? null : i);\r\n  }\r\n\r\n  protected hoverOpen(i: number): void {\r\n    if (!this.items()[i]?.links?.length) return this.hoverClose();\r\n    clearTimeout(this.timer);\r\n    this.timer = setTimeout(() => this.open.set(i), this.anyOpen() ? 0 : this.hoverDelay());\r\n  }\r\n\r\n  protected hoverClose(): void {\r\n    clearTimeout(this.timer);\r\n    this.timer = setTimeout(() => this.open.set(null), 200);\r\n  }\r\n\r\n  protected onFocusOut(event: FocusEvent): void {\r\n    const next = event.relatedTarget as Node | null;\r\n    if (!next || !this.host.nativeElement.contains(next)) this.open.set(null);\r\n  }\r\n\r\n  protected closeAndFocus(): void {\r\n    const i = this.open();\r\n    if (i === null) return;\r\n    this.open.set(null);\r\n    this.host.nativeElement.querySelector<HTMLElement>(`#${this.baseId}-trigger-${i}`)?.focus();\r\n  }\r\n\r\n  protected onLink(event: MouseEvent, link: NavMenuLink): void {\r\n    this.linkClick.emit({ link, event });\r\n    this.open.set(null);\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-notification-center.mjs

@@ -0,0 +1,281 @@
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { model, output, inject, signal, computed, Component } from '@angular/core';
+import { Avatar } from '@mesgflow/ui-kit/avatar';
+import { Button } from '@mesgflow/ui-kit/button';
+import { MF_NOTIFICATION_CENTER_LABELS } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Popover } from '@mesgflow/ui-kit/popover';
+
+const TONE_BG = {
+    neutral: 'bg-surface-sunken text-fg-muted',
+    primary: 'bg-primary-tint text-primary-tint-fg',
+    success: 'bg-success-tint text-success-tint-fg',
+    warning: 'bg-warning-tint text-warning-tint-fg',
+    danger: 'bg-danger-tint text-danger-tint-fg',
+    info: 'bg-info-tint text-info-tint-fg',
+    help: 'bg-help-tint text-help-tint-fg',
+};
+/**
+ * `<mf-notification-center [(notifications)]="inbox" (itemClick)="open($event)" (viewAll)="go()" />`
+ *
+ * Başlıktaki zil + açılır gelen kutusu: okunmamış sayacı (99+), "tümünü
+ * okundu işaretle", okunmamış/okunmuş sekmesi, boş durum. Bir öğeye tıklamak
+ * onu okundu yapar ve `itemClick` yayar. Tetikleyicinin erişilebilir adı
+ * okunmamış sayısını içerir; liste `role="list"`.
+ */
+class NotificationCenter {
+    notifications = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "notifications" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    viewAll = output();
+    labels = inject(MF_NOTIFICATION_CENTER_LABELS);
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    unread = computed(() => this.notifications().filter((n) => !n.read).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unread" }] : /* istanbul ignore next */ []));
+    triggerLabel = computed(() => this.labels().trigger.replace('{count}', String(this.unread())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    toneBg(n) {
+        return TONE_BG[n.tone ?? 'neutral'];
+    }
+    markAllRead() {
+        this.notifications.update((list) => list.map((n) => ({ ...n, read: true })));
+    }
+    select(n) {
+        this.notifications.update((list) => list.map((x) => (x.id === n.id ? { ...x, read: true } : x)));
+        this.itemClick.emit(n);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NotificationCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NotificationCenter, isStandalone: true, selector: "mf-notification-center", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notifications: "notificationsChange", itemClick: "itemClick", viewAll: "viewAll" }, host: { classAttribute: "inline-flex" }, exportAs: ["mfNotificationCenter"], ngImport: i0, template: `
+    <button
+      mfButton
+      appearance="ghost"
+      tone="neutral"
+      size="icon"
+      shape="square"
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      [attr.aria-label]="triggerLabel()"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="dialog"
+      (click)="open.set(!open())"
+    >
+      <span mfIcon [size]="20" [class.animate-pop]="unread() > 0">notifications</span>
+      @if (unread() > 0) {
+        <span
+          aria-hidden="true"
+          class="absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-danger-fill px-1 text-[0.625rem] font-bold text-danger-fill-fg tabular-nums ring-2 ring-canvas"
+          >{{ unread() > 99 ? '99+' : unread() }}</span
+        >
+      }
+    </button>
+
+    <mf-popover [origin]="origin" [(open)]="open" placement="bottom-end" padding="none">
+      <section
+        role="dialog"
+        [attr.aria-label]="labels().title"
+        class="flex w-[min(24rem,calc(100vw-2rem))] flex-col"
+      >
+        <header class="flex items-center justify-between gap-3 border-b border-hairline px-4 py-3">
+          <h2 class="font-display text-title-sm text-fg">{{ labels().title }}</h2>
+          <button
+            mfButton
+            size="xs"
+            appearance="link"
+            [disabled]="!unread()"
+            (click)="markAllRead()"
+          >
+            {{ labels().markAllRead }}
+          </button>
+        </header>
+
+        @if (notifications().length) {
+          <ul role="list" class="m-0 max-h-96 list-none overflow-y-auto p-1.5">
+            @for (n of notifications(); track n.id) {
+              <li>
+                <button
+                  type="button"
+                  class="relative flex w-full items-start gap-3 rounded-lg p-2.5 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring"
+                  (click)="select(n)"
+                >
+                  @if (n.actor) {
+                    <mf-avatar [name]="n.actor" size="sm" [colorful]="true" />
+                  } @else {
+                    <span
+                      mfIcon
+                      [size]="16"
+                      class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
+                      [class]="toneBg(n)"
+                      >{{ n.icon ?? 'notifications' }}</span
+                    >
+                  }
+                  <span class="min-w-0 flex-1">
+                    <span class="block text-sm text-fg" [class.font-semibold]="!n.read">{{
+                      n.title
+                    }}</span>
+                    @if (n.body) {
+                      <span class="mt-0.5 line-clamp-2 block text-sm text-fg-muted">{{
+                        n.body
+                      }}</span>
+                    }
+                    <span class="mt-1 block text-xs text-fg-subtle">{{ n.time }}</span>
+                  </span>
+                  @if (!n.read) {
+                    <span
+                      class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-accent"
+                      aria-hidden="true"
+                    ></span>
+                    <span class="sr-only">{{ labels().unread }}</span>
+                  }
+                </button>
+              </li>
+            }
+          </ul>
+        } @else {
+          <div class="flex flex-col items-center gap-2 px-6 py-10 text-center">
+            <span mfIcon [size]="28" class="text-fg-subtle">notifications_off</span>
+            <p class="font-medium text-fg">{{ labels().empty }}</p>
+            <p class="text-sm text-fg-muted">{{ labels().emptyDescription }}</p>
+          </div>
+        }
+
+        <footer class="border-t border-hairline p-1.5">
+          <button
+            mfButton
+            appearance="ghost"
+            tone="neutral"
+            class="w-full"
+            (click)="viewAll.emit(); open.set(false)"
+          >
+            {{ labels().viewAll }}
+          </button>
+        </footer>
+      </section>
+    </mf-popover>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: Popover, selector: "mf-popover", inputs: ["origin", "open", "placement", "padding", "hasBackdrop", "matchTriggerWidth", "panelClass"], outputs: ["openChange", "closed"], exportAs: ["mfPopover"] }, { kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Avatar, selector: "mf-avatar", inputs: ["name", "src", "size", "shape", "colorful", "tone"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NotificationCenter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-notification-center',
+                    exportAs: 'mfNotificationCenter',
+                    imports: [OverlayModule, Popover, Button, Icon, Avatar],
+                    host: { class: 'inline-flex' },
+                    template: `
+    <button
+      mfButton
+      appearance="ghost"
+      tone="neutral"
+      size="icon"
+      shape="square"
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      [attr.aria-label]="triggerLabel()"
+      [attr.aria-expanded]="open()"
+      aria-haspopup="dialog"
+      (click)="open.set(!open())"
+    >
+      <span mfIcon [size]="20" [class.animate-pop]="unread() > 0">notifications</span>
+      @if (unread() > 0) {
+        <span
+          aria-hidden="true"
+          class="absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-danger-fill px-1 text-[0.625rem] font-bold text-danger-fill-fg tabular-nums ring-2 ring-canvas"
+          >{{ unread() > 99 ? '99+' : unread() }}</span
+        >
+      }
+    </button>
+
+    <mf-popover [origin]="origin" [(open)]="open" placement="bottom-end" padding="none">
+      <section
+        role="dialog"
+        [attr.aria-label]="labels().title"
+        class="flex w-[min(24rem,calc(100vw-2rem))] flex-col"
+      >
+        <header class="flex items-center justify-between gap-3 border-b border-hairline px-4 py-3">
+          <h2 class="font-display text-title-sm text-fg">{{ labels().title }}</h2>
+          <button
+            mfButton
+            size="xs"
+            appearance="link"
+            [disabled]="!unread()"
+            (click)="markAllRead()"
+          >
+            {{ labels().markAllRead }}
+          </button>
+        </header>
+
+        @if (notifications().length) {
+          <ul role="list" class="m-0 max-h-96 list-none overflow-y-auto p-1.5">
+            @for (n of notifications(); track n.id) {
+              <li>
+                <button
+                  type="button"
+                  class="relative flex w-full items-start gap-3 rounded-lg p-2.5 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring"
+                  (click)="select(n)"
+                >
+                  @if (n.actor) {
+                    <mf-avatar [name]="n.actor" size="sm" [colorful]="true" />
+                  } @else {
+                    <span
+                      mfIcon
+                      [size]="16"
+                      class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
+                      [class]="toneBg(n)"
+                      >{{ n.icon ?? 'notifications' }}</span
+                    >
+                  }
+                  <span class="min-w-0 flex-1">
+                    <span class="block text-sm text-fg" [class.font-semibold]="!n.read">{{
+                      n.title
+                    }}</span>
+                    @if (n.body) {
+                      <span class="mt-0.5 line-clamp-2 block text-sm text-fg-muted">{{
+                        n.body
+                      }}</span>
+                    }
+                    <span class="mt-1 block text-xs text-fg-subtle">{{ n.time }}</span>
+                  </span>
+                  @if (!n.read) {
+                    <span
+                      class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-accent"
+                      aria-hidden="true"
+                    ></span>
+                    <span class="sr-only">{{ labels().unread }}</span>
+                  }
+                </button>
+              </li>
+            }
+          </ul>
+        } @else {
+          <div class="flex flex-col items-center gap-2 px-6 py-10 text-center">
+            <span mfIcon [size]="28" class="text-fg-subtle">notifications_off</span>
+            <p class="font-medium text-fg">{{ labels().empty }}</p>
+            <p class="text-sm text-fg-muted">{{ labels().emptyDescription }}</p>
+          </div>
+        }
+
+        <footer class="border-t border-hairline p-1.5">
+          <button
+            mfButton
+            appearance="ghost"
+            tone="neutral"
+            class="w-full"
+            (click)="viewAll.emit(); open.set(false)"
+          >
+            {{ labels().viewAll }}
+          </button>
+        </footer>
+      </section>
+    </mf-popover>
+  `,
+                }]
+        }], propDecorators: { notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: false }] }, { type: i0.Output, args: ["notificationsChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], viewAll: [{ type: i0.Output, args: ["viewAll"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NotificationCenter };
+//# sourceMappingURL=mesgflow-ui-kit-notification-center.mjs.map

package/fesm2022/mesgflow-ui-kit-notification-center.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-notification-center.mjs","sources":["../../../projects/ui-kit/notification-center/notification-center.ts","../../../projects/ui-kit/notification-center/mesgflow-ui-kit-notification-center.ts"],"sourcesContent":["import { OverlayModule } from '@angular/cdk/overlay';\r\nimport { Component, computed, inject, model, output, signal } from '@angular/core';\r\nimport { Avatar } from '@mesgflow/ui-kit/avatar';\r\nimport { Button } from '@mesgflow/ui-kit/button';\r\nimport { MF_NOTIFICATION_CENTER_LABELS, type MfTone } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Popover } from '@mesgflow/ui-kit/popover';\r\n\r\nexport interface NotificationItem {\r\n  id: string;\r\n  title: string;\r\n  body?: string;\r\n  /** Görünen zaman metni (\"2 dk önce\") — biçimleme tüketicide. */\r\n  time: string;\r\n  read?: boolean;\r\n  /** Avatar için ad; yoksa `icon` gösterilir. */\r\n  actor?: string;\r\n  icon?: string;\r\n  tone?: MfTone;\r\n}\r\n\r\nconst TONE_BG: Record<MfTone, string> = {\r\n  neutral: 'bg-surface-sunken text-fg-muted',\r\n  primary: 'bg-primary-tint text-primary-tint-fg',\r\n  success: 'bg-success-tint text-success-tint-fg',\r\n  warning: 'bg-warning-tint text-warning-tint-fg',\r\n  danger: 'bg-danger-tint text-danger-tint-fg',\r\n  info: 'bg-info-tint text-info-tint-fg',\r\n  help: 'bg-help-tint text-help-tint-fg',\r\n};\r\n\r\n/**\r\n * `<mf-notification-center [(notifications)]=\"inbox\" (itemClick)=\"open($event)\" (viewAll)=\"go()\" />`\r\n *\r\n * Başlıktaki zil + açılır gelen kutusu: okunmamış sayacı (99+), \"tümünü\r\n * okundu işaretle\", okunmamış/okunmuş sekmesi, boş durum. Bir öğeye tıklamak\r\n * onu okundu yapar ve `itemClick` yayar. Tetikleyicinin erişilebilir adı\r\n * okunmamış sayısını içerir; liste `role=\"list\"`.\r\n */\r\n@Component({\r\n  selector: 'mf-notification-center',\r\n  exportAs: 'mfNotificationCenter',\r\n  imports: [OverlayModule, Popover, Button, Icon, Avatar],\r\n  host: { class: 'inline-flex' },\r\n  template: `\r\n    <button\r\n      mfButton\r\n      appearance=\"ghost\"\r\n      tone=\"neutral\"\r\n      size=\"icon\"\r\n      shape=\"square\"\r\n      cdkOverlayOrigin\r\n      #origin=\"cdkOverlayOrigin\"\r\n      [attr.aria-label]=\"triggerLabel()\"\r\n      [attr.aria-expanded]=\"open()\"\r\n      aria-haspopup=\"dialog\"\r\n      (click)=\"open.set(!open())\"\r\n    >\r\n      <span mfIcon [size]=\"20\" [class.animate-pop]=\"unread() > 0\">notifications</span>\r\n      @if (unread() > 0) {\r\n        <span\r\n          aria-hidden=\"true\"\r\n          class=\"absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-danger-fill px-1 text-[0.625rem] font-bold text-danger-fill-fg tabular-nums ring-2 ring-canvas\"\r\n          >{{ unread() > 99 ? '99+' : unread() }}</span\r\n        >\r\n      }\r\n    </button>\r\n\r\n    <mf-popover [origin]=\"origin\" [(open)]=\"open\" placement=\"bottom-end\" padding=\"none\">\r\n      <section\r\n        role=\"dialog\"\r\n        [attr.aria-label]=\"labels().title\"\r\n        class=\"flex w-[min(24rem,calc(100vw-2rem))] flex-col\"\r\n      >\r\n        <header class=\"flex items-center justify-between gap-3 border-b border-hairline px-4 py-3\">\r\n          <h2 class=\"font-display text-title-sm text-fg\">{{ labels().title }}</h2>\r\n          <button\r\n            mfButton\r\n            size=\"xs\"\r\n            appearance=\"link\"\r\n            [disabled]=\"!unread()\"\r\n            (click)=\"markAllRead()\"\r\n          >\r\n            {{ labels().markAllRead }}\r\n          </button>\r\n        </header>\r\n\r\n        @if (notifications().length) {\r\n          <ul role=\"list\" class=\"m-0 max-h-96 list-none overflow-y-auto p-1.5\">\r\n            @for (n of notifications(); track n.id) {\r\n              <li>\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"relative flex w-full items-start gap-3 rounded-lg p-2.5 text-start transition-colors duration-fast ease-emphasis hover:bg-state-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring\"\r\n                  (click)=\"select(n)\"\r\n                >\r\n                  @if (n.actor) {\r\n                    <mf-avatar [name]=\"n.actor\" size=\"sm\" [colorful]=\"true\" />\r\n                  } @else {\r\n                    <span\r\n                      mfIcon\r\n                      [size]=\"16\"\r\n                      class=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full\"\r\n                      [class]=\"toneBg(n)\"\r\n                      >{{ n.icon ?? 'notifications' }}</span\r\n                    >\r\n                  }\r\n                  <span class=\"min-w-0 flex-1\">\r\n                    <span class=\"block text-sm text-fg\" [class.font-semibold]=\"!n.read\">{{\r\n                      n.title\r\n                    }}</span>\r\n                    @if (n.body) {\r\n                      <span class=\"mt-0.5 line-clamp-2 block text-sm text-fg-muted\">{{\r\n                        n.body\r\n                      }}</span>\r\n                    }\r\n                    <span class=\"mt-1 block text-xs text-fg-subtle\">{{ n.time }}</span>\r\n                  </span>\r\n                  @if (!n.read) {\r\n                    <span\r\n                      class=\"mt-1.5 h-2 w-2 shrink-0 rounded-full bg-accent\"\r\n                      aria-hidden=\"true\"\r\n                    ></span>\r\n                    <span class=\"sr-only\">{{ labels().unread }}</span>\r\n                  }\r\n                </button>\r\n              </li>\r\n            }\r\n          </ul>\r\n        } @else {\r\n          <div class=\"flex flex-col items-center gap-2 px-6 py-10 text-center\">\r\n            <span mfIcon [size]=\"28\" class=\"text-fg-subtle\">notifications_off</span>\r\n            <p class=\"font-medium text-fg\">{{ labels().empty }}</p>\r\n            <p class=\"text-sm text-fg-muted\">{{ labels().emptyDescription }}</p>\r\n          </div>\r\n        }\r\n\r\n        <footer class=\"border-t border-hairline p-1.5\">\r\n          <button\r\n            mfButton\r\n            appearance=\"ghost\"\r\n            tone=\"neutral\"\r\n            class=\"w-full\"\r\n            (click)=\"viewAll.emit(); open.set(false)\"\r\n          >\r\n            {{ labels().viewAll }}\r\n          </button>\r\n        </footer>\r\n      </section>\r\n    </mf-popover>\r\n  `,\r\n})\r\nexport class NotificationCenter {\r\n  readonly notifications = model<NotificationItem[]>([]);\r\n  readonly itemClick = output<NotificationItem>();\r\n  readonly viewAll = output<void>();\r\n\r\n  protected readonly labels = inject(MF_NOTIFICATION_CENTER_LABELS);\r\n  protected readonly open = signal(false);\r\n  protected readonly unread = computed(() => this.notifications().filter((n) => !n.read).length);\r\n  protected readonly triggerLabel = computed(() =>\r\n    this.labels().trigger.replace('{count}', String(this.unread())),\r\n  );\r\n\r\n  protected toneBg(n: NotificationItem): string {\r\n    return TONE_BG[n.tone ?? 'neutral'];\r\n  }\r\n\r\n  markAllRead(): void {\r\n    this.notifications.update((list) => list.map((n) => ({ ...n, read: true })));\r\n  }\r\n\r\n  protected select(n: NotificationItem): void {\r\n    this.notifications.update((list) =>\r\n      list.map((x) => (x.id === n.id ? { ...x, read: true } : x)),\r\n    );\r\n    this.itemClick.emit(n);\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}