@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-splitter.mjs","sources":["../../../projects/ui-kit/splitter/splitter.ts","../../../projects/ui-kit/splitter/splitter.html","../../../projects/ui-kit/splitter/mesgflow-ui-kit-splitter.ts"],"sourcesContent":["import { Component, ElementRef, computed, inject, input, linkedSignal } from '@angular/core';\r\nimport { cn, inlineStartRatio, isRtl } from '@mesgflow/ui-kit/core';\r\n\r\n/**\r\n * `<mf-splitter><div splitterPane1>Sol</div><div splitterPane2>Sağ</div></mf-splitter>`\r\n *\r\n * Tuvalin iki yanındaki yeniden boyutlanabilir paneller için — `@angular/aria`'da\r\n * hazır bir splitter pattern'i YOK, `role=\"separator\"` + klavye (ok tuşları/\r\n * Home/End) + pointer sürükleme ELLE kuruldu (Slider'daki AYNI hand-rolled\r\n * ARIA yaklaşımı). Yüzde tabanlı bölünme (`flex-basis: %`) — piksel değil,\r\n * konteyner yeniden boyutlandığında oran korunur.\r\n *\r\n * `currentSplit` BİLEREK `linkedSignal(() => this.initialSplit())` — düz bir\r\n * `signal(50)` + constructor'da `.set(this.initialSplit())` YERİNE (BULUNAN\r\n * GERÇEK HATA: constructor çalıştığı anda `input()` sinyali HENÜZ bağlanan\r\n * değere sahip DEĞİL, `initialSplit()` varsayılana — 50 — düşüyor ve\r\n * `currentSplit` bir daha ASLA güncellenmiyordu; `[split]=\"20\"` gibi\r\n * varsayılan-DIŞI bir değer SESSİZCE yok sayılıyordu, gerçek tarayıcıda\r\n * `aria-valuenow` okununca ortaya çıktı). `linkedSignal` hem `initialSplit()`\r\n * değiştiğinde YENİDEN hesaplanıyor HEM DE sürükleme/klavye ile YEREL\r\n * `.set()`'e izin veriyor (CLAUDE.md: \"birden çok reaktif kaynaktan türeyen\r\n * VE senkron kalması gereken durum için `linkedSignal()`\").\r\n */\r\n@Component({\r\n  selector: 'mf-splitter',\r\n  exportAs: 'mfSplitter',\r\n  host: { '[class]': 'hostClasses()' },\r\n  templateUrl: './splitter.html',\r\n})\r\nexport class Splitter {\r\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\r\n  readonly min = input(10);\r\n  readonly max = input(90);\r\n  // Alias `split` mevcut public API — yeniden adlandırma kırıcı, ileri bir sürümde ele alınacak.\r\n  // eslint-disable-next-line @angular-eslint/no-input-rename\r\n  readonly initialSplit = input(50, { alias: 'split' });\r\n\r\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\r\n\r\n  protected readonly currentSplit = linkedSignal(() => this.initialSplit());\r\n\r\n  protected readonly hostClasses = computed(() =>\r\n    cn('flex h-full w-full', this.orientation() === 'vertical' ? 'flex-col' : 'flex-row'),\r\n  );\r\n\r\n  private clamp(v: number): number {\r\n    return Math.min(this.max(), Math.max(this.min(), v));\r\n  }\r\n\r\n  protected onPointerDown(event: PointerEvent): void {\r\n    const handle = event.currentTarget as HTMLElement;\r\n    handle.setPointerCapture(event.pointerId);\r\n  }\r\n\r\n  protected onPointerMove(event: PointerEvent): void {\r\n    if (event.buttons !== 1) return;\r\n    const rect = this.elementRef.nativeElement.getBoundingClientRect();\r\n    const isVertical = this.orientation() === 'vertical';\r\n    // Yatayda ilk panel satır başında durur — RTL'de sağda; oran oradan ölçülür.\r\n    const ratio = isVertical\r\n      ? (event.clientY - rect.top) / rect.height\r\n      : inlineStartRatio(event.clientX, rect, isRtl(this.elementRef.nativeElement));\r\n    this.currentSplit.set(this.clamp(Math.round(ratio * 100)));\r\n  }\r\n\r\n  protected onPointerUp(event: PointerEvent): void {\r\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\r\n  }\r\n\r\n  protected onKeydown(event: KeyboardEvent): void {\r\n    const isVertical = this.orientation() === 'vertical';\r\n    // Yatay oklar görsel yöne göre: RTL'de ← ayırıcıyı satır sonuna (sola) iter, ilk paneli büyütür.\r\n    const rtl = !isVertical && isRtl(this.elementRef.nativeElement);\r\n    const increaseKey = isVertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';\r\n    const decreaseKey = isVertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';\r\n    if (event.key === increaseKey) {\r\n      event.preventDefault();\r\n      this.currentSplit.update((v) => this.clamp(v + 2));\r\n    } else if (event.key === decreaseKey) {\r\n      event.preventDefault();\r\n      this.currentSplit.update((v) => this.clamp(v - 2));\r\n    } else if (event.key === 'Home') {\r\n      event.preventDefault();\r\n      this.currentSplit.set(this.min());\r\n    } else if (event.key === 'End') {\r\n      event.preventDefault();\r\n      this.currentSplit.set(this.max());\r\n    }\r\n  }\r\n}\r\n","<div class=\"min-h-0 min-w-0 overflow-auto\" [style.flex]=\"currentSplit() + '% 0 0'\">\r\n  <ng-content select=\"[splitterPane1]\" />\r\n</div>\r\n\r\n<div\r\n  role=\"separator\"\r\n  tabindex=\"0\"\r\n  [attr.aria-orientation]=\"orientation() === 'vertical' ? 'horizontal' : 'vertical'\"\r\n  [attr.aria-valuenow]=\"currentSplit()\"\r\n  [attr.aria-valuemin]=\"min()\"\r\n  [attr.aria-valuemax]=\"max()\"\r\n  [class]=\"\r\n    'shrink-0 touch-none bg-border transition-colors duration-fast ease-emphasis hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring ' +\r\n    (orientation() === 'vertical' ? 'h-1 w-full cursor-row-resize' : 'w-1 cursor-col-resize')\r\n  \"\r\n  (pointerdown)=\"onPointerDown($event)\"\r\n  (pointermove)=\"onPointerMove($event)\"\r\n  (pointerup)=\"onPointerUp($event)\"\r\n  (keydown)=\"onKeydown($event)\"\r\n></div>\r\n\r\n<div class=\"min-h-0 min-w-0 flex-1 overflow-auto\">\r\n  <ng-content select=\"[splitterPane2]\" />\r\n</div>\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-stat-tile.mjs

@@ -0,0 +1,98 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Component } from '@angular/core';
+import { Card } from '@mesgflow/ui-kit/card';
+import { Sparkline } from '@mesgflow/ui-kit/chart';
+import { cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { cva } from 'class-variance-authority';
+
+/** Tonal ikon dolgusu — Badge/Avatar'daki AYNI tonal işaret rol token'ı (`bg-X-tint text-X-tint-fg`, `color-mix()` tabanlı), bkz. projects/ui-kit/README.md "Token mimarisi". */
+const statTileIconVariants = cva('flex h-10 w-10 shrink-0 items-center justify-center rounded-md', {
+    variants: {
+        tone: {
+            neutral: 'bg-surface-alt 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',
+        },
+    },
+    defaultVariants: { tone: 'neutral' },
+});
+
+const DELTA_ICON = {
+    up: 'trending_up',
+    down: 'trending_down',
+    flat: 'trending_flat',
+};
+/**
+ * `<mf-stat-tile label="Aktif üye" value="1.284" delta="+12%" deltaDirection="up"
+ *   deltaCaption="geçen aya göre" [trend]="last12" trendLabel="Son 12 ay" />`
+ *
+ * KPI şeridinin tek birimi — dataviz "figür sözleşmesi": `label` · `value` · opsiyonel `delta`
+ * (işaretli, adı verilen bir döneme göre) · opsiyonel `trend` (sparkline, güncel dönem vurgulu).
+ *
+ * Delta rengi = YÖN × "yukarı iyi mi" (`upIsGood` — hata oranında düşüş iyidir): iyi → success,
+ * kötü → danger, yatay → nötr. Renk ASLA tek başına anlam taşımaz: yön ikonu + işaretli metin
+ * her zaman yanında. Değer büyük tek başına bir sayı olduğu için orantılı rakam (tabular DEĞİL —
+ * `tabular-nums` "121"i büyük boyutta dağınık gösterir).
+ *
+ * Ray motifi BİLEREK yok — README bu motifi 4 yerle sınırlıyor, StatTile beşinci yer olmuyor.
+ * Dar bir ızgara hücresinde (16rem altı, `@container`) ikon metnin ÜSTÜNE geçer — değer satırı daralmaz.
+ * `@container` (inline-size containment) host'un genişliği İÇERİKTEN gelemez demek: ızgara/blok
+ * içinde doğal çalışır; genişliği verilmemiş bir flex öğesi olarak kullanırken `flex-1`/`w-*` verin.
+ */
+class StatTile {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    caption = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    tone = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Görüntülenecek işaretli değişim ("+12%", "−3"). Boşsa delta satırı çizilmez. */
+    delta = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
+    deltaDirection = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deltaDirection" }] : /* istanbul ignore next */ []));
+    /** Artış iyi mi? Hata oranı, churn, yanıt süresi gibi metriklerde `false`. */
+    upIsGood = input(true, { ...(ngDevMode ? { debugName: "upIsGood" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Karşılaştırılan dönem ("geçen aya göre") — tüketici metni, kit varsayılanı YOK. */
+    deltaCaption = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deltaCaption" }] : /* istanbul ignore next */ []));
+    /** Sparkline değerleri (en az 2). Güncel dönem vurgu renginde çizilir. */
+    trend = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
+    /** Sparkline'ın erişilebilir adı; boşsa süs sayılır (değer zaten metinde). */
+    trendLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trendLabel" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => cn(statTileIconVariants({ tone: this.tone() })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    deltaIcon = computed(() => DELTA_ICON[this.deltaDirection()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deltaIcon" }] : /* istanbul ignore next */ []));
+    deltaClasses = computed(() => {
+        const direction = this.deltaDirection();
+        const good = direction === 'up' ? this.upIsGood() : !this.upIsGood();
+        const color = direction === 'flat' ? 'text-fg-muted' : good ? 'text-success' : 'text-danger';
+        return cn('inline-flex items-center gap-0.5 font-medium tabular-nums', color);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deltaClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StatTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StatTile, isStandalone: true, selector: "mf-stat-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaDirection: { classPropertyName: "deltaDirection", publicName: "deltaDirection", isSignal: true, isRequired: false, transformFunction: null }, upIsGood: { classPropertyName: "upIsGood", publicName: "upIsGood", isSignal: true, isRequired: false, transformFunction: null }, deltaCaption: { classPropertyName: "deltaCaption", publicName: "deltaCaption", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block @container" }, ngImport: i0, template: "<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: Card, selector: "[mfCard]", inputs: ["padding", "interactive"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Sparkline, selector: "mf-sparkline", inputs: ["values", "ariaLabel", "width", "height", "area"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StatTile, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-stat-tile', imports: [Card, Icon, Sparkline], host: { class: 'block @container' }, template: "<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaDirection", required: false }] }], upIsGood: [{ type: i0.Input, args: [{ isSignal: true, alias: "upIsGood", required: false }] }], deltaCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaCaption", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], trendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StatTile, statTileIconVariants };
+//# sourceMappingURL=mesgflow-ui-kit-stat-tile.mjs.map

package/fesm2022/mesgflow-ui-kit-stat-tile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-stat-tile.mjs","sources":["../../../projects/ui-kit/stat-tile/stat-tile.variants.ts","../../../projects/ui-kit/stat-tile/stat-tile.ts","../../../projects/ui-kit/stat-tile/stat-tile.html","../../../projects/ui-kit/stat-tile/mesgflow-ui-kit-stat-tile.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\n/** Tonal ikon dolgusu — Badge/Avatar'daki AYNI tonal işaret rol token'ı (`bg-X-tint text-X-tint-fg`, `color-mix()` tabanlı), bkz. projects/ui-kit/README.md \"Token mimarisi\". */\r\nexport const statTileIconVariants = cva(\r\n  'flex h-10 w-10 shrink-0 items-center justify-center rounded-md',\r\n  {\r\n    variants: {\r\n      tone: {\r\n        neutral: 'bg-surface-alt 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    defaultVariants: { tone: 'neutral' },\r\n  },\r\n);\r\n\r\nexport type StatTileTone = VariantProps<typeof statTileIconVariants>['tone'];\r\n","import { Component, booleanAttribute, computed, input } from '@angular/core';\r\nimport { Card } from '@mesgflow/ui-kit/card';\r\nimport { Sparkline } from '@mesgflow/ui-kit/chart';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { statTileIconVariants, type StatTileTone } from './stat-tile.variants';\r\n\r\nexport type StatTileDeltaDirection = 'up' | 'down' | 'flat';\r\n\r\nconst DELTA_ICON: Record<StatTileDeltaDirection, string> = {\r\n  up: 'trending_up',\r\n  down: 'trending_down',\r\n  flat: 'trending_flat',\r\n};\r\n\r\n/**\r\n * `<mf-stat-tile label=\"Aktif üye\" value=\"1.284\" delta=\"+12%\" deltaDirection=\"up\"\r\n *   deltaCaption=\"geçen aya göre\" [trend]=\"last12\" trendLabel=\"Son 12 ay\" />`\r\n *\r\n * KPI şeridinin tek birimi — dataviz \"figür sözleşmesi\": `label` · `value` · opsiyonel `delta`\r\n * (işaretli, adı verilen bir döneme göre) · opsiyonel `trend` (sparkline, güncel dönem vurgulu).\r\n *\r\n * Delta rengi = YÖN × \"yukarı iyi mi\" (`upIsGood` — hata oranında düşüş iyidir): iyi → success,\r\n * kötü → danger, yatay → nötr. Renk ASLA tek başına anlam taşımaz: yön ikonu + işaretli metin\r\n * her zaman yanında. Değer büyük tek başına bir sayı olduğu için orantılı rakam (tabular DEĞİL —\r\n * `tabular-nums` \"121\"i büyük boyutta dağınık gösterir).\r\n *\r\n * Ray motifi BİLEREK yok — README bu motifi 4 yerle sınırlıyor, StatTile beşinci yer olmuyor.\r\n * Dar bir ızgara hücresinde (16rem altı, `@container`) ikon metnin ÜSTÜNE geçer — değer satırı daralmaz.\r\n * `@container` (inline-size containment) host'un genişliği İÇERİKTEN gelemez demek: ızgara/blok\r\n * içinde doğal çalışır; genişliği verilmemiş bir flex öğesi olarak kullanırken `flex-1`/`w-*` verin.\r\n */\r\n@Component({\r\n  selector: 'mf-stat-tile',\r\n  imports: [Card, Icon, Sparkline],\r\n  host: { class: 'block @container' },\r\n  templateUrl: './stat-tile.html',\r\n})\r\nexport class StatTile {\r\n  readonly label = input.required<string>();\r\n  readonly value = input.required<string>();\r\n  readonly icon = input<string>('');\r\n  readonly caption = input<string>('');\r\n  readonly tone = input<StatTileTone>('neutral');\r\n\r\n  /** Görüntülenecek işaretli değişim (\"+12%\", \"−3\"). Boşsa delta satırı çizilmez. */\r\n  readonly delta = input('');\r\n  readonly deltaDirection = input<StatTileDeltaDirection>('flat');\r\n  /** Artış iyi mi? Hata oranı, churn, yanıt süresi gibi metriklerde `false`. */\r\n  readonly upIsGood = input(true, { transform: booleanAttribute });\r\n  /** Karşılaştırılan dönem (\"geçen aya göre\") — tüketici metni, kit varsayılanı YOK. */\r\n  readonly deltaCaption = input('');\r\n  /** Sparkline değerleri (en az 2). Güncel dönem vurgu renginde çizilir. */\r\n  readonly trend = input<readonly number[]>([]);\r\n  /** Sparkline'ın erişilebilir adı; boşsa süs sayılır (değer zaten metinde). */\r\n  readonly trendLabel = input('');\r\n\r\n  protected readonly iconClasses = computed(() => cn(statTileIconVariants({ tone: this.tone() })));\r\n\r\n  protected readonly deltaIcon = computed(() => DELTA_ICON[this.deltaDirection()]);\r\n\r\n  protected readonly deltaClasses = computed(() => {\r\n    const direction = this.deltaDirection();\r\n    const good = direction === 'up' ? this.upIsGood() : !this.upIsGood();\r\n    const color = direction === 'flat' ? 'text-fg-muted' : good ? 'text-success' : 'text-danger';\r\n    return cn('inline-flex items-center gap-0.5 font-medium tabular-nums', color);\r\n  });\r\n}\r\n","<div mfCard padding=\"md\" class=\"flex flex-col items-start gap-3 @3xs:flex-row @3xs:gap-4\">\r\n  @if (icon()) {\r\n    <div [class]=\"iconClasses()\">\r\n      <span mfIcon [size]=\"20\">{{ icon() }}</span>\r\n    </div>\r\n  }\r\n  <div class=\"w-full min-w-0 flex-1\">\r\n    <p class=\"text-eyebrow text-fg-subtle\">{{ label() }}</p>\r\n    <div class=\"mt-1 flex items-end justify-between gap-3\">\r\n      <p class=\"font-display text-metric text-fg\">{{ value() }}</p>\r\n      @if (trend().length > 1) {\r\n        <mf-sparkline [values]=\"trend()\" [ariaLabel]=\"trendLabel()\" class=\"mb-0.5 shrink-0\" />\r\n      }\r\n    </div>\r\n    @if (delta()) {\r\n      <p class=\"mt-1.5 flex flex-wrap items-center gap-x-1.5 text-xs\">\r\n        <span [class]=\"deltaClasses()\">\r\n          <span mfIcon [size]=\"16\">{{ deltaIcon() }}</span>\r\n          {{ delta() }}\r\n        </span>\r\n        @if (deltaCaption()) {\r\n          <span class=\"text-fg-subtle\">{{ deltaCaption() }}</span>\r\n        }\r\n      </p>\r\n    }\r\n    @if (caption()) {\r\n      <p class=\"mt-1 truncate text-xs text-fg-subtle\">{{ caption() }}</p>\r\n    }\r\n  </div>\r\n</div>\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-stepper.mjs

@@ -0,0 +1,133 @@
+import * as i0 from '@angular/core';
+import { input, inject, computed, Component } from '@angular/core';
+import { MF_STEPPER_LABELS, cn } from '@mesgflow/ui-kit/core';
+import { Icon } from '@mesgflow/ui-kit/icon';
+
+/**
+ * `<mf-stepper [current]="1"><mf-step label="Hesap" /><mf-step label="Ödeme" /></mf-stepper>`
+ *
+ * Salt görsel bir ilerleme göstergesi — gezinme (bir sonraki/önceki adıma
+ * geçme) çağıranın kendi sorumluluğunda (`[current]`'ı değiştiren düğmeler
+ * dışarıda yaşar). Her `mf-step` kendi index'ini KURULUŞTA bir kez
+ * `registerStep()` ile alır — `contentChildren` yerine basit bir kayıt-sırası
+ * sayacı, `Step`'in `Stepper`'ı import ETMESİ yeterli (tersi YOK, döngüsel
+ * bir tip bağımlılığı kurulmuyor).
+ */
+class Stepper {
+    current = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    stepperLabels = inject(MF_STEPPER_LABELS);
+    effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.stepperLabels().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
+    nextIndex = 0;
+    /** Her `mf-step` kurulumda BİR KEZ çağırır — kendi (sıradaki) index'ini alır. */
+    registerStep() {
+        return this.nextIndex++;
+    }
+    isComplete(index) {
+        return index < this.current();
+    }
+    isCurrent(index) {
+        return index === this.current();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Stepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: Stepper, isStandalone: true, selector: "mf-stepper", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "attr.aria-label": "effectiveAriaLabel()" }, classAttribute: "flex items-center" }, exportAs: ["mfStepper"], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Stepper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-stepper',
+                    exportAs: 'mfStepper',
+                    host: {
+                        role: 'list',
+                        '[attr.aria-label]': 'effectiveAriaLabel()',
+                        class: 'flex items-center',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * `<mf-step label="Hesap" description="Bilgilerinizi girin" />` — bir
+ * `mf-stepper` ATASI ZORUNLU (bkz. `stepper.ts`'in JSDoc'u). Bağlayıcı
+ * çizgi kendi `::after` pseudo-elementi (`last:after:hidden` ile SON
+ * adımda gizlenir — hangi adımın son olduğunu bilmek için ayrı bir
+ * hesaplama GEREKMEZ, saf CSS `:last-child`).
+ */
+class Step {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    stepper = inject(Stepper);
+    index = this.stepper.registerStep();
+    isComplete = computed(() => this.stepper.isComplete(this.index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isComplete" }] : /* istanbul ignore next */ []));
+    isCurrent = computed(() => this.stepper.isCurrent(this.index), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCurrent" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn("relative flex flex-1 items-center gap-2 after:mx-3 after:h-px after:flex-1 after:content-[''] last:after:hidden", this.isComplete() ? 'after:bg-accent-fill' : 'after:bg-border'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    circleClasses() {
+        return cn('flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium', this.isComplete()
+            ? 'bg-accent-fill text-fg-on-accent'
+            : this.isCurrent()
+                ? 'border-2 border-accent text-accent'
+                : 'border border-border text-fg-subtle');
+    }
+    labelClasses() {
+        return cn('text-sm', this.isCurrent() || this.isComplete() ? 'font-medium text-fg' : 'text-fg-subtle');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Step, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Step, isStandalone: true, selector: "mf-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "hostClasses()", "attr.aria-current": "isCurrent() ? \"step\" : null" } }, exportAs: ["mfStep"], ngImport: i0, template: `
+    <span [class]="circleClasses()">
+      @if (isComplete()) {
+        <span mfIcon [size]="14">check</span>
+      } @else {
+        {{ index + 1 }}
+      }
+    </span>
+    <span class="flex min-w-0 flex-col">
+      <span [class]="labelClasses()">{{ label() }}</span>
+      @if (description()) {
+        <span class="truncate text-xs text-fg-subtle">{{ description() }}</span>
+      }
+    </span>
+  `, 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: Step, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-step',
+                    exportAs: 'mfStep',
+                    imports: [Icon],
+                    host: {
+                        role: 'listitem',
+                        '[class]': 'hostClasses()',
+                        '[attr.aria-current]': 'isCurrent() ? "step" : null',
+                    },
+                    template: `
+    <span [class]="circleClasses()">
+      @if (isComplete()) {
+        <span mfIcon [size]="14">check</span>
+      } @else {
+        {{ index + 1 }}
+      }
+    </span>
+    <span class="flex min-w-0 flex-col">
+      <span [class]="labelClasses()">{{ label() }}</span>
+      @if (description()) {
+        <span class="truncate text-xs text-fg-subtle">{{ description() }}</span>
+      }
+    </span>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Step, Stepper };
+//# sourceMappingURL=mesgflow-ui-kit-stepper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-stepper.mjs","sources":["../../../projects/ui-kit/stepper/stepper.ts","../../../projects/ui-kit/stepper/step.ts","../../../projects/ui-kit/stepper/mesgflow-ui-kit-stepper.ts"],"sourcesContent":["import { Component, computed, inject, input } from '@angular/core';\r\nimport { MF_STEPPER_LABELS } from '@mesgflow/ui-kit/core';\r\n\r\n/**\r\n * `<mf-stepper [current]=\"1\"><mf-step label=\"Hesap\" /><mf-step label=\"Ödeme\" /></mf-stepper>`\r\n *\r\n * Salt görsel bir ilerleme göstergesi — gezinme (bir sonraki/önceki adıma\r\n * geçme) çağıranın kendi sorumluluğunda (`[current]`'ı değiştiren düğmeler\r\n * dışarıda yaşar). Her `mf-step` kendi index'ini KURULUŞTA bir kez\r\n * `registerStep()` ile alır — `contentChildren` yerine basit bir kayıt-sırası\r\n * sayacı, `Step`'in `Stepper`'ı import ETMESİ yeterli (tersi YOK, döngüsel\r\n * bir tip bağımlılığı kurulmuyor).\r\n */\r\n@Component({\r\n  selector: 'mf-stepper',\r\n  exportAs: 'mfStepper',\r\n  host: {\r\n    role: 'list',\r\n    '[attr.aria-label]': 'effectiveAriaLabel()',\r\n    class: 'flex items-center',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class Stepper {\r\n  readonly current = input(0);\r\n  readonly ariaLabel = input<string>();\r\n\r\n  private readonly stepperLabels = inject(MF_STEPPER_LABELS);\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.stepperLabels().ariaLabel,\r\n  );\r\n\r\n  private nextIndex = 0;\r\n\r\n  /** Her `mf-step` kurulumda BİR KEZ çağırır — kendi (sıradaki) index'ini alır. */\r\n  registerStep(): number {\r\n    return this.nextIndex++;\r\n  }\r\n\r\n  isComplete(index: number): boolean {\r\n    return index < this.current();\r\n  }\r\n\r\n  isCurrent(index: number): boolean {\r\n    return index === this.current();\r\n  }\r\n}\r\n","import { Component, computed, inject, input } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Stepper } from './stepper';\r\n\r\n/**\r\n * `<mf-step label=\"Hesap\" description=\"Bilgilerinizi girin\" />` — bir\r\n * `mf-stepper` ATASI ZORUNLU (bkz. `stepper.ts`'in JSDoc'u). Bağlayıcı\r\n * çizgi kendi `::after` pseudo-elementi (`last:after:hidden` ile SON\r\n * adımda gizlenir — hangi adımın son olduğunu bilmek için ayrı bir\r\n * hesaplama GEREKMEZ, saf CSS `:last-child`).\r\n */\r\n@Component({\r\n  selector: 'mf-step',\r\n  exportAs: 'mfStep',\r\n  imports: [Icon],\r\n  host: {\r\n    role: 'listitem',\r\n    '[class]': 'hostClasses()',\r\n    '[attr.aria-current]': 'isCurrent() ? \"step\" : null',\r\n  },\r\n  template: `\r\n    <span [class]=\"circleClasses()\">\r\n      @if (isComplete()) {\r\n        <span mfIcon [size]=\"14\">check</span>\r\n      } @else {\r\n        {{ index + 1 }}\r\n      }\r\n    </span>\r\n    <span class=\"flex min-w-0 flex-col\">\r\n      <span [class]=\"labelClasses()\">{{ label() }}</span>\r\n      @if (description()) {\r\n        <span class=\"truncate text-xs text-fg-subtle\">{{ description() }}</span>\r\n      }\r\n    </span>\r\n  `,\r\n})\r\nexport class Step {\r\n  readonly label = input.required<string>();\r\n  readonly description = input('');\r\n\r\n  private readonly stepper = inject(Stepper);\r\n  protected readonly index = this.stepper.registerStep();\r\n\r\n  protected readonly isComplete = computed(() => this.stepper.isComplete(this.index));\r\n  protected readonly isCurrent = computed(() => this.stepper.isCurrent(this.index));\r\n\r\n  protected readonly hostClasses = computed(() =>\r\n    cn(\r\n      \"relative flex flex-1 items-center gap-2 after:mx-3 after:h-px after:flex-1 after:content-[''] last:after:hidden\",\r\n      this.isComplete() ? 'after:bg-accent-fill' : 'after:bg-border',\r\n    ),\r\n  );\r\n\r\n  protected circleClasses(): string {\r\n    return cn(\r\n      'flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',\r\n      this.isComplete()\r\n        ? 'bg-accent-fill text-fg-on-accent'\r\n        : this.isCurrent()\r\n          ? 'border-2 border-accent text-accent'\r\n          : 'border border-border text-fg-subtle',\r\n    );\r\n  }\r\n\r\n  protected labelClasses(): string {\r\n    return cn(\r\n      'text-sm',\r\n      this.isCurrent() || this.isComplete() ? 'font-medium text-fg' : 'text-fg-subtle',\r\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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"}

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

@@ -0,0 +1,73 @@
+import * as i0 from '@angular/core';
+import { model, input, computed, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+
+/** Track/thumb/offset/kayma ölçüleri — `(track_h - thumb_h) / 2 = offset`, `translate = track_w - thumb_w - 2×offset` formülüyle üretildi (bkz. `md`'nin önceki sabit değerleriyle birebir örtüştüğü doğrulaması). */
+const SIZE_CLASSES = {
+    sm: {
+        track: 'h-5 w-9',
+        thumb: 'h-4 w-4',
+        offset: 'start-0.5',
+        translate: 'peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4',
+    },
+    md: {
+        track: 'h-6 w-11',
+        thumb: 'h-5 w-5',
+        offset: 'start-0.5',
+        translate: 'peer-checked:translate-x-5 rtl:peer-checked:-translate-x-5',
+    },
+    lg: {
+        track: 'h-7 w-13',
+        thumb: 'h-6 w-6',
+        offset: 'start-0.5',
+        translate: 'peer-checked:translate-x-6 rtl:peer-checked:-translate-x-6',
+    },
+};
+/**
+ * `<mf-switch [(checked)]="row.active" (checkedChange)="onToggle(row)" />`
+ *
+ * Native `[(ngModel)]` DEĞİL, Angular'ın `model()` iki-yönlü bağlama sinyali
+ * kullanılıyor (`[(checked)]`) — ControlValueAccessor yazmadan aynı ergonomiyi
+ * veriyor. Görünür track+thumb, gizli (sr-only) bir native checkbox'ın
+ * `:checked` durumuna komşu `<span>` üzerinden `peer-checked:` ile tepki
+ * veriyor — gerçek form kontrolü hâlâ native checkbox (klavye/focus/a11y
+ * ücretsiz), görsel tamamen bizim.
+ */
+class Switch extends ValueAccessorBase {
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** `label` boşken (görünür metin yok) native checkbox'a erişilebilir ad sağlamak için — `label` doluysa YOK SAYILIR (çift anons olmasın diye). */
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    sizeClasses = computed(() => SIZE_CLASSES[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeClasses" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.checked.set(value);
+    }
+    onToggle(event) {
+        const checked = event.target.checked;
+        this.checked.set(checked);
+        this.onChange(checked);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Switch, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Switch, isStandalone: true, selector: "mf-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }], exportAs: ["mfSwitch"], usesInheritance: true, ngImport: i0, template: "<label\r\n  class=\"inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active transition-colors duration-fast ease-emphasis peer-checked:bg-accent-fill peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-control transition-transform duration-fast ease-out ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Switch, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-switch', exportAs: 'mfSwitch', host: { class: 'inline-flex' }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }], template: "<label\r\n  class=\"inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active transition-colors duration-fast ease-emphasis peer-checked:bg-accent-fill peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-control transition-transform duration-fast ease-out ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Switch };
+//# sourceMappingURL=mesgflow-ui-kit-switch.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-switch.mjs","sources":["../../../projects/ui-kit/switch/switch.ts","../../../projects/ui-kit/switch/switch.html","../../../projects/ui-kit/switch/mesgflow-ui-kit-switch.ts"],"sourcesContent":["import { Component, computed, forwardRef, input, model } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { ValueAccessorBase, type MfSize } from '@mesgflow/ui-kit/core';\r\n\r\n/** Track/thumb/offset/kayma ölçüleri — `(track_h - thumb_h) / 2 = offset`, `translate = track_w - thumb_w - 2×offset` formülüyle üretildi (bkz. `md`'nin önceki sabit değerleriyle birebir örtüştüğü doğrulaması). */\r\nconst SIZE_CLASSES: Record<\r\n  MfSize,\r\n  { track: string; thumb: string; offset: string; translate: string }\r\n> = {\r\n  sm: {\r\n    track: 'h-5 w-9',\r\n    thumb: 'h-4 w-4',\r\n    offset: 'start-0.5',\r\n    translate: 'peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4',\r\n  },\r\n  md: {\r\n    track: 'h-6 w-11',\r\n    thumb: 'h-5 w-5',\r\n    offset: 'start-0.5',\r\n    translate: 'peer-checked:translate-x-5 rtl:peer-checked:-translate-x-5',\r\n  },\r\n  lg: {\r\n    track: 'h-7 w-13',\r\n    thumb: 'h-6 w-6',\r\n    offset: 'start-0.5',\r\n    translate: 'peer-checked:translate-x-6 rtl:peer-checked:-translate-x-6',\r\n  },\r\n};\r\n\r\n/**\r\n * `<mf-switch [(checked)]=\"row.active\" (checkedChange)=\"onToggle(row)\" />`\r\n *\r\n * Native `[(ngModel)]` DEĞİL, Angular'ın `model()` iki-yönlü bağlama sinyali\r\n * kullanılıyor (`[(checked)]`) — ControlValueAccessor yazmadan aynı ergonomiyi\r\n * veriyor. Görünür track+thumb, gizli (sr-only) bir native checkbox'ın\r\n * `:checked` durumuna komşu `<span>` üzerinden `peer-checked:` ile tepki\r\n * veriyor — gerçek form kontrolü hâlâ native checkbox (klavye/focus/a11y\r\n * ücretsiz), görsel tamamen bizim.\r\n */\r\n@Component({\r\n  selector: 'mf-switch',\r\n  exportAs: 'mfSwitch',\r\n  host: { class: 'inline-flex' },\r\n  templateUrl: './switch.html',\r\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Switch), multi: true }],\r\n})\r\nexport class Switch extends ValueAccessorBase<boolean> implements ControlValueAccessor {\r\n  readonly checked = model(false);\r\n  readonly disabled = input(false);\r\n  readonly size = input<MfSize>('md');\r\n  readonly label = input<string>('');\r\n  /** `label` boşken (görünür metin yok) native checkbox'a erişilebilir ad sağlamak için — `label` doluysa YOK SAYILIR (çift anons olmasın diye). */\r\n  readonly ariaLabel = input<string>('');\r\n\r\n  protected readonly sizeClasses = computed(() => SIZE_CLASSES[this.size()]);\r\n\r\n  writeValue(value: boolean): void {\r\n    this.checked.set(value);\r\n  }\r\n\r\n  protected onToggle(event: Event): void {\r\n    const checked = (event.target as HTMLInputElement).checked;\r\n    this.checked.set(checked);\r\n    this.onChange(checked);\r\n    this.onTouched();\r\n  }\r\n}\r\n","<label\r\n  class=\"inline-flex cursor-pointer items-center gap-2\"\r\n  [class.cursor-not-allowed]=\"disabled()\"\r\n  [class.opacity-50]=\"disabled()\"\r\n>\r\n  <span [class]=\"'relative inline-flex shrink-0 items-center ' + sizeClasses().track\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"switch\"\r\n      class=\"peer sr-only\"\r\n      [checked]=\"checked()\"\r\n      [disabled]=\"disabled()\"\r\n      [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\r\n      (change)=\"onToggle($event)\"\r\n    />\r\n    <span\r\n      class=\"pointer-events-none absolute inset-0 rounded-full bg-surface-active transition-colors duration-fast ease-emphasis peer-checked:bg-accent-fill peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus-ring\"\r\n    ></span>\r\n    <span\r\n      [class]=\"\r\n        'pointer-events-none absolute rounded-full bg-surface shadow-control transition-transform duration-fast ease-out ' +\r\n        sizeClasses().thumb +\r\n        ' ' +\r\n        sizeClasses().offset +\r\n        ' ' +\r\n        sizeClasses().translate\r\n      \"\r\n    ></span>\r\n  </span>\r\n  @if (label()) {\r\n    <span class=\"text-sm text-fg-muted\">{{ label() }}</span>\r\n  }\r\n</label>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}