@mesgflow/ui-kit 0.6.0 → 0.7.0

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

@@ -1,16 +1,19 @@
 import * as i0 from '@angular/core';
-import { input, Component } from '@angular/core';
+import { input, inject, ElementRef, computed, afterRenderEffect, Component } from '@angular/core';
+import { nextId } from '@mesgflow/ui-kit/core';
 
 /**
- * `<mf-field label="E-posta" [error]="emailError()">
- *    <input mfInput type="email" [id]="..." />
+ * `<mf-field label="E-posta" for="email" [error]="emailError()" hint="İş adresiniz">
+ *    <input mfInput id="email" type="email" />
  *  </mf-field>`
- * `for`/`id` eşleşmesi (a11y) ÇAĞIRAN ekranın sorumluluğunda — bu component
- * label'ı otomatik bir input'a bağlamıyor (projected content'in id'sini bilmiyor).
  *
- * `error`, `string | undefined` kabul eder (sadece `string` DEĞİL) — çağıran
- * genelde `shared/forms/http-error.ts`'teki `resolveFieldError()`'ı doğrudan
- * bağlar, o da hata yokken `undefined` döner (boş string'e zorlamaya gerek yok).
+ * `for` verildiğinde alan, içindeki `#for` kontrolünü OTOMATİK bağlar:
+ * - `aria-describedby` → ipucu/hata metninin id'si (kontrolün mevcut
+ *   describedby değerleri korunur, yalnızca kendi id'lerini ekler/çıkarır),
+ * - `aria-invalid="true"` → hata varken,
+ * - `aria-required="true"` → `required` iken.
+ * Hata metni `role="alert"` DEĞİL, `aria-live="polite"` — her tuş vuruşunda
+ * ekran okuyucuyu kesmesin. `error` `string | undefined` kabul eder.
  */
 class Field {
     label = input('', /* @ts-ignore */
@@ -23,16 +26,54 @@ class Field {
     ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     required = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    /** `true` ise kalan yüksekliği doldurur (`flex-1 min-h-0`) — projected içeriğin kendi tek scroll alanı olduğu durumlar için (ör. uzun bir liste içeren form, bkz. `Dialog.fillBody`). */
+    /** `true` ise kalan yüksekliği doldurur (`flex-1 min-h-0`). */
     grow = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "grow" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    baseId = nextId('mf-field');
+    hintId = `${this.baseId}-hint`;
+    errorId = `${this.baseId}-error`;
+    /** Şu an görünen açıklama metninin id'si (hata ipucunun yerine geçer). */
+    describedId = computed(() => this.error() ? this.errorId : this.hint() ? this.hintId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterRenderEffect(() => {
+            const id = this.for();
+            const described = this.describedId();
+            const invalid = !!this.error();
+            const required = this.required();
+            if (!id)
+                return;
+            const control = this.host.nativeElement.querySelector(`#${CSS.escape(id)}`);
+            if (!control)
+                return;
+            const own = new Set([this.hintId, this.errorId]);
+            const ids = (control.getAttribute('aria-describedby') ?? '')
+                .split(/\s+/)
+                .filter((x) => x && !own.has(x));
+            if (described)
+                ids.push(described);
+            if (ids.length)
+                control.setAttribute('aria-describedby', ids.join(' '));
+            else
+                control.removeAttribute('aria-describedby');
+            if (invalid)
+                control.setAttribute('aria-invalid', 'true');
+            else
+                control.removeAttribute('aria-invalid');
+            if (required)
+                control.setAttribute('aria-required', 'true');
+            else
+                control.removeAttribute('aria-required');
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Field, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Field, isStandalone: true, selector: "mf-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\" [class.min-h-0]=\"grow()\" [class.flex-1]=\"grow()\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"for() || null\" class=\"text-label text-fg-muted\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-danger\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n  <ng-content />\r\n  @if (error()) {\r\n    <p class=\"text-xs text-danger\">{{ error() }}</p>\r\n  } @else if (hint()) {\r\n    <p class=\"text-xs text-fg-subtle\">{{ hint() }}</p>\r\n  }\r\n</div>\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Field, isStandalone: true, selector: "mf-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\" [class.min-h-0]=\"grow()\" [class.flex-1]=\"grow()\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"for() || null\" class=\"text-label text-fg-muted\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-danger\" aria-hidden=\"true\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n  <ng-content />\r\n  <div aria-live=\"polite\" class=\"empty:hidden\">\r\n    @if (error()) {\r\n      <p\r\n        [id]=\"errorId\"\r\n        class=\"m-0 flex items-center gap-1 text-xs text-danger animate-fade-in\"\r\n        [textContent]=\"error()\"\r\n      ></p>\r\n    } @else if (hint()) {\r\n      <p [id]=\"hintId\" class=\"m-0 text-xs text-fg-subtle\" [textContent]=\"hint()\"></p>\r\n    }\r\n  </div>\r\n</div>\r\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Field, decorators: [{
             type: Component,
-            args: [{ selector: 'mf-field', host: { class: 'block' }, template: "<div class=\"flex flex-col gap-1.5\" [class.min-h-0]=\"grow()\" [class.flex-1]=\"grow()\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"for() || null\" class=\"text-label text-fg-muted\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-danger\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n  <ng-content />\r\n  @if (error()) {\r\n    <p class=\"text-xs text-danger\">{{ error() }}</p>\r\n  } @else if (hint()) {\r\n    <p class=\"text-xs text-fg-subtle\">{{ hint() }}</p>\r\n  }\r\n</div>\r\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }] } });
+            args: [{ selector: 'mf-field', host: { class: 'block' }, template: "<div class=\"flex flex-col gap-1.5\" [class.min-h-0]=\"grow()\" [class.flex-1]=\"grow()\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"for() || null\" class=\"text-label text-fg-muted\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-danger\" aria-hidden=\"true\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n  <ng-content />\r\n  <div aria-live=\"polite\" class=\"empty:hidden\">\r\n    @if (error()) {\r\n      <p\r\n        [id]=\"errorId\"\r\n        class=\"m-0 flex items-center gap-1 text-xs text-danger animate-fade-in\"\r\n        [textContent]=\"error()\"\r\n      ></p>\r\n    } @else if (hint()) {\r\n      <p [id]=\"hintId\" class=\"m-0 text-xs text-fg-subtle\" [textContent]=\"hint()\"></p>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"mesgflow-ui-kit-field.mjs","sources":["../../../projects/ui-kit/field/field.ts","../../../projects/ui-kit/field/field.html","../../../projects/ui-kit/field/mesgflow-ui-kit-field.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\n\r\n/**\r\n * `<mf-field label=\"E-posta\" [error]=\"emailError()\">\r\n *    <input mfInput type=\"email\" [id]=\"...\" />\r\n *  </mf-field>`\r\n * `for`/`id` eşleşmesi (a11y) ÇAĞIRAN ekranın sorumluluğunda — bu component\r\n * label'ı otomatik bir input'a bağlamıyor (projected content'in id'sini bilmiyor).\r\n *\r\n * `error`, `string | undefined` kabul eder (sadece `string` DEĞİL) — çağıran\r\n * genelde `shared/forms/http-error.ts`'teki `resolveFieldError()`'ı doğrudan\r\n * bağlar, o da hata yokken `undefined` döner (boş string'e zorlamaya gerek yok).\r\n */\r\n@Component({\r\n  selector: 'mf-field',\r\n  host: { class: 'block' },\r\n  templateUrl: './field.html',\r\n})\r\nexport class Field {\r\n  readonly label = input<string>('');\r\n  readonly for = input<string>('');\r\n  readonly hint = input<string>('');\r\n  readonly error = input<string | undefined>('');\r\n  readonly required = input(false);\r\n  /** `true` ise kalan yüksekliği doldurur (`flex-1 min-h-0`) — projected içeriğin kendi tek scroll alanı olduğu durumlar için (ör. uzun bir liste içeren form, bkz. `Dialog.fillBody`). */\r\n  readonly grow = input(false);\r\n}\r\n","<div class=\"flex flex-col gap-1.5\" [class.min-h-0]=\"grow()\" [class.flex-1]=\"grow()\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"for() || null\" class=\"text-label text-fg-muted\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-danger\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n  <ng-content />\r\n  @if (error()) {\r\n    <p class=\"text-xs text-danger\">{{ error() }}</p>\r\n  } @else if (hint()) {\r\n    <p class=\"text-xs text-fg-subtle\">{{ hint() }}</p>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;;;;;AAUG;MAMU,KAAK,CAAA;IACP,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;IACzB,GAAG,GAAG,KAAK,CAAS,EAAE;4EAAC;IACvB,IAAI,GAAG,KAAK,CAAS,EAAE;6EAAC;IACxB,KAAK,GAAG,KAAK,CAAqB,EAAE;8EAAC;IACrC,QAAQ,GAAG,KAAK,CAAC,KAAK;iFAAC;;IAEvB,IAAI,GAAG,KAAK,CAAC,KAAK;6EAAC;uGAPjB,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAL,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAK,g0BClBlB,ohBAgBA,EAAA,CAAA;;2FDEa,KAAK,EAAA,UAAA,EAAA,CAAA;kBALjB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,IAAA,EACd,EAAE,KAAK,EAAE,OAAO,EAAE,EAAA,QAAA,EAAA,ohBAAA,EAAA;;;AEf1B;;AAEG;;"}
+{"version":3,"file":"mesgflow-ui-kit-field.mjs","sources":["../../../projects/ui-kit/field/field.ts","../../../projects/ui-kit/field/field.html","../../../projects/ui-kit/field/mesgflow-ui-kit-field.ts"],"sourcesContent":["import { Component, ElementRef, afterRenderEffect, computed, inject, input } from '@angular/core';\r\nimport { nextId } from '@mesgflow/ui-kit/core';\r\n\r\n/**\r\n * `<mf-field label=\"E-posta\" for=\"email\" [error]=\"emailError()\" hint=\"İş adresiniz\">\r\n *    <input mfInput id=\"email\" type=\"email\" />\r\n *  </mf-field>`\r\n *\r\n * `for` verildiğinde alan, içindeki `#for` kontrolünü OTOMATİK bağlar:\r\n * - `aria-describedby` → ipucu/hata metninin id'si (kontrolün mevcut\r\n *   describedby değerleri korunur, yalnızca kendi id'lerini ekler/çıkarır),\r\n * - `aria-invalid=\"true\"` → hata varken,\r\n * - `aria-required=\"true\"` → `required` iken.\r\n * Hata metni `role=\"alert\"` DEĞİL, `aria-live=\"polite\"` — her tuş vuruşunda\r\n * ekran okuyucuyu kesmesin. `error` `string | undefined` kabul eder.\r\n */\r\n@Component({\r\n  selector: 'mf-field',\r\n  host: { class: 'block' },\r\n  templateUrl: './field.html',\r\n})\r\nexport class Field {\r\n  readonly label = input<string>('');\r\n  readonly for = input<string>('');\r\n  readonly hint = input<string>('');\r\n  readonly error = input<string | undefined>('');\r\n  readonly required = input(false);\r\n  /** `true` ise kalan yüksekliği doldurur (`flex-1 min-h-0`). */\r\n  readonly grow = input(false);\r\n\r\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\r\n  private readonly baseId = nextId('mf-field');\r\n  protected readonly hintId = `${this.baseId}-hint`;\r\n  protected readonly errorId = `${this.baseId}-error`;\r\n\r\n  /** Şu an görünen açıklama metninin id'si (hata ipucunun yerine geçer). */\r\n  protected readonly describedId = computed(() =>\r\n    this.error() ? this.errorId : this.hint() ? this.hintId : null,\r\n  );\r\n\r\n  constructor() {\r\n    afterRenderEffect(() => {\r\n      const id = this.for();\r\n      const described = this.describedId();\r\n      const invalid = !!this.error();\r\n      const required = this.required();\r\n      if (!id) return;\r\n      const control = this.host.nativeElement.querySelector<HTMLElement>(`#${CSS.escape(id)}`);\r\n      if (!control) return;\r\n\r\n      const own = new Set([this.hintId, this.errorId]);\r\n      const ids = (control.getAttribute('aria-describedby') ?? '')\r\n        .split(/\\s+/)\r\n        .filter((x) => x && !own.has(x));\r\n      if (described) ids.push(described);\r\n      if (ids.length) control.setAttribute('aria-describedby', ids.join(' '));\r\n      else control.removeAttribute('aria-describedby');\r\n\r\n      if (invalid) control.setAttribute('aria-invalid', 'true');\r\n      else control.removeAttribute('aria-invalid');\r\n      if (required) control.setAttribute('aria-required', 'true');\r\n      else control.removeAttribute('aria-required');\r\n    });\r\n  }\r\n}\r\n","<div class=\"flex flex-col gap-1.5\" [class.min-h-0]=\"grow()\" [class.flex-1]=\"grow()\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"for() || null\" class=\"text-label text-fg-muted\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"text-danger\" aria-hidden=\"true\">*</span>\r\n      }\r\n    </label>\r\n  }\r\n  <ng-content />\r\n  <div aria-live=\"polite\" class=\"empty:hidden\">\r\n    @if (error()) {\r\n      <p\r\n        [id]=\"errorId\"\r\n        class=\"m-0 flex items-center gap-1 text-xs text-danger animate-fade-in\"\r\n        [textContent]=\"error()\"\r\n      ></p>\r\n    } @else if (hint()) {\r\n      <p [id]=\"hintId\" class=\"m-0 text-xs text-fg-subtle\" [textContent]=\"hint()\"></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-file-upload.mjs

@@ -0,0 +1,356 @@
+import * as i0 from '@angular/core';
+import { model, input, booleanAttribute, output, inject, computed, DestroyRef, Component } from '@angular/core';
+import { Button } from '@mesgflow/ui-kit/button';
+import { MF_FILE_UPLOAD_LABELS, nextId } from '@mesgflow/ui-kit/core';
+import { Dropzone } from '@mesgflow/ui-kit/dropzone';
+import { Icon } from '@mesgflow/ui-kit/icon';
+import { Progress } from '@mesgflow/ui-kit/progress';
+
+/** İnsan okunur boyut — birimler evrensel (B/KB/MB/GB), sayı biçimi yerele göre. */
+function formatBytes(bytes, locale) {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let value = bytes;
+    let i = 0;
+    while (value >= 1024 && i < units.length - 1) {
+        value /= 1024;
+        i++;
+    }
+    const digits = i === 0 || value >= 10 ? 0 : 1;
+    return `${new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value)} ${units[i]}`;
+}
+const ICON_BY_TYPE = [
+    [/^image\//, 'image'],
+    [/^video\//, 'movie'],
+    [/^audio\//, 'music_note'],
+    [/pdf$/, 'picture_as_pdf'],
+    [/(zip|compressed|tar)/, 'folder_zip'],
+];
+/**
+ * `<mf-file-upload [uploader]="upload" [(items)]="files" accept="image/*" multiple />`
+ *
+ * Sürükle-bırak alanı + dosya listesi. `uploader` verilirse bileşen yüklemeyi
+ * KENDİSİ yürütür: eşzamanlı en çok `concurrency` dosya, dosya başına ilerleme
+ * çubuğu, iptal (AbortSignal), hatada "Yeniden dene". Verilmezse yalnızca
+ * listeyi tutar (tüketici `items`'ı kendisi günceller).
+ *
+ * Her satırın durumu `aria-live` ile duyurulur; ilerleme `role="progressbar"`.
+ */
+class FileUpload {
+    items = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    uploader = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploader" }] : /* istanbul ignore next */ []));
+    accept = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    maxSizeBytes = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSizeBytes" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Aynı anda yüklenecek en çok dosya. */
+    concurrency = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "concurrency" }] : /* istanbul ignore next */ []));
+    rejected = output();
+    removed = output();
+    /** Tüm kuyruk bittiğinde (başarılı + başarısız). */
+    settled = output();
+    labels = inject(MF_FILE_UPLOAD_LABELS);
+    controllers = new Map();
+    listLabel = computed(() => this.labels().files.replace('{count}', String(this.items().length)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.controllers.forEach((c) => c.abort()));
+    }
+    size(bytes) {
+        return formatBytes(bytes);
+    }
+    iconFor(item) {
+        if (item.status === 'error')
+            return 'error';
+        if (item.status === 'done')
+            return 'check_circle';
+        return ICON_BY_TYPE.find(([re]) => re.test(item.file.type))?.[1] ?? 'description';
+    }
+    statusText(item) {
+        const l = this.labels();
+        switch (item.status) {
+            case 'queued':
+                return l.queued;
+            case 'uploading':
+                return `${l.uploading} ${item.progress}%`;
+            case 'done':
+                return l.done;
+            default:
+                return item.error || l.failed;
+        }
+    }
+    add(files) {
+        const next = files.map((file) => ({
+            id: nextId('mf-upload'),
+            file,
+            progress: 0,
+            status: this.uploader() ? 'queued' : 'done',
+        }));
+        this.items.update((list) => (this.multiple() ? [...list, ...next] : next));
+        this.pump();
+    }
+    retry(item) {
+        this.patch(item.id, { status: 'queued', progress: 0, error: undefined });
+        this.pump();
+    }
+    remove(item) {
+        this.controllers.get(item.id)?.abort();
+        this.controllers.delete(item.id);
+        this.items.update((list) => list.filter((i) => i.id !== item.id));
+        this.removed.emit(item);
+        this.pump();
+    }
+    /** Kuyruğu işletir — boş yuva kadar `queued` öğeyi başlatır. */
+    pump() {
+        const uploader = this.uploader();
+        if (!uploader)
+            return;
+        const active = this.items().filter((i) => i.status === 'uploading').length;
+        const waiting = this.items().filter((i) => i.status === 'queued');
+        for (const item of waiting.slice(0, Math.max(0, this.concurrency() - active))) {
+            this.start(item, uploader);
+        }
+        if (!active && !waiting.length && this.items().length)
+            this.settled.emit(this.items());
+    }
+    start(item, uploader) {
+        const controller = new AbortController();
+        this.controllers.set(item.id, controller);
+        this.patch(item.id, { status: 'uploading', progress: 0 });
+        uploader(item.file, (pct) => this.patch(item.id, { progress: Math.round(Math.min(100, Math.max(0, pct))) }), controller.signal)
+            .then(() => {
+            if (controller.signal.aborted)
+                return;
+            this.patch(item.id, { status: 'done', progress: 100 });
+        })
+            .catch((err) => {
+            if (controller.signal.aborted)
+                return;
+            this.patch(item.id, {
+                status: 'error',
+                error: err instanceof Error && err.message ? err.message : undefined,
+            });
+        })
+            .finally(() => {
+            this.controllers.delete(item.id);
+            if (!controller.signal.aborted)
+                this.pump();
+        });
+    }
+    patch(id, changes) {
+        this.items.update((list) => list.map((i) => (i.id === id ? { ...i, ...changes } : i)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FileUpload, isStandalone: true, selector: "mf-file-upload", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, uploader: { classPropertyName: "uploader", publicName: "uploader", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSizeBytes: { classPropertyName: "maxSizeBytes", publicName: "maxSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, concurrency: { classPropertyName: "concurrency", publicName: "concurrency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", rejected: "rejected", removed: "removed", settled: "settled" }, host: { classAttribute: "flex flex-col gap-3" }, exportAs: ["mfFileUpload"], ngImport: i0, template: `
+    <mf-dropzone
+      [accept]="accept()"
+      [multiple]="multiple()"
+      [maxSizeBytes]="maxSizeBytes()"
+      [disabled]="disabled()"
+      [label]="label()"
+      (filesSelected)="add($event)"
+      (rejected)="rejected.emit($event)"
+    />
+
+    @if (items().length) {
+      <ul
+        class="m-0 flex list-none flex-col divide-y divide-hairline overflow-hidden rounded-lg border border-hairline bg-surface p-0"
+        [attr.aria-label]="listLabel()"
+      >
+        @for (item of items(); track item.id) {
+          <li class="flex items-center gap-3 px-3 py-2.5 animate-list-in">
+            <span
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md"
+              [class]="
+                item.status === 'error'
+                  ? 'bg-danger-tint text-danger'
+                  : 'bg-surface-sunken text-fg-muted'
+              "
+            >
+              <span mfIcon [size]="18">{{ iconFor(item) }}</span>
+            </span>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-baseline justify-between gap-3">
+                <p class="truncate text-sm font-medium text-fg">{{ item.file.name }}</p>
+                <span class="shrink-0 text-xs text-fg-subtle tabular-nums">{{
+                  size(item.file.size)
+                }}</span>
+              </div>
+              @if (item.status === 'uploading' || item.status === 'queued') {
+                <mf-progress
+                  class="mt-1.5"
+                  size="sm"
+                  [value]="item.progress"
+                  [indeterminate]="item.status === 'queued'"
+                  [ariaLabel]="item.file.name"
+                />
+              }
+              <p
+                class="mt-0.5 text-xs"
+                aria-live="polite"
+                [class]="
+                  item.status === 'error'
+                    ? 'text-danger'
+                    : item.status === 'done'
+                      ? 'text-success'
+                      : 'text-fg-subtle'
+                "
+              >
+                {{ statusText(item) }}
+              </p>
+            </div>
+            <div class="flex shrink-0 items-center gap-1">
+              @if (item.status === 'error' && uploader()) {
+                <button mfButton size="xs" appearance="ghost" tone="neutral" (click)="retry(item)">
+                  {{ labels().retry }}
+                </button>
+              }
+              @if (item.status === 'uploading' || item.status === 'queued') {
+                <button
+                  mfButton
+                  size="icon-sm"
+                  shape="square"
+                  appearance="ghost"
+                  tone="neutral"
+                  [attr.aria-label]="labels().cancel + ': ' + item.file.name"
+                  (click)="remove(item)"
+                >
+                  <span mfIcon [size]="16">close</span>
+                </button>
+              } @else {
+                <button
+                  mfButton
+                  size="icon-sm"
+                  shape="square"
+                  appearance="ghost"
+                  tone="neutral"
+                  [attr.aria-label]="labels().remove + ': ' + item.file.name"
+                  (click)="remove(item)"
+                >
+                  <span mfIcon [size]="16">delete</span>
+                </button>
+              }
+            </div>
+          </li>
+        }
+      </ul>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: Dropzone, selector: "mf-dropzone", inputs: ["accept", "multiple", "maxSizeBytes", "disabled", "label"], outputs: ["filesSelected", "rejected"], exportAs: ["mfDropzone"] }, { kind: "component", type: Button, selector: "button[mfButton], a[mfButton]", inputs: ["tone", "appearance", "size", "shape", "type", "loading", "iconStart", "iconEnd"], exportAs: ["mfButton"] }, { kind: "directive", type: Icon, selector: "span[mfIcon]", inputs: ["size", "filled"] }, { kind: "component", type: Progress, selector: "mf-progress", inputs: ["value", "indeterminate", "size", "variant", "tone", "showValue", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FileUpload, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-file-upload',
+                    exportAs: 'mfFileUpload',
+                    imports: [Dropzone, Button, Icon, Progress],
+                    host: { class: 'flex flex-col gap-3' },
+                    template: `
+    <mf-dropzone
+      [accept]="accept()"
+      [multiple]="multiple()"
+      [maxSizeBytes]="maxSizeBytes()"
+      [disabled]="disabled()"
+      [label]="label()"
+      (filesSelected)="add($event)"
+      (rejected)="rejected.emit($event)"
+    />
+
+    @if (items().length) {
+      <ul
+        class="m-0 flex list-none flex-col divide-y divide-hairline overflow-hidden rounded-lg border border-hairline bg-surface p-0"
+        [attr.aria-label]="listLabel()"
+      >
+        @for (item of items(); track item.id) {
+          <li class="flex items-center gap-3 px-3 py-2.5 animate-list-in">
+            <span
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md"
+              [class]="
+                item.status === 'error'
+                  ? 'bg-danger-tint text-danger'
+                  : 'bg-surface-sunken text-fg-muted'
+              "
+            >
+              <span mfIcon [size]="18">{{ iconFor(item) }}</span>
+            </span>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-baseline justify-between gap-3">
+                <p class="truncate text-sm font-medium text-fg">{{ item.file.name }}</p>
+                <span class="shrink-0 text-xs text-fg-subtle tabular-nums">{{
+                  size(item.file.size)
+                }}</span>
+              </div>
+              @if (item.status === 'uploading' || item.status === 'queued') {
+                <mf-progress
+                  class="mt-1.5"
+                  size="sm"
+                  [value]="item.progress"
+                  [indeterminate]="item.status === 'queued'"
+                  [ariaLabel]="item.file.name"
+                />
+              }
+              <p
+                class="mt-0.5 text-xs"
+                aria-live="polite"
+                [class]="
+                  item.status === 'error'
+                    ? 'text-danger'
+                    : item.status === 'done'
+                      ? 'text-success'
+                      : 'text-fg-subtle'
+                "
+              >
+                {{ statusText(item) }}
+              </p>
+            </div>
+            <div class="flex shrink-0 items-center gap-1">
+              @if (item.status === 'error' && uploader()) {
+                <button mfButton size="xs" appearance="ghost" tone="neutral" (click)="retry(item)">
+                  {{ labels().retry }}
+                </button>
+              }
+              @if (item.status === 'uploading' || item.status === 'queued') {
+                <button
+                  mfButton
+                  size="icon-sm"
+                  shape="square"
+                  appearance="ghost"
+                  tone="neutral"
+                  [attr.aria-label]="labels().cancel + ': ' + item.file.name"
+                  (click)="remove(item)"
+                >
+                  <span mfIcon [size]="16">close</span>
+                </button>
+              } @else {
+                <button
+                  mfButton
+                  size="icon-sm"
+                  shape="square"
+                  appearance="ghost"
+                  tone="neutral"
+                  [attr.aria-label]="labels().remove + ': ' + item.file.name"
+                  (click)="remove(item)"
+                >
+                  <span mfIcon [size]="16">delete</span>
+                </button>
+              }
+            </div>
+          </li>
+        }
+      </ul>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], uploader: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploader", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeBytes", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], concurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "concurrency", required: false }] }], rejected: [{ type: i0.Output, args: ["rejected"] }], removed: [{ type: i0.Output, args: ["removed"] }], settled: [{ type: i0.Output, args: ["settled"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FileUpload, formatBytes };
+//# sourceMappingURL=mesgflow-ui-kit-file-upload.mjs.map

package/fesm2022/mesgflow-ui-kit-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mesgflow-ui-kit-file-upload.mjs","sources":["../../../projects/ui-kit/file-upload/file-upload.ts","../../../projects/ui-kit/file-upload/mesgflow-ui-kit-file-upload.ts"],"sourcesContent":["import {\r\n  Component,\r\n  DestroyRef,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport { Button } from '@mesgflow/ui-kit/button';\r\nimport { MF_FILE_UPLOAD_LABELS, nextId } from '@mesgflow/ui-kit/core';\r\nimport { Dropzone, type DropzoneRejection } from '@mesgflow/ui-kit/dropzone';\r\nimport { Icon } from '@mesgflow/ui-kit/icon';\r\nimport { Progress } from '@mesgflow/ui-kit/progress';\r\n\r\nexport type UploadStatus = 'queued' | 'uploading' | 'done' | 'error';\r\n\r\nexport interface UploadItem {\r\n  id: string;\r\n  file: File;\r\n  /** 0–100 */\r\n  progress: number;\r\n  status: UploadStatus;\r\n  error?: string;\r\n}\r\n\r\n/**\r\n * Yükleme işlevi — ilerlemeyi `report(0..100)` ile bildirir, iptal için\r\n * `signal`'i dinler; başarıda çözülür, hatada `Error` fırlatır.\r\n */\r\nexport type Uploader = (\r\n  file: File,\r\n  report: (percent: number) => void,\r\n  signal: AbortSignal,\r\n) => Promise<void>;\r\n\r\n/** İnsan okunur boyut — birimler evrensel (B/KB/MB/GB), sayı biçimi yerele göre. */\r\nexport function formatBytes(bytes: number, locale?: string): string {\r\n  const units = ['B', 'KB', 'MB', 'GB'];\r\n  let value = bytes;\r\n  let i = 0;\r\n  while (value >= 1024 && i < units.length - 1) {\r\n    value /= 1024;\r\n    i++;\r\n  }\r\n  const digits = i === 0 || value >= 10 ? 0 : 1;\r\n  return `${new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value)} ${units[i]}`;\r\n}\r\n\r\nconst ICON_BY_TYPE: [RegExp, string][] = [\r\n  [/^image\\//, 'image'],\r\n  [/^video\\//, 'movie'],\r\n  [/^audio\\//, 'music_note'],\r\n  [/pdf$/, 'picture_as_pdf'],\r\n  [/(zip|compressed|tar)/, 'folder_zip'],\r\n];\r\n\r\n/**\r\n * `<mf-file-upload [uploader]=\"upload\" [(items)]=\"files\" accept=\"image/*\" multiple />`\r\n *\r\n * Sürükle-bırak alanı + dosya listesi. `uploader` verilirse bileşen yüklemeyi\r\n * KENDİSİ yürütür: eşzamanlı en çok `concurrency` dosya, dosya başına ilerleme\r\n * çubuğu, iptal (AbortSignal), hatada \"Yeniden dene\". Verilmezse yalnızca\r\n * listeyi tutar (tüketici `items`'ı kendisi günceller).\r\n *\r\n * Her satırın durumu `aria-live` ile duyurulur; ilerleme `role=\"progressbar\"`.\r\n */\r\n@Component({\r\n  selector: 'mf-file-upload',\r\n  exportAs: 'mfFileUpload',\r\n  imports: [Dropzone, Button, Icon, Progress],\r\n  host: { class: 'flex flex-col gap-3' },\r\n  template: `\r\n    <mf-dropzone\r\n      [accept]=\"accept()\"\r\n      [multiple]=\"multiple()\"\r\n      [maxSizeBytes]=\"maxSizeBytes()\"\r\n      [disabled]=\"disabled()\"\r\n      [label]=\"label()\"\r\n      (filesSelected)=\"add($event)\"\r\n      (rejected)=\"rejected.emit($event)\"\r\n    />\r\n\r\n    @if (items().length) {\r\n      <ul\r\n        class=\"m-0 flex list-none flex-col divide-y divide-hairline overflow-hidden rounded-lg border border-hairline bg-surface p-0\"\r\n        [attr.aria-label]=\"listLabel()\"\r\n      >\r\n        @for (item of items(); track item.id) {\r\n          <li class=\"flex items-center gap-3 px-3 py-2.5 animate-list-in\">\r\n            <span\r\n              class=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md\"\r\n              [class]=\"\r\n                item.status === 'error'\r\n                  ? 'bg-danger-tint text-danger'\r\n                  : 'bg-surface-sunken text-fg-muted'\r\n              \"\r\n            >\r\n              <span mfIcon [size]=\"18\">{{ iconFor(item) }}</span>\r\n            </span>\r\n            <div class=\"min-w-0 flex-1\">\r\n              <div class=\"flex items-baseline justify-between gap-3\">\r\n                <p class=\"truncate text-sm font-medium text-fg\">{{ item.file.name }}</p>\r\n                <span class=\"shrink-0 text-xs text-fg-subtle tabular-nums\">{{\r\n                  size(item.file.size)\r\n                }}</span>\r\n              </div>\r\n              @if (item.status === 'uploading' || item.status === 'queued') {\r\n                <mf-progress\r\n                  class=\"mt-1.5\"\r\n                  size=\"sm\"\r\n                  [value]=\"item.progress\"\r\n                  [indeterminate]=\"item.status === 'queued'\"\r\n                  [ariaLabel]=\"item.file.name\"\r\n                />\r\n              }\r\n              <p\r\n                class=\"mt-0.5 text-xs\"\r\n                aria-live=\"polite\"\r\n                [class]=\"\r\n                  item.status === 'error'\r\n                    ? 'text-danger'\r\n                    : item.status === 'done'\r\n                      ? 'text-success'\r\n                      : 'text-fg-subtle'\r\n                \"\r\n              >\r\n                {{ statusText(item) }}\r\n              </p>\r\n            </div>\r\n            <div class=\"flex shrink-0 items-center gap-1\">\r\n              @if (item.status === 'error' && uploader()) {\r\n                <button mfButton size=\"xs\" appearance=\"ghost\" tone=\"neutral\" (click)=\"retry(item)\">\r\n                  {{ labels().retry }}\r\n                </button>\r\n              }\r\n              @if (item.status === 'uploading' || item.status === 'queued') {\r\n                <button\r\n                  mfButton\r\n                  size=\"icon-sm\"\r\n                  shape=\"square\"\r\n                  appearance=\"ghost\"\r\n                  tone=\"neutral\"\r\n                  [attr.aria-label]=\"labels().cancel + ': ' + item.file.name\"\r\n                  (click)=\"remove(item)\"\r\n                >\r\n                  <span mfIcon [size]=\"16\">close</span>\r\n                </button>\r\n              } @else {\r\n                <button\r\n                  mfButton\r\n                  size=\"icon-sm\"\r\n                  shape=\"square\"\r\n                  appearance=\"ghost\"\r\n                  tone=\"neutral\"\r\n                  [attr.aria-label]=\"labels().remove + ': ' + item.file.name\"\r\n                  (click)=\"remove(item)\"\r\n                >\r\n                  <span mfIcon [size]=\"16\">delete</span>\r\n                </button>\r\n              }\r\n            </div>\r\n          </li>\r\n        }\r\n      </ul>\r\n    }\r\n  `,\r\n})\r\nexport class FileUpload {\r\n  readonly items = model<UploadItem[]>([]);\r\n  readonly uploader = input<Uploader | null>(null);\r\n  readonly accept = input('');\r\n  readonly multiple = input(false, { transform: booleanAttribute });\r\n  readonly maxSizeBytes = input<number | null>(null);\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly label = input<string>();\r\n  /** Aynı anda yüklenecek en çok dosya. */\r\n  readonly concurrency = input(3);\r\n\r\n  readonly rejected = output<DropzoneRejection[]>();\r\n  readonly removed = output<UploadItem>();\r\n  /** Tüm kuyruk bittiğinde (başarılı + başarısız). */\r\n  readonly settled = output<UploadItem[]>();\r\n\r\n  protected readonly labels = inject(MF_FILE_UPLOAD_LABELS);\r\n  private readonly controllers = new Map<string, AbortController>();\r\n\r\n  protected readonly listLabel = computed(() =>\r\n    this.labels().files.replace('{count}', String(this.items().length)),\r\n  );\r\n\r\n  constructor() {\r\n    inject(DestroyRef).onDestroy(() => this.controllers.forEach((c) => c.abort()));\r\n  }\r\n\r\n  protected size(bytes: number): string {\r\n    return formatBytes(bytes);\r\n  }\r\n\r\n  protected iconFor(item: UploadItem): string {\r\n    if (item.status === 'error') return 'error';\r\n    if (item.status === 'done') return 'check_circle';\r\n    return ICON_BY_TYPE.find(([re]) => re.test(item.file.type))?.[1] ?? 'description';\r\n  }\r\n\r\n  protected statusText(item: UploadItem): string {\r\n    const l = this.labels();\r\n    switch (item.status) {\r\n      case 'queued':\r\n        return l.queued;\r\n      case 'uploading':\r\n        return `${l.uploading} ${item.progress}%`;\r\n      case 'done':\r\n        return l.done;\r\n      default:\r\n        return item.error || l.failed;\r\n    }\r\n  }\r\n\r\n  protected add(files: File[]): void {\r\n    const next = files.map<UploadItem>((file) => ({\r\n      id: nextId('mf-upload'),\r\n      file,\r\n      progress: 0,\r\n      status: this.uploader() ? 'queued' : 'done',\r\n    }));\r\n    this.items.update((list) => (this.multiple() ? [...list, ...next] : next));\r\n    this.pump();\r\n  }\r\n\r\n  protected retry(item: UploadItem): void {\r\n    this.patch(item.id, { status: 'queued', progress: 0, error: undefined });\r\n    this.pump();\r\n  }\r\n\r\n  protected remove(item: UploadItem): void {\r\n    this.controllers.get(item.id)?.abort();\r\n    this.controllers.delete(item.id);\r\n    this.items.update((list) => list.filter((i) => i.id !== item.id));\r\n    this.removed.emit(item);\r\n    this.pump();\r\n  }\r\n\r\n  /** Kuyruğu işletir — boş yuva kadar `queued` öğeyi başlatır. */\r\n  private pump(): void {\r\n    const uploader = this.uploader();\r\n    if (!uploader) return;\r\n    const active = this.items().filter((i) => i.status === 'uploading').length;\r\n    const waiting = this.items().filter((i) => i.status === 'queued');\r\n    for (const item of waiting.slice(0, Math.max(0, this.concurrency() - active))) {\r\n      this.start(item, uploader);\r\n    }\r\n    if (!active && !waiting.length && this.items().length) this.settled.emit(this.items());\r\n  }\r\n\r\n  private start(item: UploadItem, uploader: Uploader): void {\r\n    const controller = new AbortController();\r\n    this.controllers.set(item.id, controller);\r\n    this.patch(item.id, { status: 'uploading', progress: 0 });\r\n    uploader(\r\n      item.file,\r\n      (pct) => this.patch(item.id, { progress: Math.round(Math.min(100, Math.max(0, pct))) }),\r\n      controller.signal,\r\n    )\r\n      .then(() => {\r\n        if (controller.signal.aborted) return;\r\n        this.patch(item.id, { status: 'done', progress: 100 });\r\n      })\r\n      .catch((err: unknown) => {\r\n        if (controller.signal.aborted) return;\r\n        this.patch(item.id, {\r\n          status: 'error',\r\n          error: err instanceof Error && err.message ? err.message : undefined,\r\n        });\r\n      })\r\n      .finally(() => {\r\n        this.controllers.delete(item.id);\r\n        if (!controller.signal.aborted) this.pump();\r\n      });\r\n  }\r\n\r\n  private patch(id: string, changes: Partial<UploadItem>): void {\r\n    this.items.update((list) => list.map((i) => (i.id === id ? { ...i, ...changes } : i)));\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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"}