@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,48 @@
+import * as i0 from '@angular/core';
+import { input, computed, Directive } from '@angular/core';
+import { cn } from '@mesgflow/ui-kit/core';
+
+const TONE_CLASSES = {
+    neutral: 'text-fg-muted hover:text-fg',
+    primary: 'text-accent hover:text-accent-strong',
+    success: 'text-success',
+    warning: 'text-warning',
+    danger: 'text-danger',
+    info: 'text-info',
+    help: 'text-help',
+};
+const UNDERLINE_CLASSES = {
+    always: 'underline underline-offset-2',
+    hover: 'no-underline underline-offset-2 hover:underline',
+    none: 'no-underline',
+};
+/**
+ * `<a mfLink href="/ayarlar">Ayarlar</a>` — düz metin içine gömülü bağlantılar
+ * için (ör. "Zaten hesabınız var mı? Giriş yapın"). Navigasyon bağlantıları
+ * (sidebar, tabs, breadcrumb) KENDİ bileşenlerinin stilini taşır, bu
+ * directive'i KULLANMAZ — `Link` SADECE metin akışı içindeki bağlantılar için.
+ */
+class Link {
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    underline = input('hover', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "underline" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('transition-colors duration-fast ease-emphasis focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring', TONE_CLASSES[this.tone()], UNDERLINE_CLASSES[this.underline()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Link, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: Link, isStandalone: true, selector: "a[mfLink]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, underline: { classPropertyName: "underline", publicName: "underline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Link, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[mfLink]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], underline: [{ type: i0.Input, args: [{ isSignal: true, alias: "underline", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Link };
+//# sourceMappingURL=mesgflow-ui-kit-link.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-link.mjs","sources":["../../../projects/ui-kit/link/link.ts","../../../projects/ui-kit/link/mesgflow-ui-kit-link.ts"],"sourcesContent":["import { Directive, computed, input } from '@angular/core';\r\nimport { cn, type MfTone } from '@mesgflow/ui-kit/core';\r\n\r\nexport type LinkUnderline = 'always' | 'hover' | 'none';\r\n\r\nconst TONE_CLASSES: Record<MfTone, string> = {\r\n  neutral: 'text-fg-muted hover:text-fg',\r\n  primary: 'text-accent hover:text-accent-strong',\r\n  success: 'text-success',\r\n  warning: 'text-warning',\r\n  danger: 'text-danger',\r\n  info: 'text-info',\r\n  help: 'text-help',\r\n};\r\n\r\nconst UNDERLINE_CLASSES: Record<LinkUnderline, string> = {\r\n  always: 'underline underline-offset-2',\r\n  hover: 'no-underline underline-offset-2 hover:underline',\r\n  none: 'no-underline',\r\n};\r\n\r\n/**\r\n * `<a mfLink href=\"/ayarlar\">Ayarlar</a>` — düz metin içine gömülü bağlantılar\r\n * için (ör. \"Zaten hesabınız var mı? Giriş yapın\"). Navigasyon bağlantıları\r\n * (sidebar, tabs, breadcrumb) KENDİ bileşenlerinin stilini taşır, bu\r\n * directive'i KULLANMAZ — `Link` SADECE metin akışı içindeki bağlantılar için.\r\n */\r\n@Directive({\r\n  selector: 'a[mfLink]',\r\n  host: { '[class]': 'classes()' },\r\n})\r\nexport class Link {\r\n  readonly tone = input<MfTone>('primary');\r\n  readonly underline = input<LinkUnderline>('hover');\r\n\r\n  protected readonly classes = computed(() =>\r\n    cn(\r\n      'transition-colors duration-fast ease-emphasis focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring',\r\n      TONE_CLASSES[this.tone()],\r\n      UNDERLINE_CLASSES[this.underline()],\r\n    ),\r\n  );\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAY,GAA2B;AAC3C,IAAA,OAAO,EAAE,6BAA6B;AACtC,IAAA,OAAO,EAAE,sCAAsC;AAC/C,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,IAAI,EAAE,WAAW;CAClB;AAED,MAAM,iBAAiB,GAAkC;AACvD,IAAA,MAAM,EAAE,8BAA8B;AACtC,IAAA,KAAK,EAAE,iDAAiD;AACxD,IAAA,IAAI,EAAE,cAAc;CACrB;AAED;;;;;AAKG;MAKU,IAAI,CAAA;IACN,IAAI,GAAG,KAAK,CAAS,SAAS;6EAAC;IAC/B,SAAS,GAAG,KAAK,CAAgB,OAAO;kFAAC;IAE/B,OAAO,GAAG,QAAQ,CAAC,MACpC,EAAE,CACA,6JAA6J,EAC7J,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EACzB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CACpC;gFACF;uGAVU,IAAI,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAJ,IAAI,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAJ,IAAI,EAAA,UAAA,EAAA,CAAA;kBAJhB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AACjC,iBAAA;;;AC9BD;;AAEG;;"}

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

@@ -0,0 +1,105 @@
+import * as i1 from '@angular/aria/menu';
+import { Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger as MenuTrigger$1 } from '@angular/aria/menu';
+import * as i0 from '@angular/core';
+import { Component, inject, computed, Directive } from '@angular/core';
+import { cn } from '@mesgflow/ui-kit/core';
+import { cva } from 'class-variance-authority';
+
+/**
+ * `<mf-menu #menu="ngMenu" (itemSelected)="onSelect($event)"><button mfMenuItem value="a">A</button></mf-menu>`
+ * — genelde bir `mf-popover` içine konur, tetikleyici için `mfMenuTrigger`
+ * kullanılır (bkz. `menu-trigger.ts`). ARIA/klavye (ok tuşu navigasyonu,
+ * typeahead, alt-menü açma) `@angular/aria/menu`'nün `Menu` pattern'inden
+ * `hostDirectives` ile geliyor — `Select`'in listbox'ıyla AYNI görsel dil
+ * (rounded-lg, shadow-2, bg-overlay).
+ *
+ * `hostDirectives` uygulanan bir directive'in KENDİ `exportAs`'ı (`ngMenu`)
+ * host elemanda hâlâ kullanılabilir (Angular directive composition API'sinin
+ * dokümante edilmiş davranışı) — bu yüzden `MenuTrigger`'ın `[menu]`
+ * girdisine doğrudan `#menu="ngMenu"` verilebiliyor, ayrı bir forward'a
+ * gerek yok.
+ */
+class Menu {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Menu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: Menu, isStandalone: true, selector: "mf-menu", host: { classAttribute: "block max-h-64 min-w-[10rem] overflow-auto rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2" }, exportAs: ["mfMenu"], hostDirectives: [{ directive: i1.Menu, inputs: ["wrap", "wrap", "disabled", "disabled", "typeaheadDelay", "typeaheadDelay"], outputs: ["itemSelected", "itemSelected"] }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Menu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-menu',
+                    exportAs: 'mfMenu',
+                    hostDirectives: [
+                        {
+                            directive: Menu$1,
+                            inputs: ['wrap', 'disabled', 'typeaheadDelay'],
+                            outputs: ['itemSelected'],
+                        },
+                    ],
+                    host: {
+                        class: 'block max-h-64 min-w-[10rem] overflow-auto rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2',
+                    },
+                    template: '<ng-content />',
+                }]
+        }] });
+
+const menuItemVariants = cva('flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted transition-colors duration-fast ease-emphasis active:scale-[0.99]', {
+    variants: {
+        active: {
+            true: 'bg-surface-alt text-fg',
+            false: '',
+        },
+        disabled: {
+            true: 'pointer-events-none opacity-50 active:scale-100',
+            false: '',
+        },
+    },
+    defaultVariants: { active: false, disabled: false },
+});
+
+/** `<button mfMenuItem value="delete">Sil</button>` — `mf-menu` içine konur. */
+class MenuItem {
+    ariaMenuItem = inject(MenuItem$1);
+    classes = computed(() => cn(menuItemVariants({
+        active: this.ariaMenuItem.active(),
+        disabled: this.ariaMenuItem.disabled(),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: MenuItem, isStandalone: true, selector: "button[mfMenuItem], div[mfMenuItem]", host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1.MenuItem, inputs: ["value", "value", "disabled", "disabled", "id", "id"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[mfMenuItem], div[mfMenuItem]',
+                    hostDirectives: [{ directive: MenuItem$1, inputs: ['value', 'disabled', 'id'] }],
+                    host: { '[class]': 'classes()' },
+                }]
+        }] });
+
+/**
+ * `<button mfMenuTrigger [menu]="menuRef" cdkOverlayOrigin #origin="cdkOverlayOrigin">Aç</button>`
+ * — `[menu]`'ye `mf-menu`'nün `#ref="ngMenu"` template referansını ver.
+ * Pozisyonlama (floating panel) bu directive'in İŞİ DEĞİL — `@angular/aria/menu`
+ * headless, konum bilgisi taşımıyor; `mf-popover`'ın `[open]="trigger.expanded()"`
+ * ile beslenmesi gerekiyor (bkz. playground'daki Menu demosu, `(closed)`
+ * çıktısında `trigger.close()` çağırarak iki state'i senkron tutma deseni).
+ */
+class MenuTrigger {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: MenuTrigger, isStandalone: true, selector: "[mfMenuTrigger]", exportAs: ["mfMenuTrigger"], hostDirectives: [{ directive: i1.MenuTrigger, inputs: ["menu", "menu", "disabled", "disabled"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfMenuTrigger]',
+                    exportAs: 'mfMenuTrigger',
+                    hostDirectives: [{ directive: MenuTrigger$1, inputs: ['menu', 'disabled'] }],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Menu, MenuItem, MenuTrigger, menuItemVariants };
+//# sourceMappingURL=mesgflow-ui-kit-menu.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-menu.mjs","sources":["../../../projects/ui-kit/menu/menu.ts","../../../projects/ui-kit/menu/menu.variants.ts","../../../projects/ui-kit/menu/menu-item.ts","../../../projects/ui-kit/menu/menu-trigger.ts","../../../projects/ui-kit/menu/mesgflow-ui-kit-menu.ts"],"sourcesContent":["import { Menu as AriaMenu } from '@angular/aria/menu';\r\nimport { Component } from '@angular/core';\r\n\r\n/**\r\n * `<mf-menu #menu=\"ngMenu\" (itemSelected)=\"onSelect($event)\"><button mfMenuItem value=\"a\">A</button></mf-menu>`\r\n * — genelde bir `mf-popover` içine konur, tetikleyici için `mfMenuTrigger`\r\n * kullanılır (bkz. `menu-trigger.ts`). ARIA/klavye (ok tuşu navigasyonu,\r\n * typeahead, alt-menü açma) `@angular/aria/menu`'nün `Menu` pattern'inden\r\n * `hostDirectives` ile geliyor — `Select`'in listbox'ıyla AYNI görsel dil\r\n * (rounded-lg, shadow-2, bg-overlay).\r\n *\r\n * `hostDirectives` uygulanan bir directive'in KENDİ `exportAs`'ı (`ngMenu`)\r\n * host elemanda hâlâ kullanılabilir (Angular directive composition API'sinin\r\n * dokümante edilmiş davranışı) — bu yüzden `MenuTrigger`'ın `[menu]`\r\n * girdisine doğrudan `#menu=\"ngMenu\"` verilebiliyor, ayrı bir forward'a\r\n * gerek yok.\r\n */\r\n@Component({\r\n  selector: 'mf-menu',\r\n  exportAs: 'mfMenu',\r\n  hostDirectives: [\r\n    {\r\n      directive: AriaMenu,\r\n      inputs: ['wrap', 'disabled', 'typeaheadDelay'],\r\n      outputs: ['itemSelected'],\r\n    },\r\n  ],\r\n  host: {\r\n    class:\r\n      'block max-h-64 min-w-[10rem] overflow-auto rounded-lg border border-hairline bg-overlay p-1 text-sm shadow-2',\r\n  },\r\n  template: '<ng-content />',\r\n})\r\nexport class Menu {}\r\n","import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const menuItemVariants = cva(\r\n  'flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-1.5 text-fg-muted transition-colors duration-fast ease-emphasis active:scale-[0.99]',\r\n  {\r\n    variants: {\r\n      active: {\r\n        true: 'bg-surface-alt text-fg',\r\n        false: '',\r\n      },\r\n      disabled: {\r\n        true: 'pointer-events-none opacity-50 active:scale-100',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: { active: false, disabled: false },\r\n  },\r\n);\r\n\r\nexport type MenuItemActive = VariantProps<typeof menuItemVariants>['active'];\r\n","import { MenuItem as AriaMenuItem } from '@angular/aria/menu';\r\nimport { Directive, computed, inject } from '@angular/core';\r\nimport { cn } from '@mesgflow/ui-kit/core';\r\nimport { menuItemVariants } from './menu.variants';\r\n\r\n/** `<button mfMenuItem value=\"delete\">Sil</button>` — `mf-menu` içine konur. */\r\n@Directive({\r\n  selector: 'button[mfMenuItem], div[mfMenuItem]',\r\n  hostDirectives: [{ directive: AriaMenuItem, inputs: ['value', 'disabled', 'id'] }],\r\n  host: { '[class]': 'classes()' },\r\n})\r\nexport class MenuItem<V> {\r\n  private readonly ariaMenuItem = inject<AriaMenuItem<V>>(AriaMenuItem);\r\n\r\n  protected readonly classes = computed(() =>\r\n    cn(\r\n      menuItemVariants({\r\n        active: this.ariaMenuItem.active(),\r\n        disabled: this.ariaMenuItem.disabled(),\r\n      }),\r\n    ),\r\n  );\r\n}\r\n","import { MenuTrigger as AriaMenuTrigger } from '@angular/aria/menu';\r\nimport { Directive } from '@angular/core';\r\n\r\n/**\r\n * `<button mfMenuTrigger [menu]=\"menuRef\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">Aç</button>`\r\n * — `[menu]`'ye `mf-menu`'nün `#ref=\"ngMenu\"` template referansını ver.\r\n * Pozisyonlama (floating panel) bu directive'in İŞİ DEĞİL — `@angular/aria/menu`\r\n * headless, konum bilgisi taşımıyor; `mf-popover`'ın `[open]=\"trigger.expanded()\"`\r\n * ile beslenmesi gerekiyor (bkz. playground'daki Menu demosu, `(closed)`\r\n * çıktısında `trigger.close()` çağırarak iki state'i senkron tutma deseni).\r\n */\r\n@Directive({\r\n  selector: '[mfMenuTrigger]',\r\n  exportAs: 'mfMenuTrigger',\r\n  hostDirectives: [{ directive: AriaMenuTrigger, inputs: ['menu', 'disabled'] }],\r\n})\r\nexport class MenuTrigger {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["AriaMenu","AriaMenuItem","AriaMenuTrigger"],"mappings":"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"}

package/fesm2022/mesgflow-ui-kit-number-input.mjs

@@ -0,0 +1,153 @@
+import * as i0 from '@angular/core';
+import { model, input, computed, signal, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Input, InputGroup, InputPrefix, InputSuffix } from '@mesgflow/ui-kit/input';
+
+/** Sürükleyerek değiştirmede kaç piksel sürüklemenin BİR `step()` ilerlemeye karşılık geldiği — Figma/After Effects gibi araçlardaki yaygın "scrubber" deseniyle AYNI kaba değer. */
+const DRAG_PIXELS_PER_STEP = 4;
+/**
+ * `<mf-number-input [(value)]="padding" [min]="0" [max]="64" [step]="4" unit="px" />`
+ *
+ * `Select`'in `ControlValueAccessor` deseni tekrarlanıyor (bkz. select.ts
+ * üstündeki not) — native değil, `NG_VALUE_ACCESSOR`'ı KENDİSİ sağlamak
+ * zorunda. Klavye (yukarı/aşağı ok, PageUp/PageDown ±10×step) + stepper
+ * butonları (mouse-only, `tabindex="-1"` — gerçek `spinbutton` semantiği
+ * input'un kendisinde) HER ZAMAN TAM işlevsellik sağlıyor.
+ *
+ * Sürükleyerek değiştirme (Kademe 12 paket BV — önceden "v1 kapsamı dışı"
+ * bırakılmıştı) — SADECE `unit()` VERİLMİŞSE (`px` etiketi gibi) o etiket
+ * yatay sürüklenebilir bir "scrubber" olur (`pointerdown`+`setPointerCapture`
+ * ile sürükleme YAKALANIR, imleç `ew-resize` olur). `unit` YOKSA (boş
+ * string) sürükleme EKLENMEDİ — dekoratif bir tutamaç elementi olmadan
+ * kullanıcının "burayı sürükleyebilirim" sezgisi YOK, YENİ bir görsel
+ * eleman eklemek gerekirdi (kapsam dışı). Bu, ERİŞİLEBİLİRLİK açısından
+ * bir GERİLEME DEĞİL — klavye ZATEN aynı işlevselliği (yukarı/aşağı ok)
+ * tam olarak sağlıyor, sürükleme SADECE mouse kullanıcıları için EK bir
+ * kısayol (stepper butonlarının `tabindex="-1"` olmasıyla AYNI ilke).
+ */
+class NumberInput {
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    unit = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    hasError = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    canDecrement = computed(() => !this.disabled() && (this.min() == null || (this.value() ?? 0) > this.min()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDecrement" }] : /* istanbul ignore next */ []));
+    canIncrement = computed(() => !this.disabled() && (this.max() == null || (this.value() ?? 0) < this.max()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canIncrement" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    dragStartClientX = 0;
+    dragStartValue = 0;
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    clamp(next) {
+        let v = next;
+        if (this.min() != null)
+            v = Math.max(this.min(), v);
+        if (this.max() != null)
+            v = Math.min(this.max(), v);
+        return v;
+    }
+    adjust(delta) {
+        if (this.disabled())
+            return;
+        const next = this.clamp((this.value() ?? 0) + delta);
+        this.value.set(next);
+        this.onChange(next);
+    }
+    onInputChange(raw) {
+        const parsed = raw.trim() === '' ? null : Number(raw);
+        const next = parsed === null || Number.isNaN(parsed) ? null : this.clamp(parsed);
+        this.value.set(next);
+        this.onChange(next);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this.adjust(this.step());
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.adjust(-this.step());
+                break;
+            case 'PageUp':
+                event.preventDefault();
+                this.adjust(this.step() * 10);
+                break;
+            case 'PageDown':
+                event.preventDefault();
+                this.adjust(-this.step() * 10);
+                break;
+        }
+    }
+    // --- Sürükleyerek değiştirme (Kademe 12 paket BV) — bkz. class üstündeki not. ---
+    onUnitPointerDown(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragging.set(true);
+        this.dragStartClientX = event.clientX;
+        this.dragStartValue = this.value() ?? 0;
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }
+    onUnitPointerMove(event) {
+        if (!this.dragging())
+            return;
+        const deltaSteps = Math.round((event.clientX - this.dragStartClientX) / DRAG_PIXELS_PER_STEP);
+        const next = this.clamp(this.dragStartValue + deltaSteps * this.step());
+        if (next !== this.value()) {
+            this.value.set(next);
+            this.onChange(next);
+        }
+    }
+    onUnitPointerUp(event) {
+        if (!this.dragging())
+            return;
+        this.dragging.set(false);
+        event.currentTarget.releasePointerCapture(event.pointerId);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NumberInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NumberInput, isStandalone: true, selector: "mf-number-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "inline-flex" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumberInput), multi: true },
+        ], exportAs: ["mfNumberInput"], ngImport: i0, template: "<mf-input-group [padded]=\"false\" [hasError]=\"hasError()\" [disabled]=\"disabled()\">\r\n  <button\r\n    type=\"button\"\r\n    mfInputPrefix\r\n    class=\"w-8 justify-center rounded-s-md text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-alt hover:text-fg disabled:pointer-events-none disabled:opacity-50\"\r\n    [disabled]=\"!canDecrement()\"\r\n    (click)=\"adjust(-step())\"\r\n    tabindex=\"-1\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <span mfIcon [size]=\"16\">remove</span>\r\n  </button>\r\n  <input\r\n    mfInput\r\n    type=\"text\"\r\n    inputmode=\"decimal\"\r\n    role=\"spinbutton\"\r\n    class=\"min-w-0 flex-1 border-0 bg-transparent px-1 py-1.5 text-center shadow-none focus-visible:outline-none disabled:cursor-not-allowed\"\r\n    [value]=\"value() ?? ''\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"max()\"\r\n    [attr.aria-valuenow]=\"value()\"\r\n    (input)=\"onInputChange($any($event.target).value)\"\r\n    (blur)=\"onBlur()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n  />\r\n  @if (unit()) {\r\n    <span\r\n      class=\"number-input-unit flex shrink-0 items-center pe-2 text-sm text-fg-subtle select-none\"\r\n      [class.cursor-ew-resize]=\"!disabled()\"\r\n      aria-hidden=\"true\"\r\n      (pointerdown)=\"onUnitPointerDown($event)\"\r\n      (pointermove)=\"onUnitPointerMove($event)\"\r\n      (pointerup)=\"onUnitPointerUp($event)\"\r\n      >{{ unit() }}</span\r\n    >\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    mfInputSuffix\r\n    class=\"w-8 justify-center rounded-e-md text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-alt hover:text-fg disabled:pointer-events-none disabled:opacity-50\"\r\n    [disabled]=\"!canIncrement()\"\r\n    (click)=\"adjust(step())\"\r\n    tabindex=\"-1\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <span mfIcon [size]=\"16\">add</span>\r\n  </button>\r\n</mf-input-group>\r\n", dependencies: [{ kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }, { kind: "component", type: InputGroup, selector: "mf-input-group", inputs: ["size", "disabled", "hasError", "padded", "wrap"], exportAs: ["mfInputGroup"] }, { kind: "directive", type: InputPrefix, selector: "[mfInputPrefix]", inputs: ["addon"] }, { kind: "directive", type: InputSuffix, selector: "[mfInputSuffix]", inputs: ["addon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NumberInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-number-input', exportAs: 'mfNumberInput', host: { class: 'inline-flex' }, imports: [Icon, Input, InputGroup, InputPrefix, InputSuffix], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumberInput), multi: true },
+                    ], template: "<mf-input-group [padded]=\"false\" [hasError]=\"hasError()\" [disabled]=\"disabled()\">\r\n  <button\r\n    type=\"button\"\r\n    mfInputPrefix\r\n    class=\"w-8 justify-center rounded-s-md text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-alt hover:text-fg disabled:pointer-events-none disabled:opacity-50\"\r\n    [disabled]=\"!canDecrement()\"\r\n    (click)=\"adjust(-step())\"\r\n    tabindex=\"-1\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <span mfIcon [size]=\"16\">remove</span>\r\n  </button>\r\n  <input\r\n    mfInput\r\n    type=\"text\"\r\n    inputmode=\"decimal\"\r\n    role=\"spinbutton\"\r\n    class=\"min-w-0 flex-1 border-0 bg-transparent px-1 py-1.5 text-center shadow-none focus-visible:outline-none disabled:cursor-not-allowed\"\r\n    [value]=\"value() ?? ''\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"max()\"\r\n    [attr.aria-valuenow]=\"value()\"\r\n    (input)=\"onInputChange($any($event.target).value)\"\r\n    (blur)=\"onBlur()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n  />\r\n  @if (unit()) {\r\n    <span\r\n      class=\"number-input-unit flex shrink-0 items-center pe-2 text-sm text-fg-subtle select-none\"\r\n      [class.cursor-ew-resize]=\"!disabled()\"\r\n      aria-hidden=\"true\"\r\n      (pointerdown)=\"onUnitPointerDown($event)\"\r\n      (pointermove)=\"onUnitPointerMove($event)\"\r\n      (pointerup)=\"onUnitPointerUp($event)\"\r\n      >{{ unit() }}</span\r\n    >\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    mfInputSuffix\r\n    class=\"w-8 justify-center rounded-e-md text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-alt hover:text-fg disabled:pointer-events-none disabled:opacity-50\"\r\n    [disabled]=\"!canIncrement()\"\r\n    (click)=\"adjust(step())\"\r\n    tabindex=\"-1\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <span mfIcon [size]=\"16\">add</span>\r\n  </button>\r\n</mf-input-group>\r\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NumberInput };
+//# sourceMappingURL=mesgflow-ui-kit-number-input.mjs.map

package/fesm2022/mesgflow-ui-kit-number-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-number-input.mjs","sources":["../../../projects/ui-kit/number-input/number-input.ts","../../../projects/ui-kit/number-input/number-input.html","../../../projects/ui-kit/number-input/mesgflow-ui-kit-number-input.ts"],"sourcesContent":["import { Component, computed, forwardRef, input, model, signal } from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Input, InputGroup, InputPrefix, InputSuffix } from '@mesgflow/ui-kit/input';\r\n\r\n/** Sürükleyerek değiştirmede kaç piksel sürüklemenin BİR `step()` ilerlemeye karşılık geldiği — Figma/After Effects gibi araçlardaki yaygın \"scrubber\" deseniyle AYNI kaba değer. */\r\nconst DRAG_PIXELS_PER_STEP = 4;\r\n\r\n/**\r\n * `<mf-number-input [(value)]=\"padding\" [min]=\"0\" [max]=\"64\" [step]=\"4\" unit=\"px\" />`\r\n *\r\n * `Select`'in `ControlValueAccessor` deseni tekrarlanıyor (bkz. select.ts\r\n * üstündeki not) — native değil, `NG_VALUE_ACCESSOR`'ı KENDİSİ sağlamak\r\n * zorunda. Klavye (yukarı/aşağı ok, PageUp/PageDown ±10×step) + stepper\r\n * butonları (mouse-only, `tabindex=\"-1\"` — gerçek `spinbutton` semantiği\r\n * input'un kendisinde) HER ZAMAN TAM işlevsellik sağlıyor.\r\n *\r\n * Sürükleyerek değiştirme (Kademe 12 paket BV — önceden \"v1 kapsamı dışı\"\r\n * bırakılmıştı) — SADECE `unit()` VERİLMİŞSE (`px` etiketi gibi) o etiket\r\n * yatay sürüklenebilir bir \"scrubber\" olur (`pointerdown`+`setPointerCapture`\r\n * ile sürükleme YAKALANIR, imleç `ew-resize` olur). `unit` YOKSA (boş\r\n * string) sürükleme EKLENMEDİ — dekoratif bir tutamaç elementi olmadan\r\n * kullanıcının \"burayı sürükleyebilirim\" sezgisi YOK, YENİ bir görsel\r\n * eleman eklemek gerekirdi (kapsam dışı). Bu, ERİŞİLEBİLİRLİK açısından\r\n * bir GERİLEME DEĞİL — klavye ZATEN aynı işlevselliği (yukarı/aşağı ok)\r\n * tam olarak sağlıyor, sürükleme SADECE mouse kullanıcıları için EK bir\r\n * kısayol (stepper butonlarının `tabindex=\"-1\"` olmasıyla AYNI ilke).\r\n */\r\n@Component({\r\n  selector: 'mf-number-input',\r\n  exportAs: 'mfNumberInput',\r\n  host: { class: 'inline-flex' },\r\n  imports: [Icon, Input, InputGroup, InputPrefix, InputSuffix],\r\n  templateUrl: './number-input.html',\r\n  providers: [\r\n    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumberInput), multi: true },\r\n  ],\r\n})\r\nexport class NumberInput implements ControlValueAccessor {\r\n  readonly value = model<number | null>(null);\r\n  readonly min = input<number | null>(null);\r\n  readonly max = input<number | null>(null);\r\n  readonly step = input(1);\r\n  readonly unit = input('');\r\n  readonly disabled = input(false);\r\n  readonly hasError = input(false);\r\n  readonly ariaLabel = input('');\r\n\r\n  private onChange: (value: number | null) => void = () => {};\r\n  private onTouched: () => void = () => {};\r\n\r\n  protected readonly canDecrement = computed(\r\n    () => !this.disabled() && (this.min() == null || (this.value() ?? 0) > this.min()!),\r\n  );\r\n  protected readonly canIncrement = computed(\r\n    () => !this.disabled() && (this.max() == null || (this.value() ?? 0) < this.max()!),\r\n  );\r\n\r\n  protected readonly dragging = signal(false);\r\n  private dragStartClientX = 0;\r\n  private dragStartValue = 0;\r\n\r\n  writeValue(value: number | null): void {\r\n    this.value.set(value);\r\n  }\r\n\r\n  registerOnChange(fn: (value: number | null) => void): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  protected clamp(next: number): number {\r\n    let v = next;\r\n    if (this.min() != null) v = Math.max(this.min()!, v);\r\n    if (this.max() != null) v = Math.min(this.max()!, v);\r\n    return v;\r\n  }\r\n\r\n  protected adjust(delta: number): void {\r\n    if (this.disabled()) return;\r\n    const next = this.clamp((this.value() ?? 0) + delta);\r\n    this.value.set(next);\r\n    this.onChange(next);\r\n  }\r\n\r\n  protected onInputChange(raw: string): void {\r\n    const parsed = raw.trim() === '' ? null : Number(raw);\r\n    const next = parsed === null || Number.isNaN(parsed) ? null : this.clamp(parsed);\r\n    this.value.set(next);\r\n    this.onChange(next);\r\n  }\r\n\r\n  protected onBlur(): void {\r\n    this.onTouched();\r\n  }\r\n\r\n  protected onKeydown(event: KeyboardEvent): void {\r\n    switch (event.key) {\r\n      case 'ArrowUp':\r\n        event.preventDefault();\r\n        this.adjust(this.step());\r\n        break;\r\n      case 'ArrowDown':\r\n        event.preventDefault();\r\n        this.adjust(-this.step());\r\n        break;\r\n      case 'PageUp':\r\n        event.preventDefault();\r\n        this.adjust(this.step() * 10);\r\n        break;\r\n      case 'PageDown':\r\n        event.preventDefault();\r\n        this.adjust(-this.step() * 10);\r\n        break;\r\n    }\r\n  }\r\n\r\n  // --- Sürükleyerek değiştirme (Kademe 12 paket BV) — bkz. class üstündeki not. ---\r\n  protected onUnitPointerDown(event: PointerEvent): void {\r\n    if (this.disabled()) return;\r\n    event.preventDefault();\r\n    this.dragging.set(true);\r\n    this.dragStartClientX = event.clientX;\r\n    this.dragStartValue = this.value() ?? 0;\r\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\r\n  }\r\n\r\n  protected onUnitPointerMove(event: PointerEvent): void {\r\n    if (!this.dragging()) return;\r\n    const deltaSteps = Math.round((event.clientX - this.dragStartClientX) / DRAG_PIXELS_PER_STEP);\r\n    const next = this.clamp(this.dragStartValue + deltaSteps * this.step());\r\n    if (next !== this.value()) {\r\n      this.value.set(next);\r\n      this.onChange(next);\r\n    }\r\n  }\r\n\r\n  protected onUnitPointerUp(event: PointerEvent): void {\r\n    if (!this.dragging()) return;\r\n    this.dragging.set(false);\r\n    (event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);\r\n    this.onTouched();\r\n  }\r\n}\r\n","<mf-input-group [padded]=\"false\" [hasError]=\"hasError()\" [disabled]=\"disabled()\">\r\n  <button\r\n    type=\"button\"\r\n    mfInputPrefix\r\n    class=\"w-8 justify-center rounded-s-md text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-alt hover:text-fg disabled:pointer-events-none disabled:opacity-50\"\r\n    [disabled]=\"!canDecrement()\"\r\n    (click)=\"adjust(-step())\"\r\n    tabindex=\"-1\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <span mfIcon [size]=\"16\">remove</span>\r\n  </button>\r\n  <input\r\n    mfInput\r\n    type=\"text\"\r\n    inputmode=\"decimal\"\r\n    role=\"spinbutton\"\r\n    class=\"min-w-0 flex-1 border-0 bg-transparent px-1 py-1.5 text-center shadow-none focus-visible:outline-none disabled:cursor-not-allowed\"\r\n    [value]=\"value() ?? ''\"\r\n    [disabled]=\"disabled()\"\r\n    [attr.aria-label]=\"ariaLabel() || null\"\r\n    [attr.aria-valuemin]=\"min()\"\r\n    [attr.aria-valuemax]=\"max()\"\r\n    [attr.aria-valuenow]=\"value()\"\r\n    (input)=\"onInputChange($any($event.target).value)\"\r\n    (blur)=\"onBlur()\"\r\n    (keydown)=\"onKeydown($event)\"\r\n  />\r\n  @if (unit()) {\r\n    <span\r\n      class=\"number-input-unit flex shrink-0 items-center pe-2 text-sm text-fg-subtle select-none\"\r\n      [class.cursor-ew-resize]=\"!disabled()\"\r\n      aria-hidden=\"true\"\r\n      (pointerdown)=\"onUnitPointerDown($event)\"\r\n      (pointermove)=\"onUnitPointerMove($event)\"\r\n      (pointerup)=\"onUnitPointerUp($event)\"\r\n      >{{ unit() }}</span\r\n    >\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    mfInputSuffix\r\n    class=\"w-8 justify-center rounded-e-md text-fg-subtle transition-colors duration-fast ease-emphasis hover:bg-surface-alt hover:text-fg disabled:pointer-events-none disabled:opacity-50\"\r\n    [disabled]=\"!canIncrement()\"\r\n    (click)=\"adjust(step())\"\r\n    tabindex=\"-1\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <span mfIcon [size]=\"16\">add</span>\r\n  </button>\r\n</mf-input-group>\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-otp-input.mjs

@@ -0,0 +1,164 @@
+import * as i0 from '@angular/core';
+import { model, input, inject, computed, viewChildren, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessorBase, MF_OTP_INPUT_LABELS } from '@mesgflow/ui-kit/core';
+import { Input } from '@mesgflow/ui-kit/input';
+
+/**
+ * `<mf-otp-input [(value)]="code" [length]="6" />` — her biri TEK bir
+ * hane taşıyan `length()` kadar kutu. Değer İÇSEL olarak `length()`
+ * uzunluğa boşlukla ("henüz doldurulmadı") doldurulur, SADECE SONDAKİ
+ * boşluklar `value` model'ine yazılırken kesilir — ARADAKİ bir boşluk
+ * (ör. kullanıcı 3. kutuya tıklayıp DOĞRUDAN yazarsa, 1-2 boş kalır)
+ * teknik olarak MÜMKÜN ama normal sıralı doldurma/yapıştırma akışında
+ * hiç OLUŞMAZ.
+ *
+ * Çoklu karakter TEK bir kutuya girerse (mobil SMS OTP otomatik doldurma
+ * — işletim sistemi TÜM kodu ilk kutunun `input` event'ine basar) VEYA
+ * yapıştırılırsa, `fillFrom(0, ...)` TÜM kutuları doldurur — ikisi de
+ * AYNI yardımcıyı paylaşıyor.
+ */
+class OtpInput extends ValueAccessorBase {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    length = input(6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    hasError = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    otpLabels = inject(MF_OTP_INPUT_LABELS);
+    effectiveAriaLabel = computed(() => this.ariaLabel() ?? this.otpLabels().ariaLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
+    indexes = computed(() => Array.from({ length: this.length() }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indexes" }] : /* istanbul ignore next */ []));
+    boxes = viewChildren('boxEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxes" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.value.set(value ?? '');
+    }
+    digitAt(i) {
+        const c = this.value()[i];
+        return c && c !== ' ' ? c : '';
+    }
+    onInput(i, event) {
+        const raw = event.target.value;
+        const digits = raw.replace(/\D/g, '');
+        if (digits.length > 1) {
+            // Mobil SMS otomatik doldurma — tüm kod tek bir input event'inde gelir.
+            this.fillFrom(0, digits);
+            return;
+        }
+        this.setDigit(i, digits);
+        if (digits && i < this.length() - 1)
+            this.focusBox(i + 1);
+    }
+    onKeydown(i, event) {
+        if (event.key === 'Backspace' && !this.digitAt(i) && i > 0) {
+            event.preventDefault();
+            this.setDigit(i - 1, '');
+            this.focusBox(i - 1);
+        }
+        else if (event.key === 'ArrowLeft' && i > 0) {
+            event.preventDefault();
+            this.focusBox(i - 1);
+        }
+        else if (event.key === 'ArrowRight' && i < this.length() - 1) {
+            event.preventDefault();
+            this.focusBox(i + 1);
+        }
+    }
+    onPaste(event) {
+        event.preventDefault();
+        const digits = (event.clipboardData?.getData('text') ?? '').replace(/\D/g, '');
+        if (digits)
+            this.fillFrom(0, digits);
+    }
+    /** Odaklanınca mevcut haneyi SEÇER — yazmak EKLEMEK yerine DEĞİŞTİRİR (standart OTP kutusu davranışı). */
+    onFocus(event) {
+        event.target.select();
+    }
+    setDigit(i, digit) {
+        const chars = this.value().padEnd(this.length(), ' ').split('');
+        chars[i] = digit || ' ';
+        this.commit(chars.join('').replace(/ +$/, ''));
+    }
+    fillFrom(startIndex, digits) {
+        const chars = this.value().padEnd(this.length(), ' ').split('');
+        for (let j = 0; j < digits.length && startIndex + j < this.length(); j++) {
+            chars[startIndex + j] = digits[j];
+        }
+        this.commit(chars.join('').replace(/ +$/, ''));
+        this.focusBox(Math.min(startIndex + digits.length, this.length() - 1));
+    }
+    commit(next) {
+        this.value.set(next);
+        this.onChange(next);
+        this.onTouched();
+    }
+    focusBox(i) {
+        this.boxes()[i]?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OtpInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OtpInput, isStandalone: true, selector: "mf-otp-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "inline-flex gap-2" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => OtpInput), multi: true }], viewQueries: [{ propertyName: "boxes", predicate: ["boxEl"], descendants: true, isSignal: true }], exportAs: ["mfOtpInput"], usesInheritance: true, ngImport: i0, template: `
+    @for (i of indexes(); track i) {
+      <input
+        mfInput
+        #boxEl
+        type="text"
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        maxlength="1"
+        class="h-11 w-11 text-center text-lg"
+        [value]="digitAt(i)"
+        [disabled]="disabled()"
+        [hasError]="hasError()"
+        [attr.aria-label]="effectiveAriaLabel() + ' ' + (i + 1) + '/' + length()"
+        (input)="onInput(i, $event)"
+        (keydown)="onKeydown(i, $event)"
+        (paste)="onPaste($event)"
+        (focus)="onFocus($event)"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: Input, selector: "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", inputs: ["size", "hasError", "autosize", "minRows", "maxRows"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OtpInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-otp-input',
+                    exportAs: 'mfOtpInput',
+                    imports: [Input],
+                    host: { class: 'inline-flex gap-2' },
+                    template: `
+    @for (i of indexes(); track i) {
+      <input
+        mfInput
+        #boxEl
+        type="text"
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        maxlength="1"
+        class="h-11 w-11 text-center text-lg"
+        [value]="digitAt(i)"
+        [disabled]="disabled()"
+        [hasError]="hasError()"
+        [attr.aria-label]="effectiveAriaLabel() + ' ' + (i + 1) + '/' + length()"
+        (input)="onInput(i, $event)"
+        (keydown)="onKeydown(i, $event)"
+        (paste)="onPaste($event)"
+        (focus)="onFocus($event)"
+      />
+    }
+  `,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => OtpInput), multi: true }],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], boxes: [{ type: i0.ViewChildren, args: ['boxEl', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OtpInput };
+//# sourceMappingURL=mesgflow-ui-kit-otp-input.mjs.map

package/fesm2022/mesgflow-ui-kit-otp-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-otp-input.mjs","sources":["../../../projects/ui-kit/otp-input/otp-input.ts","../../../projects/ui-kit/otp-input/mesgflow-ui-kit-otp-input.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ElementRef,\r\n  computed,\r\n  forwardRef,\r\n  inject,\r\n  input,\r\n  model,\r\n  viewChildren,\r\n} from '@angular/core';\r\nimport { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';\r\nimport { MF_OTP_INPUT_LABELS, ValueAccessorBase } from '@mesgflow/ui-kit/core';\r\nimport { Input } from '@mesgflow/ui-kit/input';\r\n\r\n/**\r\n * `<mf-otp-input [(value)]=\"code\" [length]=\"6\" />` — her biri TEK bir\r\n * hane taşıyan `length()` kadar kutu. Değer İÇSEL olarak `length()`\r\n * uzunluğa boşlukla (\"henüz doldurulmadı\") doldurulur, SADECE SONDAKİ\r\n * boşluklar `value` model'ine yazılırken kesilir — ARADAKİ bir boşluk\r\n * (ör. kullanıcı 3. kutuya tıklayıp DOĞRUDAN yazarsa, 1-2 boş kalır)\r\n * teknik olarak MÜMKÜN ama normal sıralı doldurma/yapıştırma akışında\r\n * hiç OLUŞMAZ.\r\n *\r\n * Çoklu karakter TEK bir kutuya girerse (mobil SMS OTP otomatik doldurma\r\n * — işletim sistemi TÜM kodu ilk kutunun `input` event'ine basar) VEYA\r\n * yapıştırılırsa, `fillFrom(0, ...)` TÜM kutuları doldurur — ikisi de\r\n * AYNI yardımcıyı paylaşıyor.\r\n */\r\n@Component({\r\n  selector: 'mf-otp-input',\r\n  exportAs: 'mfOtpInput',\r\n  imports: [Input],\r\n  host: { class: 'inline-flex gap-2' },\r\n  template: `\r\n    @for (i of indexes(); track i) {\r\n      <input\r\n        mfInput\r\n        #boxEl\r\n        type=\"text\"\r\n        inputmode=\"numeric\"\r\n        autocomplete=\"one-time-code\"\r\n        maxlength=\"1\"\r\n        class=\"h-11 w-11 text-center text-lg\"\r\n        [value]=\"digitAt(i)\"\r\n        [disabled]=\"disabled()\"\r\n        [hasError]=\"hasError()\"\r\n        [attr.aria-label]=\"effectiveAriaLabel() + ' ' + (i + 1) + '/' + length()\"\r\n        (input)=\"onInput(i, $event)\"\r\n        (keydown)=\"onKeydown(i, $event)\"\r\n        (paste)=\"onPaste($event)\"\r\n        (focus)=\"onFocus($event)\"\r\n      />\r\n    }\r\n  `,\r\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => OtpInput), multi: true }],\r\n})\r\nexport class OtpInput extends ValueAccessorBase<string> implements ControlValueAccessor {\r\n  readonly value = model('');\r\n  readonly length = input(6);\r\n  readonly disabled = input(false);\r\n  readonly hasError = input(false);\r\n  readonly ariaLabel = input<string>();\r\n\r\n  private readonly otpLabels = inject(MF_OTP_INPUT_LABELS);\r\n  protected readonly effectiveAriaLabel = computed(\r\n    () => this.ariaLabel() ?? this.otpLabels().ariaLabel,\r\n  );\r\n\r\n  protected readonly indexes = computed(() => Array.from({ length: this.length() }, (_, i) => i));\r\n\r\n  private readonly boxes = viewChildren<ElementRef<HTMLInputElement>>('boxEl');\r\n\r\n  writeValue(value: string): void {\r\n    this.value.set(value ?? '');\r\n  }\r\n\r\n  protected digitAt(i: number): string {\r\n    const c = this.value()[i];\r\n    return c && c !== ' ' ? c : '';\r\n  }\r\n\r\n  protected onInput(i: number, event: Event): void {\r\n    const raw = (event.target as HTMLInputElement).value;\r\n    const digits = raw.replace(/\\D/g, '');\r\n    if (digits.length > 1) {\r\n      // Mobil SMS otomatik doldurma — tüm kod tek bir input event'inde gelir.\r\n      this.fillFrom(0, digits);\r\n      return;\r\n    }\r\n    this.setDigit(i, digits);\r\n    if (digits && i < this.length() - 1) this.focusBox(i + 1);\r\n  }\r\n\r\n  protected onKeydown(i: number, event: KeyboardEvent): void {\r\n    if (event.key === 'Backspace' && !this.digitAt(i) && i > 0) {\r\n      event.preventDefault();\r\n      this.setDigit(i - 1, '');\r\n      this.focusBox(i - 1);\r\n    } else if (event.key === 'ArrowLeft' && i > 0) {\r\n      event.preventDefault();\r\n      this.focusBox(i - 1);\r\n    } else if (event.key === 'ArrowRight' && i < this.length() - 1) {\r\n      event.preventDefault();\r\n      this.focusBox(i + 1);\r\n    }\r\n  }\r\n\r\n  protected onPaste(event: ClipboardEvent): void {\r\n    event.preventDefault();\r\n    const digits = (event.clipboardData?.getData('text') ?? '').replace(/\\D/g, '');\r\n    if (digits) this.fillFrom(0, digits);\r\n  }\r\n\r\n  /** Odaklanınca mevcut haneyi SEÇER — yazmak EKLEMEK yerine DEĞİŞTİRİR (standart OTP kutusu davranışı). */\r\n  protected onFocus(event: FocusEvent): void {\r\n    (event.target as HTMLInputElement).select();\r\n  }\r\n\r\n  private setDigit(i: number, digit: string): void {\r\n    const chars = this.value().padEnd(this.length(), ' ').split('');\r\n    chars[i] = digit || ' ';\r\n    this.commit(chars.join('').replace(/ +$/, ''));\r\n  }\r\n\r\n  private fillFrom(startIndex: number, digits: string): void {\r\n    const chars = this.value().padEnd(this.length(), ' ').split('');\r\n    for (let j = 0; j < digits.length && startIndex + j < this.length(); j++) {\r\n      chars[startIndex + j] = digits[j]!;\r\n    }\r\n    this.commit(chars.join('').replace(/ +$/, ''));\r\n    this.focusBox(Math.min(startIndex + digits.length, this.length() - 1));\r\n  }\r\n\r\n  private commit(next: string): void {\r\n    this.value.set(next);\r\n    this.onChange(next);\r\n    this.onTouched();\r\n  }\r\n\r\n  private focusBox(i: number): void {\r\n    this.boxes()[i]?.nativeElement.focus();\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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"}