@mesgflow/ui-kit 0.6.0 → 0.7.0

package/README.md

@@ -14,10 +14,24 @@ Tailwind v4 design token system.
 
 ## Install
 
+The quickest way is the schematic — it installs the peer dependencies,
+sets up Tailwind v4 + the kit preset in your global stylesheet, adds
+`provideMesgflowUi()` to `app.config.ts` and the flash-free dark mode
+script to `index.html` (every step is idempotent):
+
+```bash
+ng add @mesgflow/ui-kit
+```
+
+Or install manually and follow the sections below:
+
 ```bash
 npm install @mesgflow/ui-kit
 ```
 
+Later upgrades run the kit's migrations automatically:
+`ng update @mesgflow/ui-kit`.
+
 Every primitive also has its own secondary entry point (same pattern as
 `@angular/cdk`), so either of these works:
 
@@ -85,11 +99,14 @@ font imports the design still works, it just falls back to the browser's
 
 ### Dark mode
 
-Toggling a `.dark` class on the root element (`<html>` or similar) is your
-app's responsibility — every token reacts to it, but the kit ships no theme
-state (localStorage, `prefers-color-scheme` detection, a toggle component,
-etc.). See the docs site's own shell (`shell/theme.service.ts` in this
-repo) for a reference implementation.
+Every token reacts to a `.dark` class on the root element. The kit ships
+the state for it in `@mesgflow/ui-kit/theming`: `MfColorModeService`
+(`light` / `dark` / `system`, persisted in `localStorage`, follows the OS
+preference live, switches with a View Transition) and `colorModeInitScript()`
+— inline its output in `index.html`'s `<head>` so dark mode is applied
+before Angular boots (no white flash; `ng add` does this for you).
+`provideMfColorMode({ storageKey, defaultMode })` changes the defaults, and
+`<mf-theme-switcher>` is a ready-made toggle.
 
 ## Internationalization
 
@@ -141,6 +158,40 @@ visitor prefers reduced transparency). See the docs site's Foundations
 pages (Colors/Typography/Radius/Elevation/Motion) for a live, inspectable
 reference.
 
+### Design tokens as JSON (DTCG)
+
+`@mesgflow/ui-kit/tokens.json` exports the same tokens in the W3C Design
+Tokens format — a `primitives` set (ramps, radius, control heights, fonts,
+type scale, durations/easings) plus `light` and `dark` role sets that alias
+the primitives. It is Tokens Studio compatible (multi-set + `$themes`) and
+works as a Style Dictionary source. It is generated from the CSS, so the CSS
+stays the single source of truth.
+
+## Icons
+
+`<span mfIcon>search</span>` uses the Material Symbols font by default. For
+crisp stroke icons with no font download, add the optional Lucide set — it
+maps the Material names the kit uses (and ~170 common ones) to Lucide SVGs;
+unmapped names fall back to the font:
+
+```ts
+import { provideMfLucideIcons } from '@mesgflow/ui-kit/icons-lucide';
+
+providers: [provideMfLucideIcons({ strokeWidth: 1.75 })];
+```
+
+## Blocks
+
+`@mesgflow/ui-kit/blocks` contains ready-made compositions built from the
+primitives, with all texts in `MfLabels`:
+
+- `<mf-auth-card>` — sign-in card with validation, social provider slot
+  (`[mfAuthProviders]`), remember me and error state; emits `signIn`.
+- `<mf-invite-members [roles]>` — multi-email tag input + role select; emits
+  `invite` with only valid addresses.
+- `<mf-settings-section heading>` — the two-column settings layout with an
+  `[mfSettingsActions]` footer strip.
+
 ## Theming
 
 `@mesgflow/ui-kit/theming` (opt-in, not re-exported from the primary barrel —

package/fesm2022/mesgflow-ui-kit-accordion.mjs

@@ -2,7 +2,7 @@ import * as i1 from '@angular/aria/accordion';
 import { AccordionGroup, AccordionTrigger, AccordionPanel, AccordionContent } from '@angular/aria/accordion';
 import * as i0 from '@angular/core';
 import { Component, input, computed } from '@angular/core';
-import { cn } from '@mesgflow/ui-kit/core';
+import { focusRecipe, cn } from '@mesgflow/ui-kit/core';
 import { Icon } from '@mesgflow/ui-kit/icon';
 import { cva } from 'class-variance-authority';
 
@@ -30,7 +30,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 const accordionTriggerVariants = cva('flex w-full items-center justify-between gap-2 px-3 py-2.5 text-start text-sm font-medium text-fg transition-colors duration-fast ease-emphasis ' +
-    'hover:bg-surface-alt focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring', {
+    'hover:bg-state-hover ' +
+    focusRecipe, {
     variants: {
         disabled: {
             true: 'pointer-events-none opacity-50',

package/fesm2022/mesgflow-ui-kit-accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-accordion.mjs","sources":["../../../projects/ui-kit/accordion/accordion.ts","../../../projects/ui-kit/accordion/accordion.variants.ts","../../../projects/ui-kit/accordion/accordion-item.ts","../../../projects/ui-kit/accordion/accordion-item.html","../../../projects/ui-kit/accordion/mesgflow-ui-kit-accordion.ts"],"sourcesContent":["import { AccordionGroup as AriaAccordionGroup } from '@angular/aria/accordion';\r\nimport { Component } from '@angular/core';\r\n\r\n/**\r\n * `<mf-accordion multiExpandable><mf-accordion-item summary=\"...\">...</mf-accordion-item></mf-accordion>`\r\n *\r\n * Salt bir kapsayıcı — ARIA/klavye/genişletme-modu mantığı `@angular/aria/accordion`'ın\r\n * `AccordionGroup` pattern'inden `hostDirectives` ile ödünç alınıyor (bkz.\r\n * `tabs.ts`'teki AYNI desen). `multiExpandable`/`disabled` girdileri\r\n * `hostDirectives`'in `inputs` listesiyle dışarı açıldı.\r\n */\r\n@Component({\r\n  selector: 'mf-accordion',\r\n  exportAs: 'mfAccordion',\r\n  hostDirectives: [{ directive: AriaAccordionGroup, inputs: ['multiExpandable', 'disabled'] }],\r\n  host: { class: 'block divide-y divide-border overflow-hidden rounded-lg border border-border' },\r\n  template: '<ng-content />',\r\n})\r\nexport class Accordion {}\r\n","import { cva } from 'class-variance-authority';\r\n\r\nexport const accordionTriggerVariants = cva(\r\n  'flex w-full items-center justify-between gap-2 px-3 py-2.5 text-start text-sm font-medium text-fg transition-colors duration-fast ease-emphasis ' +\r\n    'hover:bg-surface-alt focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring',\r\n  {\r\n    variants: {\r\n      disabled: {\r\n        true: 'pointer-events-none opacity-50',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { disabled: false },\r\n  },\r\n);\r\n","import {\r\n  AccordionContent,\r\n  AccordionPanel as AriaAccordionPanel,\r\n  AccordionTrigger as AriaAccordionTrigger,\r\n} from '@angular/aria/accordion';\r\nimport { Component, computed, input } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { accordionTriggerVariants } from './accordion.variants';\r\n\r\n/**\r\n * `<mf-accordion-item summary=\"Genel\">İçerik…</mf-accordion-item>` —\r\n * `mf-accordion` içine konur. `ngAccordionTrigger`/`ngAccordionPanel`/\r\n * `ngAccordionContent` (`@angular/aria/accordion`) doğrudan bu component'in\r\n * KENDİ template'inde kullanılıyor (`hostDirectives` DEĞİL — `Tab`'ın aksine\r\n * trigger butonu ve panel div'i İKİ AYRI DOM elemanı, tek host'a sığmıyor;\r\n * bkz. `Select`'in `cdkOverlayOrigin`/`cdkConnectedOverlay`'i kendi\r\n * template'inde birleştirme deseniyle AYNI gerekçe).\r\n *\r\n * İçerik `ngAccordionContent` sayesinde LAZY — panel ilk açılana kadar hiç\r\n * oluşturulmaz.\r\n */\r\n@Component({\r\n  selector: 'mf-accordion-item',\r\n  imports: [AriaAccordionTrigger, AriaAccordionPanel, AccordionContent, Icon],\r\n  host: { class: 'block' },\r\n  templateUrl: './accordion-item.html',\r\n})\r\nexport class AccordionItem {\r\n  readonly summary = input.required<string>();\r\n  readonly disabled = input(false);\r\n\r\n  protected readonly triggerClasses = computed(() =>\r\n    cn(accordionTriggerVariants({ disabled: this.disabled() })),\r\n  );\r\n}\r\n","<h3 class=\"contents\">\r\n  <button\r\n    type=\"button\"\r\n    ngAccordionTrigger\r\n    #trigger=\"ngAccordionTrigger\"\r\n    [panel]=\"panel\"\r\n    [disabled]=\"disabled()\"\r\n    [class]=\"triggerClasses()\"\r\n  >\r\n    <span class=\"truncate\">{{ summary() }}</span>\r\n    <span\r\n      mfIcon\r\n      [size]=\"18\"\r\n      class=\"shrink-0 text-fg-subtle transition-transform duration-fast\"\r\n      [class.rotate-180]=\"trigger.expanded()\"\r\n      >expand_more</span\r\n    >\r\n  </button>\r\n</h3>\r\n<!--\r\n  `preserveContent` — içerik ilk açılıştan SONRA DOM'da kalıcı olur (bkz.\r\n  `@angular/aria`'nın `DeferredContentAware`/`DeferredContent` çifti, panel\r\n  varsayılanı: her kapanışta view `destroy()` edilir). Grid-rows geçişinin\r\n  (aşağıda) animasyonu bir şeyi KISALTMASI için içeriğin hâlâ orada olması\r\n  gerekiyor — hiç açılmamış bir panel yine de hiç render EDİLMEZ (lazy\r\n  davranış korunuyor), sadece \"en az bir kez açılmış\" panel artık kapanışta\r\n  yok edilmiyor.\r\n-->\r\n<div\r\n  ngAccordionPanel\r\n  #panel=\"ngAccordionPanel\"\r\n  [preserveContent]=\"true\"\r\n  class=\"grid transition-[grid-template-rows] duration-base ease-emphasis\"\r\n  [style.grid-template-rows]=\"trigger.expanded() ? '1fr' : '0fr'\"\r\n>\r\n  <div class=\"min-h-0 overflow-hidden\">\r\n    <ng-template ngAccordionContent>\r\n      <div class=\"px-3 pb-3 text-sm text-fg-subtle\">\r\n        <ng-content />\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaAccordionGroup","AriaAccordionTrigger","AriaAccordionPanel"],"mappings":"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"}
+{"version":3,"file":"mesgflow-ui-kit-accordion.mjs","sources":["../../../projects/ui-kit/accordion/accordion.ts","../../../projects/ui-kit/accordion/accordion.variants.ts","../../../projects/ui-kit/accordion/accordion-item.ts","../../../projects/ui-kit/accordion/accordion-item.html","../../../projects/ui-kit/accordion/mesgflow-ui-kit-accordion.ts"],"sourcesContent":["import { AccordionGroup as AriaAccordionGroup } from '@angular/aria/accordion';\r\nimport { Component } from '@angular/core';\r\n\r\n/**\r\n * `<mf-accordion multiExpandable><mf-accordion-item summary=\"...\">...</mf-accordion-item></mf-accordion>`\r\n *\r\n * Salt bir kapsayıcı — ARIA/klavye/genişletme-modu mantığı `@angular/aria/accordion`'ın\r\n * `AccordionGroup` pattern'inden `hostDirectives` ile ödünç alınıyor (bkz.\r\n * `tabs.ts`'teki AYNI desen). `multiExpandable`/`disabled` girdileri\r\n * `hostDirectives`'in `inputs` listesiyle dışarı açıldı.\r\n */\r\n@Component({\r\n  selector: 'mf-accordion',\r\n  exportAs: 'mfAccordion',\r\n  hostDirectives: [{ directive: AriaAccordionGroup, inputs: ['multiExpandable', 'disabled'] }],\r\n  host: { class: 'block divide-y divide-border overflow-hidden rounded-lg border border-border' },\r\n  template: '<ng-content />',\r\n})\r\nexport class Accordion {}\r\n","import { focusRecipe } from '@mesgflow/ui-kit/core';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nexport const accordionTriggerVariants = cva(\r\n  'flex w-full items-center justify-between gap-2 px-3 py-2.5 text-start text-sm font-medium text-fg transition-colors duration-fast ease-emphasis ' +\r\n    'hover:bg-state-hover ' +\r\n    focusRecipe,\r\n  {\r\n    variants: {\r\n      disabled: {\r\n        true: 'pointer-events-none opacity-50',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { disabled: false },\r\n  },\r\n);\r\n","import {\r\n  AccordionContent,\r\n  AccordionPanel as AriaAccordionPanel,\r\n  AccordionTrigger as AriaAccordionTrigger,\r\n} from '@angular/aria/accordion';\r\nimport { Component, computed, input } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { accordionTriggerVariants } from './accordion.variants';\r\n\r\n/**\r\n * `<mf-accordion-item summary=\"Genel\">İçerik…</mf-accordion-item>` —\r\n * `mf-accordion` içine konur. `ngAccordionTrigger`/`ngAccordionPanel`/\r\n * `ngAccordionContent` (`@angular/aria/accordion`) doğrudan bu component'in\r\n * KENDİ template'inde kullanılıyor (`hostDirectives` DEĞİL — `Tab`'ın aksine\r\n * trigger butonu ve panel div'i İKİ AYRI DOM elemanı, tek host'a sığmıyor;\r\n * bkz. `Select`'in `cdkOverlayOrigin`/`cdkConnectedOverlay`'i kendi\r\n * template'inde birleştirme deseniyle AYNI gerekçe).\r\n *\r\n * İçerik `ngAccordionContent` sayesinde LAZY — panel ilk açılana kadar hiç\r\n * oluşturulmaz.\r\n */\r\n@Component({\r\n  selector: 'mf-accordion-item',\r\n  imports: [AriaAccordionTrigger, AriaAccordionPanel, AccordionContent, Icon],\r\n  host: { class: 'block' },\r\n  templateUrl: './accordion-item.html',\r\n})\r\nexport class AccordionItem {\r\n  readonly summary = input.required<string>();\r\n  readonly disabled = input(false);\r\n\r\n  protected readonly triggerClasses = computed(() =>\r\n    cn(accordionTriggerVariants({ disabled: this.disabled() })),\r\n  );\r\n}\r\n","<h3 class=\"contents\">\r\n  <button\r\n    type=\"button\"\r\n    ngAccordionTrigger\r\n    #trigger=\"ngAccordionTrigger\"\r\n    [panel]=\"panel\"\r\n    [disabled]=\"disabled()\"\r\n    [class]=\"triggerClasses()\"\r\n  >\r\n    <span class=\"truncate\">{{ summary() }}</span>\r\n    <span\r\n      mfIcon\r\n      [size]=\"18\"\r\n      class=\"shrink-0 text-fg-subtle transition-transform duration-fast\"\r\n      [class.rotate-180]=\"trigger.expanded()\"\r\n      >expand_more</span\r\n    >\r\n  </button>\r\n</h3>\r\n<!--\r\n  `preserveContent` — içerik ilk açılıştan SONRA DOM'da kalıcı olur (bkz.\r\n  `@angular/aria`'nın `DeferredContentAware`/`DeferredContent` çifti, panel\r\n  varsayılanı: her kapanışta view `destroy()` edilir). Grid-rows geçişinin\r\n  (aşağıda) animasyonu bir şeyi KISALTMASI için içeriğin hâlâ orada olması\r\n  gerekiyor — hiç açılmamış bir panel yine de hiç render EDİLMEZ (lazy\r\n  davranış korunuyor), sadece \"en az bir kez açılmış\" panel artık kapanışta\r\n  yok edilmiyor.\r\n-->\r\n<div\r\n  ngAccordionPanel\r\n  #panel=\"ngAccordionPanel\"\r\n  [preserveContent]=\"true\"\r\n  class=\"grid transition-[grid-template-rows] duration-base ease-emphasis\"\r\n  [style.grid-template-rows]=\"trigger.expanded() ? '1fr' : '0fr'\"\r\n>\r\n  <div class=\"min-h-0 overflow-hidden\">\r\n    <ng-template ngAccordionContent>\r\n      <div class=\"px-3 pb-3 text-sm text-fg-subtle\">\r\n        <ng-content />\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaAccordionGroup","AriaAccordionTrigger","AriaAccordionPanel"],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-agenda.mjs

@@ -0,0 +1,208 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, computed, Component } from '@angular/core';
+import { MF_AGENDA_LABELS, MF_DATE_LOCALE } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { startOfDay, addDays, isSameDay, format } from 'date-fns';
+
+const BAR = {
+    neutral: 'bg-fg-subtle',
+    primary: 'bg-accent',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    danger: 'bg-danger',
+    info: 'bg-info',
+    help: 'bg-help',
+};
+/**
+ * `<mf-agenda [events]="events" [days]="7" (eventClick)="open($event)" />`
+ *
+ * Günlere gruplanmış etkinlik listesi (takvim "ajanda" görünümü) — yaklaşan
+ * yayınlar, toplantılar, kampanya takvimi. Gün başlıkları "Bugün/Yarın" ya da
+ * yerel ayarlı tarih (`MF_DATE_LOCALE`); saatler yerel biçimde; boş günler
+ * `showEmptyDays` ile gösterilir. Her gün bir `<section>` + başlık, etkinlikler
+ * odaklanabilir düğmeler.
+ */
+class Agenda {
+    events = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /** Başlangıç günü — varsayılan bugün. */
+    from = input(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
+    /** Kaç gün gösterilsin. */
+    days = input(7, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
+    /** Etkinliksiz günleri de göster. */
+    showEmptyDays = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEmptyDays" }] : /* istanbul ignore next */ []));
+    eventClick = output();
+    labels = inject(MF_AGENDA_LABELS);
+    locale = inject(MF_DATE_LOCALE);
+    groups = computed(() => {
+        const start = startOfDay(this.from());
+        const today = startOfDay(new Date());
+        const l = this.labels();
+        const locale = this.locale();
+        const out = [];
+        for (let i = 0; i < this.days(); i++) {
+            const date = addDays(start, i);
+            const events = this.events()
+                .filter((e) => isSameDay(e.start, date))
+                .sort((a, b) => Number(!a.allDay) - Number(!b.allDay) || a.start.getTime() - b.start.getTime());
+            if (!events.length && !this.showEmptyDays())
+                continue;
+            const rel = isSameDay(date, today)
+                ? l.today
+                : isSameDay(date, addDays(today, 1))
+                    ? l.tomorrow
+                    : null;
+            out.push({
+                key: `mf-agenda-${format(date, 'yyyy-MM-dd')}`,
+                date,
+                label: rel ?? format(date, 'EEEE', { locale }),
+                sublabel: format(date, 'd MMMM', { locale }),
+                events,
+            });
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    bar(event) {
+        return BAR[event.tone ?? 'primary'];
+    }
+    timeText(event) {
+        if (event.allDay)
+            return this.labels().allDay;
+        const locale = this.locale();
+        const start = format(event.start, 'p', { locale });
+        return event.end ? `${start} – ${format(event.end, 'p', { locale })}` : start;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Agenda, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Agenda, isStandalone: true, selector: "mf-agenda", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: true, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null }, days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: false, transformFunction: null }, showEmptyDays: { classPropertyName: "showEmptyDays", publicName: "showEmptyDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClick: "eventClick" }, host: { classAttribute: "block" }, exportAs: ["mfAgenda"], ngImport: i0, template: `
+    @if (groups().length) {
+      <div class="flex flex-col gap-5">
+        @for (day of groups(); track day.key) {
+          <section [attr.aria-labelledby]="day.key">
+            <h3 [id]="day.key" class="mb-2 flex items-baseline gap-2">
+              <span class="font-display text-title-sm text-fg">{{ day.label }}</span>
+              <span class="text-sm text-fg-subtle">{{ day.sublabel }}</span>
+            </h3>
+            @if (day.events.length) {
+              <ul class="m-0 flex list-none flex-col gap-1.5 p-0">
+                @for (event of day.events; track event.id) {
+                  <li>
+                    <button
+                      type="button"
+                      class="flex w-full items-stretch gap-3 rounded-lg border border-hairline bg-surface p-3 text-start transition-colors duration-fast ease-emphasis hover:border-border hover:bg-state-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+                      (click)="eventClick.emit(event)"
+                    >
+                      <span
+                        class="w-1 shrink-0 rounded-full"
+                        [class]="bar(event)"
+                        aria-hidden="true"
+                      ></span>
+                      <span class="w-24 shrink-0 text-sm text-fg-muted tabular-nums">{{
+                        timeText(event)
+                      }}</span>
+                      <span class="min-w-0 flex-1">
+                        <span class="block truncate text-sm font-medium text-fg">{{
+                          event.title
+                        }}</span>
+                        @if (event.location) {
+                          <span
+                            class="mt-0.5 flex items-center gap-1 truncate text-xs text-fg-subtle"
+                          >
+                            <span mfIcon [size]="12">pin</span>{{ event.location }}
+                          </span>
+                        }
+                      </span>
+                    </button>
+                  </li>
+                }
+              </ul>
+            } @else {
+              <p
+                class="rounded-lg border border-dashed border-border px-3 py-2.5 text-sm text-fg-subtle"
+              >
+                {{ labels().empty }}
+              </p>
+            }
+          </section>
+        }
+      </div>
+    } @else {
+      <p class="py-8 text-center text-sm text-fg-subtle">{{ labels().empty }}</p>
+    }
+  `, 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: Agenda, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-agenda',
+                    exportAs: 'mfAgenda',
+                    imports: [Icon],
+                    host: { class: 'block' },
+                    template: `
+    @if (groups().length) {
+      <div class="flex flex-col gap-5">
+        @for (day of groups(); track day.key) {
+          <section [attr.aria-labelledby]="day.key">
+            <h3 [id]="day.key" class="mb-2 flex items-baseline gap-2">
+              <span class="font-display text-title-sm text-fg">{{ day.label }}</span>
+              <span class="text-sm text-fg-subtle">{{ day.sublabel }}</span>
+            </h3>
+            @if (day.events.length) {
+              <ul class="m-0 flex list-none flex-col gap-1.5 p-0">
+                @for (event of day.events; track event.id) {
+                  <li>
+                    <button
+                      type="button"
+                      class="flex w-full items-stretch gap-3 rounded-lg border border-hairline bg-surface p-3 text-start transition-colors duration-fast ease-emphasis hover:border-border hover:bg-state-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"
+                      (click)="eventClick.emit(event)"
+                    >
+                      <span
+                        class="w-1 shrink-0 rounded-full"
+                        [class]="bar(event)"
+                        aria-hidden="true"
+                      ></span>
+                      <span class="w-24 shrink-0 text-sm text-fg-muted tabular-nums">{{
+                        timeText(event)
+                      }}</span>
+                      <span class="min-w-0 flex-1">
+                        <span class="block truncate text-sm font-medium text-fg">{{
+                          event.title
+                        }}</span>
+                        @if (event.location) {
+                          <span
+                            class="mt-0.5 flex items-center gap-1 truncate text-xs text-fg-subtle"
+                          >
+                            <span mfIcon [size]="12">pin</span>{{ event.location }}
+                          </span>
+                        }
+                      </span>
+                    </button>
+                  </li>
+                }
+              </ul>
+            } @else {
+              <p
+                class="rounded-lg border border-dashed border-border px-3 py-2.5 text-sm text-fg-subtle"
+              >
+                {{ labels().empty }}
+              </p>
+            }
+          </section>
+        }
+      </div>
+    } @else {
+      <p class="py-8 text-center text-sm text-fg-subtle">{{ labels().empty }}</p>
+    }
+  `,
+                }]
+        }], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: true }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }], days: [{ type: i0.Input, args: [{ isSignal: true, alias: "days", required: false }] }], showEmptyDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyDays", required: false }] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Agenda };
+//# sourceMappingURL=mesgflow-ui-kit-agenda.mjs.map

package/fesm2022/mesgflow-ui-kit-agenda.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-agenda.mjs","sources":["../../../projects/ui-kit/agenda/agenda.ts","../../../projects/ui-kit/agenda/mesgflow-ui-kit-agenda.ts"],"sourcesContent":["import { Component, computed, inject, input, output } from '@angular/core';\r\nimport { MF_AGENDA_LABELS, MF_DATE_LOCALE, type MfTone } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { addDays, format, isSameDay, startOfDay } from 'date-fns';\r\n\r\nexport interface AgendaEvent {\r\n  id: string;\r\n  title: string;\r\n  start: Date;\r\n  end?: Date;\r\n  allDay?: boolean;\r\n  location?: string;\r\n  tone?: MfTone;\r\n}\r\n\r\ninterface AgendaDay {\r\n  key: string;\r\n  date: Date;\r\n  label: string;\r\n  sublabel: string;\r\n  events: AgendaEvent[];\r\n}\r\n\r\nconst BAR: Record<MfTone, string> = {\r\n  neutral: 'bg-fg-subtle',\r\n  primary: 'bg-accent',\r\n  success: 'bg-success',\r\n  warning: 'bg-warning',\r\n  danger: 'bg-danger',\r\n  info: 'bg-info',\r\n  help: 'bg-help',\r\n};\r\n\r\n/**\r\n * `<mf-agenda [events]=\"events\" [days]=\"7\" (eventClick)=\"open($event)\" />`\r\n *\r\n * Günlere gruplanmış etkinlik listesi (takvim \"ajanda\" görünümü) — yaklaşan\r\n * yayınlar, toplantılar, kampanya takvimi. Gün başlıkları \"Bugün/Yarın\" ya da\r\n * yerel ayarlı tarih (`MF_DATE_LOCALE`); saatler yerel biçimde; boş günler\r\n * `showEmptyDays` ile gösterilir. Her gün bir `<section>` + başlık, etkinlikler\r\n * odaklanabilir düğmeler.\r\n */\r\n@Component({\r\n  selector: 'mf-agenda',\r\n  exportAs: 'mfAgenda',\r\n  imports: [Icon],\r\n  host: { class: 'block' },\r\n  template: `\r\n    @if (groups().length) {\r\n      <div class=\"flex flex-col gap-5\">\r\n        @for (day of groups(); track day.key) {\r\n          <section [attr.aria-labelledby]=\"day.key\">\r\n            <h3 [id]=\"day.key\" class=\"mb-2 flex items-baseline gap-2\">\r\n              <span class=\"font-display text-title-sm text-fg\">{{ day.label }}</span>\r\n              <span class=\"text-sm text-fg-subtle\">{{ day.sublabel }}</span>\r\n            </h3>\r\n            @if (day.events.length) {\r\n              <ul class=\"m-0 flex list-none flex-col gap-1.5 p-0\">\r\n                @for (event of day.events; track event.id) {\r\n                  <li>\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"flex w-full items-stretch gap-3 rounded-lg border border-hairline bg-surface p-3 text-start transition-colors duration-fast ease-emphasis hover:border-border hover:bg-state-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring\"\r\n                      (click)=\"eventClick.emit(event)\"\r\n                    >\r\n                      <span\r\n                        class=\"w-1 shrink-0 rounded-full\"\r\n                        [class]=\"bar(event)\"\r\n                        aria-hidden=\"true\"\r\n                      ></span>\r\n                      <span class=\"w-24 shrink-0 text-sm text-fg-muted tabular-nums\">{{\r\n                        timeText(event)\r\n                      }}</span>\r\n                      <span class=\"min-w-0 flex-1\">\r\n                        <span class=\"block truncate text-sm font-medium text-fg\">{{\r\n                          event.title\r\n                        }}</span>\r\n                        @if (event.location) {\r\n                          <span\r\n                            class=\"mt-0.5 flex items-center gap-1 truncate text-xs text-fg-subtle\"\r\n                          >\r\n                            <span mfIcon [size]=\"12\">pin</span>{{ event.location }}\r\n                          </span>\r\n                        }\r\n                      </span>\r\n                    </button>\r\n                  </li>\r\n                }\r\n              </ul>\r\n            } @else {\r\n              <p\r\n                class=\"rounded-lg border border-dashed border-border px-3 py-2.5 text-sm text-fg-subtle\"\r\n              >\r\n                {{ labels().empty }}\r\n              </p>\r\n            }\r\n          </section>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <p class=\"py-8 text-center text-sm text-fg-subtle\">{{ labels().empty }}</p>\r\n    }\r\n  `,\r\n})\r\nexport class Agenda {\r\n  readonly events = input.required<AgendaEvent[]>();\r\n  /** Başlangıç günü — varsayılan bugün. */\r\n  readonly from = input<Date>(new Date());\r\n  /** Kaç gün gösterilsin. */\r\n  readonly days = input(7);\r\n  /** Etkinliksiz günleri de göster. */\r\n  readonly showEmptyDays = input(false);\r\n\r\n  readonly eventClick = output<AgendaEvent>();\r\n\r\n  protected readonly labels = inject(MF_AGENDA_LABELS);\r\n  private readonly locale = inject(MF_DATE_LOCALE);\r\n\r\n  protected readonly groups = computed<AgendaDay[]>(() => {\r\n    const start = startOfDay(this.from());\r\n    const today = startOfDay(new Date());\r\n    const l = this.labels();\r\n    const locale = this.locale();\r\n    const out: AgendaDay[] = [];\r\n    for (let i = 0; i < this.days(); i++) {\r\n      const date = addDays(start, i);\r\n      const events = this.events()\r\n        .filter((e) => isSameDay(e.start, date))\r\n        .sort(\r\n          (a, b) => Number(!a.allDay) - Number(!b.allDay) || a.start.getTime() - b.start.getTime(),\r\n        );\r\n      if (!events.length && !this.showEmptyDays()) continue;\r\n      const rel = isSameDay(date, today)\r\n        ? l.today\r\n        : isSameDay(date, addDays(today, 1))\r\n          ? l.tomorrow\r\n          : null;\r\n      out.push({\r\n        key: `mf-agenda-${format(date, 'yyyy-MM-dd')}`,\r\n        date,\r\n        label: rel ?? format(date, 'EEEE', { locale }),\r\n        sublabel: format(date, 'd MMMM', { locale }),\r\n        events,\r\n      });\r\n    }\r\n    return out;\r\n  });\r\n\r\n  protected bar(event: AgendaEvent): string {\r\n    return BAR[event.tone ?? 'primary'];\r\n  }\r\n\r\n  protected timeText(event: AgendaEvent): string {\r\n    if (event.allDay) return this.labels().allDay;\r\n    const locale = this.locale();\r\n    const start = format(event.start, 'p', { locale });\r\n    return event.end ? `${start} – ${format(event.end, 'p', { locale })}` : start;\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-aspect-ratio.mjs

@@ -0,0 +1,37 @@
+import * as i0 from '@angular/core';
+import { input, computed, Directive } from '@angular/core';
+
+/**
+ * `<div [mfAspectRatio]="16 / 9"><img src="…" alt="…" /></div>`
+ *
+ * Kutuyu sabit en-boy oranında tutar (native `aspect-ratio`); içindeki
+ * görsel/video kutuyu kaplar (`object-fit: cover`). Yüklenme sırasında
+ * düzen kaymasını (CLS) önler. `rounded` ile köşe yarıçapı token'ı.
+ */
+class AspectRatio {
+    /** Genişlik / yükseklik — `16 / 9`, `1`, `4 / 3`. */
+    mfAspectRatio = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mfAspectRatio" }] : /* istanbul ignore next */ []));
+    ratio = computed(() => String(this.mfAspectRatio() || 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AspectRatio, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AspectRatio, isStandalone: true, selector: "[mfAspectRatio]", inputs: { mfAspectRatio: { classPropertyName: "mfAspectRatio", publicName: "mfAspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.aspect-ratio": "ratio()" }, classAttribute: "relative block overflow-hidden bg-surface-sunken [&>img]:absolute [&>img]:inset-0 [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:absolute [&>video]:inset-0 [&>video]:h-full [&>video]:w-full [&>video]:object-cover [&>iframe]:absolute [&>iframe]:inset-0 [&>iframe]:h-full [&>iframe]:w-full" }, exportAs: ["mfAspectRatio"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AspectRatio, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfAspectRatio]',
+                    exportAs: 'mfAspectRatio',
+                    host: {
+                        '[style.aspect-ratio]': 'ratio()',
+                        class: 'relative block overflow-hidden bg-surface-sunken [&>img]:absolute [&>img]:inset-0 [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:absolute [&>video]:inset-0 [&>video]:h-full [&>video]:w-full [&>video]:object-cover [&>iframe]:absolute [&>iframe]:inset-0 [&>iframe]:h-full [&>iframe]:w-full',
+                    },
+                }]
+        }], propDecorators: { mfAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "mfAspectRatio", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AspectRatio };
+//# sourceMappingURL=mesgflow-ui-kit-aspect-ratio.mjs.map

package/fesm2022/mesgflow-ui-kit-aspect-ratio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-aspect-ratio.mjs","sources":["../../../projects/ui-kit/aspect-ratio/aspect-ratio.ts","../../../projects/ui-kit/aspect-ratio/mesgflow-ui-kit-aspect-ratio.ts"],"sourcesContent":["import { Directive, computed, input } from '@angular/core';\r\n\r\n/**\r\n * `<div [mfAspectRatio]=\"16 / 9\"><img src=\"…\" alt=\"…\" /></div>`\r\n *\r\n * Kutuyu sabit en-boy oranında tutar (native `aspect-ratio`); içindeki\r\n * görsel/video kutuyu kaplar (`object-fit: cover`). Yüklenme sırasında\r\n * düzen kaymasını (CLS) önler. `rounded` ile köşe yarıçapı token'ı.\r\n */\r\n@Directive({\r\n  selector: '[mfAspectRatio]',\r\n  exportAs: 'mfAspectRatio',\r\n  host: {\r\n    '[style.aspect-ratio]': 'ratio()',\r\n    class:\r\n      'relative block overflow-hidden bg-surface-sunken [&>img]:absolute [&>img]:inset-0 [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:absolute [&>video]:inset-0 [&>video]:h-full [&>video]:w-full [&>video]:object-cover [&>iframe]:absolute [&>iframe]:inset-0 [&>iframe]:h-full [&>iframe]:w-full',\r\n  },\r\n})\r\nexport class AspectRatio {\r\n  /** Genişlik / yükseklik — `16 / 9`, `1`, `4 / 3`. */\r\n  readonly mfAspectRatio = input<number>(1);\r\n  protected readonly ratio = computed(() => String(this.mfAspectRatio() || 1));\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;AAMG;MAUU,WAAW,CAAA;;IAEb,aAAa,GAAG,KAAK,CAAS,CAAC;sFAAC;AACtB,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;8EAAC;uGAHjE,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,SAAA,EAAA,EAAA,cAAA,EAAA,+SAAA,EAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBATvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,IAAI,EAAE;AACJ,wBAAA,sBAAsB,EAAE,SAAS;AACjC,wBAAA,KAAK,EACH,+SAA+S;AAClT,qBAAA;AACF,iBAAA;;;ACjBD;;AAEG;;"}