npm - @cdevhub/ngx-tw - Versions diffs - 0.2.1 → 0.3.0 - Mend

@cdevhub/ngx-tw 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/README.md +264 -49
package/fesm2022/cdevhub-ngx-tw-accordion.mjs +11 -7
package/fesm2022/cdevhub-ngx-tw-accordion.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-alert.mjs +43 -29
package/fesm2022/cdevhub-ngx-tw-alert.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-aspect-ratio.mjs +103 -0
package/fesm2022/cdevhub-ngx-tw-aspect-ratio.mjs.map +1 -0
package/fesm2022/cdevhub-ngx-tw-avatar.mjs +56 -31
package/fesm2022/cdevhub-ngx-tw-avatar.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-badge.mjs +61 -35
package/fesm2022/cdevhub-ngx-tw-badge.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-breadcrumbs.mjs +154 -93
package/fesm2022/cdevhub-ngx-tw-breadcrumbs.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-button.mjs +24 -15
package/fesm2022/cdevhub-ngx-tw-button.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-calendar-luxon.mjs +3 -3
package/fesm2022/cdevhub-ngx-tw-calendar-luxon.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-calendar.mjs +408 -215
package/fesm2022/cdevhub-ngx-tw-calendar.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-card.mjs +33 -24
package/fesm2022/cdevhub-ngx-tw-card.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-carousel.mjs +144 -79
package/fesm2022/cdevhub-ngx-tw-carousel.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-checkbox.mjs +99 -47
package/fesm2022/cdevhub-ngx-tw-checkbox.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-code-block.mjs +34 -20
package/fesm2022/cdevhub-ngx-tw-code-block.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-collapsible.mjs +46 -29
package/fesm2022/cdevhub-ngx-tw-collapsible.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-combobox.mjs +195 -110
package/fesm2022/cdevhub-ngx-tw-combobox.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-command-palette.mjs +140 -73
package/fesm2022/cdevhub-ngx-tw-command-palette.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-core.mjs +16 -11
package/fesm2022/cdevhub-ngx-tw-core.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-date-picker.mjs +393 -149
package/fesm2022/cdevhub-ngx-tw-date-picker.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-date-range-picker.mjs +305 -150
package/fesm2022/cdevhub-ngx-tw-date-range-picker.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-dialog.mjs +56 -43
package/fesm2022/cdevhub-ngx-tw-dialog.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-empty-state.mjs +51 -33
package/fesm2022/cdevhub-ngx-tw-empty-state.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-file-upload.mjs +905 -0
package/fesm2022/cdevhub-ngx-tw-file-upload.mjs.map +1 -0
package/fesm2022/cdevhub-ngx-tw-flip-card.mjs +49 -26
package/fesm2022/cdevhub-ngx-tw-flip-card.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-form-field.mjs +133 -74
package/fesm2022/cdevhub-ngx-tw-form-field.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-icon-lucide.mjs +2 -2
package/fesm2022/cdevhub-ngx-tw-icon-lucide.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-icon.mjs +28 -17
package/fesm2022/cdevhub-ngx-tw-icon.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-input.mjs +37 -21
package/fesm2022/cdevhub-ngx-tw-input.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-item.mjs +33 -24
package/fesm2022/cdevhub-ngx-tw-item.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-menu.mjs +63 -48
package/fesm2022/cdevhub-ngx-tw-menu.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-number-input.mjs +622 -0
package/fesm2022/cdevhub-ngx-tw-number-input.mjs.map +1 -0
package/fesm2022/cdevhub-ngx-tw-paginator.mjs +137 -71
package/fesm2022/cdevhub-ngx-tw-paginator.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-popover.mjs +101 -46
package/fesm2022/cdevhub-ngx-tw-popover.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-progress-bar.mjs +57 -30
package/fesm2022/cdevhub-ngx-tw-progress-bar.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-radio.mjs +108 -57
package/fesm2022/cdevhub-ngx-tw-radio.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-segmented-control.mjs +46 -26
package/fesm2022/cdevhub-ngx-tw-segmented-control.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-select.mjs +217 -122
package/fesm2022/cdevhub-ngx-tw-select.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-separator.mjs +21 -12
package/fesm2022/cdevhub-ngx-tw-separator.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-sheet.mjs +58 -44
package/fesm2022/cdevhub-ngx-tw-sheet.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-skeleton.mjs +25 -14
package/fesm2022/cdevhub-ngx-tw-skeleton.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-slider.mjs +155 -79
package/fesm2022/cdevhub-ngx-tw-slider.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-sort.mjs +44 -25
package/fesm2022/cdevhub-ngx-tw-sort.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-spinner.mjs +29 -16
package/fesm2022/cdevhub-ngx-tw-spinner.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-split.mjs +72 -42
package/fesm2022/cdevhub-ngx-tw-split.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-stat.mjs +107 -64
package/fesm2022/cdevhub-ngx-tw-stat.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-stepper.mjs +113 -47
package/fesm2022/cdevhub-ngx-tw-stepper.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-switch.mjs +61 -32
package/fesm2022/cdevhub-ngx-tw-switch.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-tab-nav.mjs +88 -42
package/fesm2022/cdevhub-ngx-tw-tab-nav.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-table.mjs +266 -118
package/fesm2022/cdevhub-ngx-tw-table.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-tabs.mjs +101 -51
package/fesm2022/cdevhub-ngx-tw-tabs.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-tags-input.mjs +798 -0
package/fesm2022/cdevhub-ngx-tw-tags-input.mjs.map +1 -0
package/fesm2022/cdevhub-ngx-tw-textarea.mjs +11 -7
package/fesm2022/cdevhub-ngx-tw-textarea.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-theme.mjs +22 -14
package/fesm2022/cdevhub-ngx-tw-theme.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-time-picker.mjs +243 -95
package/fesm2022/cdevhub-ngx-tw-time-picker.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-timeline.mjs +149 -82
package/fesm2022/cdevhub-ngx-tw-timeline.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-toast.mjs +89 -55
package/fesm2022/cdevhub-ngx-tw-toast.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-tooltip.mjs +50 -28
package/fesm2022/cdevhub-ngx-tw-tooltip.mjs.map +1 -1
package/fesm2022/cdevhub-ngx-tw-transfer.mjs +1129 -0
package/fesm2022/cdevhub-ngx-tw-transfer.mjs.map +1 -0
package/fesm2022/cdevhub-ngx-tw-tree.mjs +554 -0
package/fesm2022/cdevhub-ngx-tw-tree.mjs.map +1 -0
package/fesm2022/cdevhub-ngx-tw.mjs +7 -0
package/fesm2022/cdevhub-ngx-tw.mjs.map +1 -1
package/package.json +45 -20
package/theme/index.css +10 -2
package/types/cdevhub-ngx-tw-aspect-ratio.d.ts +40 -0
package/types/cdevhub-ngx-tw-calendar.d.ts +39 -8
package/types/cdevhub-ngx-tw-command-palette.d.ts +7 -0
package/types/cdevhub-ngx-tw-date-picker.d.ts +36 -10
package/types/cdevhub-ngx-tw-file-upload.d.ts +250 -0
package/types/cdevhub-ngx-tw-form-field.d.ts +22 -3
package/types/cdevhub-ngx-tw-icon-lucide.d.ts +21 -3
package/types/cdevhub-ngx-tw-number-input.d.ts +130 -0
package/types/cdevhub-ngx-tw-popover.d.ts +8 -0
package/types/cdevhub-ngx-tw-stepper.d.ts +30 -2
package/types/cdevhub-ngx-tw-tab-nav.d.ts +8 -0
package/types/cdevhub-ngx-tw-table.d.ts +30 -1
package/types/cdevhub-ngx-tw-tabs.d.ts +8 -0
package/types/cdevhub-ngx-tw-tags-input.d.ts +217 -0
package/types/cdevhub-ngx-tw-time-picker.d.ts +31 -6
package/types/cdevhub-ngx-tw-transfer.d.ts +330 -0
package/types/cdevhub-ngx-tw-tree.d.ts +189 -0
package/types/cdevhub-ngx-tw.d.ts +7 -0

package/fesm2022/cdevhub-ngx-tw-file-upload.mjs ADDED Viewed

@@ -0,0 +1,905 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, booleanAttribute, output, ElementRef, DestroyRef, signal, contentChild, viewChild, computed, afterNextRender, isDevMode, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { NgControl, NgForm, FormGroupDirective, Validators } from '@angular/forms';
+import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isObservable, merge } from 'rxjs';
+import { tv } from 'tailwind-variants';
+import { TW_ERROR_STATE_MATCHER } from '@cdevhub/ngx-tw/core';
+import { FormFieldControl, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+import { ButtonDirective } from '@cdevhub/ngx-tw/button';
+import { IconComponent } from '@cdevhub/ngx-tw/icon';
+import { ProgressBarComponent } from '@cdevhub/ngx-tw/progress-bar';
+/**
+ * `tw-file-upload` — selects one or more files via button / click / drag-and-drop.
+ *
+ * Surfaces the selected files as a `File[]` value through `ControlValueAccessor`
+ * so the component works identically with template-driven `ngModel`, reactive
+ * `[formControl]`, and signal-based `[formField]` strategies. Integrates with
+ * `<tw-form-field>` for label / hint / error chrome.
+ *
+ * Built-in validation (`accept`, `maxSize`, `maxFiles`) rejects files at the
+ * UI layer and surfaces them via the `fileRejected` output and `LiveAnnouncer`.
+ * These rejections do NOT flow through `NgControl.errors`, so they cannot be
+ * matched with `[twError match="size"]`. Use Angular `Validator`s on the bound
+ * `NgControl` for error-key-driven UI (cross-field or async validation).
+ *
+ * The component does NOT issue HTTP requests. Consumers own the upload pipeline
+ * and push progress / status back into the component via `setItemProgress` and
+ * `setItemStatus`.
+ */
+// ── Structural slot directive ────────────────────────────────────
+/**
+ * Structural directive that captures a template used to render each item row.
+ * Apply with `*twFileUploadItem="let item"` to override the default row layout.
+ *
+ * The template context exposes the current `FileUploadItem` as both `$implicit`
+ * and `item`, so both `let-item` and `let-item="item"` work.
+ */
+class FileUploadItemDirective {
+    /** @internal Reference to the captured template — read by the host component. */
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: FileUploadItemDirective, isStandalone: true, selector: "ng-template[twFileUploadItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[twFileUploadItem]' }]
+        }] });
+// ── tv() config ──────────────────────────────────────────────────
+const fileUploadVariants = tv({
+    slots: {
+        // `relative` scopes the hidden `<input type="file" class="sr-only">` —
+        // its `position: absolute` + `margin: -1px` would otherwise resolve
+        // against the nearest positioned ancestor (often `<body>`), extending
+        // the document and producing runaway horizontal/vertical scroll.
+        root: 'relative flex flex-col gap-3 w-full',
+        // 2px dashed border on the outline variant is the dropzone's defining
+        // affordance — codified deviation from CLAUDE.md's "2px = active state
+        // indicator only" rule. The empty dropzone IS an awaiting-input affordance.
+        dropzone: 'relative rounded-lg transition-[border-color,background-color,transform] duration-200 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 cursor-pointer',
+        dropzoneInner: 'flex flex-col items-center justify-center text-center gap-3',
+        illustration: 'text-fg-subtle shrink-0',
+        headline: 'font-semibold text-fg empty:hidden',
+        description: 'text-fg-muted empty:hidden',
+        list: 'flex flex-col gap-1 m-0 p-0 list-none empty:hidden',
+        item: 'flex items-start gap-3 px-3 py-2 rounded-md hover:bg-surface-muted transition-colors duration-200 motion-reduce:transition-none',
+        itemIcon: 'shrink-0 text-fg-muted mt-0.5',
+        itemBody: 'flex-1 min-w-0 flex flex-col gap-1',
+        itemName: 'text-sm font-medium text-fg truncate',
+        itemMeta: 'text-xs text-fg-muted',
+        itemProgress: 'mt-1',
+        itemActions: 'flex items-center gap-1 shrink-0',
+    },
+    variants: {
+        variant: {
+            outline: { dropzone: 'border-2 border-dashed border-border bg-transparent' },
+            soft: { dropzone: 'border border-border bg-surface-muted' },
+        },
+        size: {
+            xs: { dropzone: 'p-2', headline: 'text-xs', description: 'text-2xs' },
+            sm: { dropzone: 'p-3', headline: 'text-sm', description: 'text-xs' },
+            md: { dropzone: 'p-4', headline: 'text-sm', description: 'text-xs' },
+            lg: { dropzone: 'p-6', headline: 'text-sm', description: 'text-xs' },
+            xl: { dropzone: 'p-8', headline: 'text-sm', description: 'text-xs' },
+        },
+        state: {
+            idle: {},
+            // 1% scale-up — below Tailwind's smallest `scale-95` step but visually
+            // correct for a subtle drag-over lift; the alternative is no lift.
+            draggingValid: {
+                dropzone: 'border-primary-500 bg-primary-50 dark:bg-primary-900/20 scale-[1.01]',
+            },
+            draggingInvalid: {
+                dropzone: 'border-error-500 bg-error-50 dark:bg-error-900/20',
+            },
+            error: { dropzone: 'border-error-500' },
+        },
+        disabled: {
+            true: { dropzone: 'opacity-50 pointer-events-none cursor-not-allowed' },
+            false: {},
+        },
+    },
+    defaultVariants: {
+        variant: 'outline',
+        size: 'md',
+        state: 'idle',
+        disabled: false,
+    },
+}, { twMerge: true });
+// ── Module-level counters & helpers ─────────────────────────────
+let nextHostId = 0;
+let nextItemSeq = 0;
+const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+function formatBytes(n) {
+    if (!Number.isFinite(n) || n < 0)
+        return '0 B';
+    if (n < 1024)
+        return `${n} B`;
+    let v = n;
+    let i = 0;
+    while (v >= 1024 && i < BYTE_UNITS.length - 1) {
+        v /= 1024;
+        i += 1;
+    }
+    return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${BYTE_UNITS[i]}`;
+}
+function parseAcceptList(accept) {
+    if (!accept)
+        return [];
+    return accept
+        .split(',')
+        .map((s) => s.trim().toLowerCase())
+        .filter(Boolean);
+}
+function matchesAccept(file, patterns) {
+    if (patterns.length === 0)
+        return true;
+    const type = file.type.toLowerCase();
+    const name = file.name.toLowerCase();
+    for (const pattern of patterns) {
+        if (pattern.startsWith('.')) {
+            if (name.endsWith(pattern))
+                return true;
+        }
+        else if (pattern.endsWith('/*')) {
+            const prefix = pattern.slice(0, -1);
+            if (type.startsWith(prefix))
+                return true;
+        }
+        else if (type === pattern) {
+            return true;
+        }
+    }
+    return false;
+}
+function iconNameFor(file) {
+    const type = file.type.toLowerCase();
+    if (type.startsWith('image/'))
+        return 'image';
+    if (type === 'application/pdf')
+        return 'file-text';
+    if (type.startsWith('text/'))
+        return 'file-text';
+    return 'file';
+}
+function clampPercent(n) {
+    if (!Number.isFinite(n))
+        return 0;
+    if (n < 0)
+        return 0;
+    if (n > 100)
+        return 100;
+    return Math.round(n);
+}
+// ── FileUploadComponent ─────────────────────────────────────────
+class FileUploadComponent extends FormFieldControl {
+    // ── Inputs ──
+    /** When true, the user can select more than one file. Mirrors to the hidden `<input multiple>` attribute. Defaults to `false`. */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Comma-separated list of accepted file types using the native `<input accept>` syntax (e.g., `'image/*,.pdf'`). Forwarded to the hidden input and used to reject dropped files that do not match. Defaults to `undefined` (accept any). */
+    accept = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Maximum size per file, in bytes. Files exceeding this are rejected with reason `'size'` and never reach `value`. Defaults to `undefined` (no limit). */
+    maxSize = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** Maximum total file count. Drops that would push the count over this limit are rejected with reason `'count'`. Ignored when `multiple` is `false` (the limit is always 1). Defaults to `undefined` (no limit). */
+    maxFiles = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    /** Visual style of the drop zone. `'outline'` renders a dashed-bordered transparent region; `'soft'` renders a filled muted background. Defaults to `'outline'`. */
+    variant = input('outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Controls overall density: drop-zone padding, icon scale, headline typography. Defaults to `'md'`. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** When true, blocks file selection (button, click, drop, keyboard) and applies muted styling. Reactive forms also propagate `disabled` via `setDisabledState`. Defaults to `false`. */
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+        transform: booleanAttribute });
+    /** Marks the control as required. Mirrors to `aria-required`. Also inferred from `Validators.required` on a bound `NgControl`. Defaults to `false`. */
+    requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required',
+        transform: booleanAttribute });
+    /** Headline text rendered inside the drop zone (e.g., `'Drag files here'`). Projected `[twFileUploadHeadline]` content takes precedence over this input. */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Secondary text rendered under the label (e.g., `'PDF up to 10MB'`). Projected `[twFileUploadDescription]` content takes precedence. */
+    description = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Label rendered inside the trigger button. Defaults to `'Choose files'`. Use `'Choose file'` when `multiple` is `false` (consumer responsibility). */
+    triggerLabel = input('Choose files', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible name applied to the host when no visible label is projected. Mirrored to `aria-label`. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID of an external element that labels the control. Mirrored to `aria-labelledby`. */
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** ID of an external element that describes the control. Form-field merges its hint/error ids alongside. */
+    ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** Optional `name` attribute on the hidden `<input type="file">` for native form submissions. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Id on the host element. Auto-generated as `tw-file-upload-N` when not provided. Used by the form-field's `<label for>` attribute. */
+    idInput = input(undefined, { ...(ngDevMode ? { debugName: "idInput" } : /* istanbul ignore next */ {}), alias: 'id' });
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the component uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    errorStateMatcher = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    // ── Outputs ──
+    /** Fires once per add operation with the items that were accepted and appended. Does not fire for rejected files (see `fileRejected`). Does not fire on `writeValue`. */
+    filesAdded = output();
+    /** Fires when a file is removed via the remove button or programmatic `remove()`. Does not fire on `writeValue`. */
+    fileRemoved = output();
+    /** Fires for each file that failed validation during add. Payload includes a human-readable message suitable for assistive-tech announcement. */
+    fileRejected = output();
+    /** Fires when all files are cleared at once via programmatic `clear()`. Does not fire on `writeValue`, even when the new value is empty. */
+    cleared = output();
+    // ── Injections ──
+    elementRef = inject((ElementRef));
+    focusMonitor = inject(FocusMonitor);
+    liveAnnouncer = inject(LiveAnnouncer);
+    destroyRef = inject(DestroyRef);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
+    // ── Internal mutable state ──
+    itemsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsSignal" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDraggingSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDraggingSignal" }] : /* istanbul ignore next */ []));
+    dragHasInvalidFilesSignal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragHasInvalidFilesSignal" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _ngControlRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
+    _formSubmitRev = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    describedByIdsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
+    labelledByIdsSignal = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledByIdsSignal" }] : /* istanbul ignore next */ []));
+    dragCounter = 0;
+    onChange = () => { };
+    onTouched = () => { };
+    // ── Template refs ──
+    /** @internal Captured custom-item template (from `*twFileUploadItem`). When absent, the default row template renders. */
+    itemSlot = contentChild(FileUploadItemDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemSlot" }] : /* istanbul ignore next */ []));
+    /** @internal Dropzone wrapper — used to scope the form-field container-click guard. */
+    dropzoneRef = viewChild('dropzone', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropzoneRef" }] : /* istanbul ignore next */ []));
+    /** @internal The visible trigger button — the keyboard-operable control that receives focus on container click and after the last item is removed. */
+    triggerRef = viewChild('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    /** @internal Hidden native input — used as the OS picker trigger. */
+    hiddenInputRef = viewChild('hiddenInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenInputRef" }] : /* istanbul ignore next */ []));
+    // ── Ids ──
+    uid = nextHostId++;
+    /** @internal Auto-generated host id used when `[id]` is not supplied. */
+    hostId = `tw-file-upload-${this.uid}`;
+    /** @internal */
+    headlineId = `${this.hostId}-headline`;
+    /** @internal */
+    descriptionId = `${this.hostId}-description`;
+    /** @internal */
+    hiddenInputId = `${this.hostId}-input`;
+    // ── Public readonly signals ──
+    /** Current items with their progress and status. Snapshot of internal state. */
+    items = this.itemsSignal.asReadonly();
+    /** True while a valid file drag is over the drop zone. */
+    isDragging = this.isDraggingSignal.asReadonly();
+    /** Convenience alias for `items().length`. Useful for counter hints. */
+    valueLength = computed(() => this.itemsSignal().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLength" }] : /* istanbul ignore next */ []));
+    // ── FormFieldControl signals ──
+    /** @internal */
+    id = computed(() => this.idInput() ?? this.hostId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    value = computed(() => {
+        const list = this.itemsSignal();
+        return list.length ? list.map((i) => i.file) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focused = this._focused.asReadonly();
+    /** @internal */
+    empty = computed(() => this.itemsSignal().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    disabled = computed(() => {
+        this._ngControlRev();
+        return this.disabledInput() || this.cvaDisabled() || !!this.ngControl?.disabled;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    required = computed(() => {
+        this._ngControlRev();
+        if (this.requiredInput())
+            return true;
+        const ctrl = this.ngControl?.control;
+        return !!ctrl?.hasValidator(Validators.required);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    errorState = computed(() => {
+        this._ngControlRev();
+        this._formSubmitRev();
+        this._focused();
+        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
+        const form = this.parentFormGroup ??
+            this.parentForm;
+        return matcher.isErrorState(this.ngControl?.control ?? null, form);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    /** @internal Validation errors map from the bound `NgControl`. */
+    errors = computed(() => {
+        this._ngControlRev();
+        return this.ngControl?.control?.errors ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    controlType = 'file-upload';
+    /** @internal */
+    userAriaDescribedBy = computed(() => this.ariaDescribedby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    userAriaLabelledby = computed(() => this.ariaLabelledby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaLabelledby" }] : /* istanbul ignore next */ []));
+    // ── Effective ARIA ──
+    //
+    // When wrapped by `<tw-form-field>`, the form-field calls `setDescribedByIds`
+    // / `setLabelledByIds` with the FULLY MERGED id list (hint/error/label + the
+    // consumer's `aria-*by` ids). In that case the pushed ids alone are the
+    // source of truth. When standalone, fall back to the consumer-supplied
+    // `aria-*by` input and the internal description id.
+    /** @internal */
+    effectiveAriaLabelledby = computed(() => {
+        const pushed = this.labelledByIdsSignal();
+        if (pushed.length)
+            return pushed.join(' ');
+        return this.ariaLabelledby() || undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaLabelledby" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    effectiveAriaDescribedby = computed(() => {
+        const pushed = this.describedByIdsSignal();
+        if (pushed.length)
+            return pushed.join(' ');
+        const merged = [];
+        const external = this.ariaDescribedby();
+        if (external) {
+            for (const id of external.split(/\s+/).filter(Boolean))
+                merged.push(id);
+        }
+        if (this.description())
+            merged.push(this.descriptionId);
+        return merged.length ? merged.join(' ') : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAriaDescribedby" }] : /* istanbul ignore next */ []));
+    // ── Variant computeds ──
+    stateVariant = computed(() => {
+        if (this.disabled())
+            return 'idle';
+        if (this.isDraggingSignal()) {
+            return this.dragHasInvalidFilesSignal() ? 'draggingInvalid' : 'draggingValid';
+        }
+        if (this.errorState())
+            return 'error';
+        return 'idle';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateVariant" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => fileUploadVariants({
+        variant: this.variant(),
+        size: this.size(),
+        state: this.stateVariant(),
+        disabled: this.disabled(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => this.variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dropzoneClasses = computed(() => this.variantResult().dropzone(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropzoneClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dropzoneInnerClasses = computed(() => this.variantResult().dropzoneInner(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropzoneInnerClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    illustrationClasses = computed(() => this.variantResult().illustration(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "illustrationClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    headlineClasses = computed(() => this.variantResult().headline(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headlineClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    descriptionClasses = computed(() => this.variantResult().description(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    listClasses = computed(() => this.variantResult().list(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    itemClasses = computed(() => this.variantResult().item(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    itemIconClasses = computed(() => this.variantResult().itemIcon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemIconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    itemBodyClasses = computed(() => this.variantResult().itemBody(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemBodyClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    itemNameClasses = computed(() => this.variantResult().itemName(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemNameClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    itemMetaClasses = computed(() => this.variantResult().itemMeta(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemMetaClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    itemProgressClasses = computed(() => this.variantResult().itemProgress(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemProgressClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    itemActionsClasses = computed(() => this.variantResult().itemActions(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemActionsClasses" }] : /* istanbul ignore next */ []));
+    /** @internal Mapping component size → icon size for the illustration. */
+    iconSize = computed(() => {
+        const s = this.size();
+        if (s === 'xs')
+            return 'sm';
+        if (s === 'sm')
+            return 'md';
+        if (s === 'md')
+            return 'lg';
+        return 'xl';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    // ── Construction ──
+    constructor() {
+        super();
+        // Runtime CVA wiring — incompatible with a static NG_VALUE_ACCESSOR provider
+        // because `inject(NgControl, { self: true })` for matcher integration would
+        // create a circular DI on the same element.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        afterNextRender(() => {
+            if (isDevMode() && !this.hasAccessibleNameHint()) {
+                console.warn('[tw-file-upload] The file-upload has no accessible name. Provide a `label`, project label content, or set `aria-label` / `aria-labelledby`.');
+            }
+        });
+    }
+    // ── Public API ──
+    /** Programmatically opens the OS file picker. No-op when disabled. */
+    open() {
+        if (this.disabled())
+            return;
+        const input = this.hiddenInputRef()?.nativeElement;
+        if (input)
+            input.click();
+    }
+    /** Removes the item with the given id. Emits `fileRemoved`. No-op when the id is unknown or the component is disabled. */
+    remove(id) {
+        if (this.disabled())
+            return;
+        const current = this.itemsSignal();
+        const idx = current.findIndex((i) => i.id === id);
+        if (idx === -1)
+            return;
+        const removed = current[idx];
+        const next = current.slice(0, idx).concat(current.slice(idx + 1));
+        this.itemsSignal.set(next);
+        this.emitChange();
+        this.fileRemoved.emit(removed);
+        this.liveAnnouncer.announce(`${removed.file.name} removed.`, 'polite');
+        // Move focus to the next remove button, or to the trigger button when none remain.
+        queueMicrotask(() => {
+            const host = this.elementRef.nativeElement;
+            const nextButtons = host.querySelectorAll('[data-tw-file-upload-remove]');
+            if (nextButtons.length === 0) {
+                this.triggerRef()?.nativeElement.focus();
+            }
+            else {
+                const fallback = nextButtons[Math.min(idx, nextButtons.length - 1)];
+                fallback?.focus();
+            }
+        });
+    }
+    /** Removes all items. Emits `cleared` and calls `onChange([])`. No-op when already empty or disabled. */
+    clear() {
+        if (this.disabled())
+            return;
+        if (this.itemsSignal().length === 0)
+            return;
+        this.itemsSignal.set([]);
+        this.emitChange();
+        this.cleared.emit();
+        this.liveAnnouncer.announce('All files removed.', 'polite');
+    }
+    /** Updates the per-item progress (0–100, clamped). Does not change status. No-op when the id is unknown. */
+    setItemProgress(id, percent) {
+        const clamped = clampPercent(percent);
+        let found = false;
+        const next = this.itemsSignal().map((item) => {
+            if (item.id !== id)
+                return item;
+            found = true;
+            if (item.progress === clamped)
+                return item;
+            return { ...item, progress: clamped };
+        });
+        if (found)
+            this.itemsSignal.set(next);
+    }
+    /** Updates the per-item status and (optionally) the error message. Announces status transitions via `LiveAnnouncer`. No-op when the id is unknown. */
+    setItemStatus(id, status, error) {
+        let target;
+        let changed = false;
+        const next = this.itemsSignal().map((item) => {
+            if (item.id !== id)
+                return item;
+            target = item;
+            const nextError = error !== undefined ? error : item.error;
+            if (item.status === status && item.error === nextError)
+                return item;
+            changed = true;
+            return { ...item, status, error: nextError };
+        });
+        if (!target)
+            return;
+        if (changed)
+            this.itemsSignal.set(next);
+        const name = target.file.name;
+        if (status === 'success') {
+            this.liveAnnouncer.announce(`${name} upload complete.`, 'polite');
+        }
+        else if (status === 'error') {
+            this.liveAnnouncer.announce(error ? `${name} upload failed: ${error}.` : `${name} upload failed.`, 'polite');
+        }
+        else if (status === 'uploading') {
+            this.liveAnnouncer.announce(`${name} uploading.`, 'polite');
+        }
+    }
+    // ── Drag-drop handlers ──
+    /** @internal */
+    onDragEnter(event) {
+        if (this.disabled())
+            return;
+        if (!this.isFileDrag(event))
+            return;
+        event.preventDefault();
+        this.dragCounter += 1;
+        if (this.dragCounter === 1) {
+            this.dragHasInvalidFilesSignal.set(this.computeDragInvalid(event));
+            this.isDraggingSignal.set(true);
+        }
+    }
+    /** @internal */
+    onDragOver(event) {
+        if (this.disabled())
+            return;
+        if (!this.isFileDrag(event))
+            return;
+        // Required to enable `drop` — browsers reject drops by default.
+        event.preventDefault();
+    }
+    /** @internal */
+    onDragLeave(event) {
+        if (this.disabled())
+            return;
+        if (!this.isFileDrag(event))
+            return;
+        if (this.dragCounter > 0)
+            this.dragCounter -= 1;
+        if (this.dragCounter === 0) {
+            this.isDraggingSignal.set(false);
+            this.dragHasInvalidFilesSignal.set(false);
+        }
+    }
+    /** @internal */
+    onDrop(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragCounter = 0;
+        this.isDraggingSignal.set(false);
+        this.dragHasInvalidFilesSignal.set(false);
+        const files = event.dataTransfer?.files;
+        if (files && files.length) {
+            this.addFiles(files);
+        }
+    }
+    /** @internal */
+    onTriggerClick(event) {
+        event.stopPropagation();
+        this.open();
+    }
+    /** @internal Called by the hidden `<input type="file">` `change` event. */
+    onNativeChange(event) {
+        const target = event.target;
+        const files = target.files;
+        if (files && files.length)
+            this.addFiles(files);
+        // Reset so re-selecting the same file re-fires `change`.
+        target.value = '';
+    }
+    // ── Add files (validation + commit) ──
+    addFiles(files) {
+        if (this.disabled())
+            return;
+        const incoming = Array.from(files);
+        if (incoming.length === 0)
+            return;
+        // Single-file mode: replace existing entry with the latest file dropped/selected.
+        if (!this.multiple()) {
+            const file = incoming[0];
+            if (!file)
+                return;
+            const patterns = parseAcceptList(this.accept());
+            if (!matchesAccept(file, patterns)) {
+                this.reject(file, 'accept');
+                return;
+            }
+            const maxSize = this.maxSize();
+            if (maxSize !== undefined && file.size > maxSize) {
+                this.reject(file, 'size');
+                return;
+            }
+            const newItem = this.wrapFile(file);
+            this.itemsSignal.set([newItem]);
+            this.emitChange();
+            this.filesAdded.emit([newItem]);
+            this.liveAnnouncer.announce('1 file added.', 'polite');
+            return;
+        }
+        const patterns = parseAcceptList(this.accept());
+        const maxSize = this.maxSize();
+        const maxFiles = this.maxFiles();
+        const accepted = [];
+        const currentCount = this.itemsSignal().length;
+        for (const file of incoming) {
+            if (!matchesAccept(file, patterns)) {
+                this.reject(file, 'accept');
+                continue;
+            }
+            if (maxSize !== undefined && file.size > maxSize) {
+                this.reject(file, 'size');
+                continue;
+            }
+            if (maxFiles !== undefined && currentCount + accepted.length >= maxFiles) {
+                this.reject(file, 'count');
+                continue;
+            }
+            accepted.push(this.wrapFile(file));
+        }
+        if (accepted.length === 0)
+            return;
+        this.itemsSignal.set([...this.itemsSignal(), ...accepted]);
+        this.emitChange();
+        this.filesAdded.emit(accepted);
+        this.liveAnnouncer.announce(`${accepted.length} file${accepted.length === 1 ? '' : 's'} added.`, 'polite');
+    }
+    wrapFile(file) {
+        return {
+            id: `tw-file-upload-item-${nextItemSeq++}`,
+            file,
+            progress: 0,
+            status: 'pending',
+        };
+    }
+    reject(file, reason) {
+        const message = this.rejectionMessage(file, reason);
+        // Sequence per-file announcements so a batch of rejections is announced cleanly.
+        setTimeout(() => this.liveAnnouncer.announce(message, 'polite'));
+        this.fileRejected.emit({ file, reason, message });
+    }
+    rejectionMessage(file, reason) {
+        if (reason === 'accept')
+            return `${file.name} was rejected: file type not allowed.`;
+        if (reason === 'size') {
+            const max = this.maxSize();
+            const limit = max !== undefined ? formatBytes(max) : 'allowed size';
+            return `${file.name} was rejected: exceeds ${limit}.`;
+        }
+        return `${file.name} was rejected: maximum file count reached.`;
+    }
+    // ── Drag inspection ──
+    isFileDrag(event) {
+        const dt = event.dataTransfer;
+        if (!dt)
+            return false;
+        // `types` includes 'Files' when files are being dragged from the OS.
+        return Array.from(dt.types).includes('Files');
+    }
+    computeDragInvalid(event) {
+        const patterns = parseAcceptList(this.accept());
+        if (patterns.length === 0)
+            return false;
+        const items = event.dataTransfer?.items;
+        if (!items || items.length === 0)
+            return false;
+        // During drag, filenames are not exposed — only MIME types via `items[i].type`.
+        // Extension-only patterns (`.pdf`) can't be confirmed mid-drag, so we treat
+        // the drag as potentially valid if ANY item could match by MIME or if the
+        // accept list contains any extension-only pattern.
+        const hasExtensionPattern = patterns.some((p) => p.startsWith('.'));
+        if (hasExtensionPattern)
+            return false;
+        for (const item of Array.from(items)) {
+            if (item.kind !== 'file')
+                continue;
+            const type = item.type.toLowerCase();
+            for (const pattern of patterns) {
+                if (pattern.endsWith('/*')) {
+                    if (type.startsWith(pattern.slice(0, -1)))
+                        return false;
+                }
+                else if (type === pattern) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        if (value === null || value === undefined) {
+            if (this.itemsSignal().length === 0)
+                return;
+            this.itemsSignal.set([]);
+            return;
+        }
+        const list = Array.isArray(value) ? value : [value];
+        if (list.length === 0) {
+            if (this.itemsSignal().length === 0)
+                return;
+            this.itemsSignal.set([]);
+            return;
+        }
+        const current = this.itemsSignal();
+        if (current.length === list.length &&
+            current.every((item, idx) => item.file === list[idx])) {
+            return;
+        }
+        this.itemsSignal.set(list.map((file) => this.wrapFile(file)));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    emitChange() {
+        const files = this.itemsSignal().map((i) => i.file);
+        this.onChange(files);
+    }
+    // ── FormFieldControl methods ──
+    /** @internal */
+    setDescribedByIds(ids) {
+        this.describedByIdsSignal.set([...ids]);
+    }
+    /** @internal */
+    setLabelledByIds(ids) {
+        this.labelledByIdsSignal.set([...ids]);
+    }
+    /** @internal */
+    onContainerClick(event) {
+        if (this.disabled())
+            return;
+        if (event.defaultPrevented)
+            return;
+        const dropzone = this.dropzoneRef()?.nativeElement;
+        if (!dropzone)
+            return;
+        const target = event.target;
+        if (target && dropzone.contains(target))
+            return;
+        this.triggerRef()?.nativeElement.focus();
+    }
+    // ── Rendering helpers ──
+    /** @internal */
+    iconNameFor(item) {
+        return iconNameFor(item.file);
+    }
+    /** @internal */
+    shouldShowProgress(item) {
+        if (item.status === 'pending' && item.progress === 0)
+            return false;
+        return true;
+    }
+    /** @internal */
+    progressColorFor(item) {
+        if (item.status === 'error')
+            return 'error';
+        if (item.status === 'success' || item.progress >= 100)
+            return 'success';
+        return 'primary';
+    }
+    /** @internal */
+    metaTextFor(item) {
+        const size = formatBytes(item.file.size);
+        if (item.status === 'pending')
+            return size;
+        if (item.status === 'uploading')
+            return `${size} · Uploading`;
+        if (item.status === 'success')
+            return `${size} · Done`;
+        if (item.error)
+            return `${size} · Failed — ${item.error}`;
+        return `${size} · Failed`;
+    }
+    // ── Lifecycle ──
+    ngOnInit() {
+        const monitor$ = this.focusMonitor.monitor(this.elementRef, true);
+        if (isObservable(monitor$)) {
+            monitor$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((origin) => {
+                const wasFocused = this._focused();
+                this._focused.set(!!origin);
+                if (wasFocused && !origin) {
+                    this.onTouched();
+                    this._ngControlRev.update((n) => n + 1);
+                }
+            });
+        }
+        this.destroyRef.onDestroy(() => {
+            this.focusMonitor.stopMonitoring(this.elementRef);
+        });
+        const ctrl = this.ngControl?.control;
+        if (ctrl) {
+            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
+            if (streams.length) {
+                merge(...streams)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
+            }
+        }
+        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
+        if (submit) {
+            submit
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
+        }
+    }
+    // ── Helpers ──
+    hasAccessibleNameHint() {
+        if (this.label() || this.ariaLabel() || this.ariaLabelledby())
+            return true;
+        const host = this.elementRef.nativeElement;
+        return !!host.textContent && host.textContent.trim().length > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FileUploadComponent, isStandalone: true, selector: "tw-file-upload", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", fileRemoved: "fileRemoved", fileRejected: "fileRejected", cleared: "cleared" }, host: { attributes: { "role": "group" }, properties: { "id": "id()", "class": "rootClasses()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "effectiveAriaLabelledby() || null", "attr.aria-describedby": "effectiveAriaDescribedby() || null", "attr.aria-disabled": "disabled() || null", "attr.aria-required": "required() || null", "attr.aria-invalid": "errorState() || null" } }, providers: [
+            {
+                provide: TW_FORM_FIELD_CONTROL,
+                useExisting: forwardRef(() => FileUploadComponent),
+            },
+        ], queries: [{ propertyName: "itemSlot", first: true, predicate: FileUploadItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "hiddenInputRef", first: true, predicate: ["hiddenInput"], descendants: true, isSignal: true }], exportAs: ["twFileUpload"], usesInheritance: true, ngImport: i0, template: "<input\n  #hiddenInput\n  type=\"file\"\n  class=\"sr-only\"\n  tabindex=\"-1\"\n  [id]=\"hiddenInputId\"\n  [attr.aria-label]=\"ariaLabel() ?? label() ?? triggerLabel()\"\n  [attr.name]=\"name() || null\"\n  [attr.accept]=\"accept() || null\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  (change)=\"onNativeChange($event)\"\n/>\n\n<!-- The dropzone is a mouse click/drop convenience target, intentionally NOT a\n     focusable control: the inner trigger <button> owns keyboard operability, so\n     adding tabindex/keydown here would create a nested-interactive structure.\n     No keyboard user is locked out, so the rules' concern does not apply. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #dropzone\n  [class]=\"dropzoneClasses()\"\n  (click)=\"open()\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div [class]=\"dropzoneInnerClasses()\">\n    <div [class]=\"illustrationClasses()\">\n      <ng-content select=\"[twFileUploadIcon]\">\n        <tw-icon name=\"upload-cloud\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n      </ng-content>\n    </div>\n\n    <span [id]=\"headlineId\" [class]=\"headlineClasses()\">\n      <ng-content select=\"[twFileUploadHeadline]\">\n        @if (label(); as l) {\n          {{ l }}\n        } @else {\n          Drag files here or click to browse\n        }\n      </ng-content>\n    </span>\n\n    <span [id]=\"descriptionId\" [class]=\"descriptionClasses()\">\n      <ng-content select=\"[twFileUploadDescription]\">\n        @if (description(); as d) {\n          {{ d }}\n        }\n      </ng-content>\n    </span>\n\n    <button\n      #trigger\n      type=\"button\"\n      twButton\n      variant=\"outline\"\n      color=\"neutral\"\n      [size]=\"size()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-describedby]=\"effectiveAriaDescribedby() || null\"\n      (click)=\"onTriggerClick($event)\"\n    >\n      {{ triggerLabel() }}\n    </button>\n  </div>\n</div>\n\n<ul [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id) {\n    <li>\n      @if (itemSlot(); as slot) {\n        <ng-container\n          [ngTemplateOutlet]=\"slot.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, item: item }\"\n        />\n      } @else {\n        <div [class]=\"itemClasses()\">\n          <tw-icon\n            [name]=\"iconNameFor(item)\"\n            size=\"md\"\n            [class]=\"itemIconClasses()\"\n            aria-hidden=\"true\"\n          />\n          <div [class]=\"itemBodyClasses()\">\n            <span [class]=\"itemNameClasses()\">{{ item.file.name }}</span>\n            <span [class]=\"itemMetaClasses()\">{{ metaTextFor(item) }}</span>\n            @if (shouldShowProgress(item)) {\n              <tw-progress-bar\n                [class]=\"itemProgressClasses()\"\n                [value]=\"item.progress\"\n                size=\"sm\"\n                [color]=\"progressColorFor(item)\"\n              />\n            }\n          </div>\n          <div [class]=\"itemActionsClasses()\">\n            <button\n              type=\"button\"\n              twButton\n              variant=\"ghost\"\n              color=\"neutral\"\n              size=\"sm\"\n              data-tw-file-upload-remove\n              [attr.aria-label]=\"'Remove ' + item.file.name\"\n              (click)=\"remove(item.id)\"\n            >\n              <tw-icon twButtonIcon name=\"x\" />\n            </button>\n          </div>\n        </div>\n      }\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "[twButton]", inputs: ["variant", "color", "size", "disabled", "loading"], exportAs: ["twButton"] }, { kind: "component", type: IconComponent, selector: "tw-icon", inputs: ["name", "img", "color", "size", "ariaLabel", "svg"] }, { kind: "component", type: ProgressBarComponent, selector: "tw-progress-bar", inputs: ["value", "variant", "color", "size", "label", "options"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tw-file-upload', exportAs: 'twFileUpload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ButtonDirective, IconComponent, ProgressBarComponent], providers: [
+                        {
+                            provide: TW_FORM_FIELD_CONTROL,
+                            useExisting: forwardRef(() => FileUploadComponent),
+                        },
+                    ], host: {
+                        'role': 'group',
+                        '[id]': 'id()',
+                        '[class]': 'rootClasses()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-labelledby]': 'effectiveAriaLabelledby() || null',
+                        '[attr.aria-describedby]': 'effectiveAriaDescribedby() || null',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.aria-required]': 'required() || null',
+                        '[attr.aria-invalid]': 'errorState() || null',
+                    }, template: "<input\n  #hiddenInput\n  type=\"file\"\n  class=\"sr-only\"\n  tabindex=\"-1\"\n  [id]=\"hiddenInputId\"\n  [attr.aria-label]=\"ariaLabel() ?? label() ?? triggerLabel()\"\n  [attr.name]=\"name() || null\"\n  [attr.accept]=\"accept() || null\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  [required]=\"required()\"\n  (change)=\"onNativeChange($event)\"\n/>\n\n<!-- The dropzone is a mouse click/drop convenience target, intentionally NOT a\n     focusable control: the inner trigger <button> owns keyboard operability, so\n     adding tabindex/keydown here would create a nested-interactive structure.\n     No keyboard user is locked out, so the rules' concern does not apply. -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n<div\n  #dropzone\n  [class]=\"dropzoneClasses()\"\n  (click)=\"open()\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n>\n  <div [class]=\"dropzoneInnerClasses()\">\n    <div [class]=\"illustrationClasses()\">\n      <ng-content select=\"[twFileUploadIcon]\">\n        <tw-icon name=\"upload-cloud\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n      </ng-content>\n    </div>\n\n    <span [id]=\"headlineId\" [class]=\"headlineClasses()\">\n      <ng-content select=\"[twFileUploadHeadline]\">\n        @if (label(); as l) {\n          {{ l }}\n        } @else {\n          Drag files here or click to browse\n        }\n      </ng-content>\n    </span>\n\n    <span [id]=\"descriptionId\" [class]=\"descriptionClasses()\">\n      <ng-content select=\"[twFileUploadDescription]\">\n        @if (description(); as d) {\n          {{ d }}\n        }\n      </ng-content>\n    </span>\n\n    <button\n      #trigger\n      type=\"button\"\n      twButton\n      variant=\"outline\"\n      color=\"neutral\"\n      [size]=\"size()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-describedby]=\"effectiveAriaDescribedby() || null\"\n      (click)=\"onTriggerClick($event)\"\n    >\n      {{ triggerLabel() }}\n    </button>\n  </div>\n</div>\n\n<ul [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id) {\n    <li>\n      @if (itemSlot(); as slot) {\n        <ng-container\n          [ngTemplateOutlet]=\"slot.templateRef\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, item: item }\"\n        />\n      } @else {\n        <div [class]=\"itemClasses()\">\n          <tw-icon\n            [name]=\"iconNameFor(item)\"\n            size=\"md\"\n            [class]=\"itemIconClasses()\"\n            aria-hidden=\"true\"\n          />\n          <div [class]=\"itemBodyClasses()\">\n            <span [class]=\"itemNameClasses()\">{{ item.file.name }}</span>\n            <span [class]=\"itemMetaClasses()\">{{ metaTextFor(item) }}</span>\n            @if (shouldShowProgress(item)) {\n              <tw-progress-bar\n                [class]=\"itemProgressClasses()\"\n                [value]=\"item.progress\"\n                size=\"sm\"\n                [color]=\"progressColorFor(item)\"\n              />\n            }\n          </div>\n          <div [class]=\"itemActionsClasses()\">\n            <button\n              type=\"button\"\n              twButton\n              variant=\"ghost\"\n              color=\"neutral\"\n              size=\"sm\"\n              data-tw-file-upload-remove\n              [attr.aria-label]=\"'Remove ' + item.file.name\"\n              (click)=\"remove(item.id)\"\n            >\n              <tw-icon twButtonIcon name=\"x\" />\n            </button>\n          </div>\n        </div>\n      }\n    </li>\n  }\n</ul>\n" }]
+        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], itemSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FileUploadItemDirective), { isSignal: true }] }], dropzoneRef: [{ type: i0.ViewChild, args: ['dropzone', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], hiddenInputRef: [{ type: i0.ViewChild, args: ['hiddenInput', { isSignal: true }] }] } });
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { FileUploadComponent, FileUploadItemDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-file-upload.mjs.map