@tekus/design-system 5.35.0 → 5.37.0

package/fesm2022/tekus-design-system-components-uploader.mjs

@@ -0,0 +1,1256 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injector, signal, computed, untracked, runInInjectionContext, Injectable, input, output, ChangeDetectionStrategy, Component, viewChild, resource } from '@angular/core';
+import { IconComponent } from '@tekus/design-system/components/icon';
+import { ProcessStepsComponent } from '@tekus/design-system/components/process-steps';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { from, concatMap, catchError, throwError, toArray, map, expand, EMPTY, takeWhile, timer, tap, filter, defaultIfEmpty, last, take, finalize, isObservable, firstValueFrom, of, fromEvent } from 'rxjs';
+import { ButtonComponent } from '@tekus/design-system/components/button';
+import { ProgressBarComponent } from '@tekus/design-system/components/progress-bar';
+import { HttpBackend, HttpClient, HttpEventType } from '@angular/common/http';
+
+/** Queue backing store — provided by `provideUploader()`, actively injected by `UploaderQueueService`. */
+const UPLOADER_STORE = new InjectionToken('UPLOADER_STORE');
+/** Client-side preview/metadata generator — provided by `provideUploader()`, actively injected internally. */
+const UPLOADER_PREVIEW_PROVIDER = new InjectionToken('UPLOADER_PREVIEW_PROVIDER');
+/**
+ * HTTP transport — provided by `provideUploader()`, but never injected
+ * internally. Registered purely so the consumer's own `steps`/
+ * `multipart.uploadPart` functions can `inject(UPLOADER_TRANSPORT)` instead
+ * of instantiating `HttpClient` themselves.
+ */
+const UPLOADER_TRANSPORT = new InjectionToken('UPLOADER_TRANSPORT');
+
+/** Runs `config.steps` one after another, reporting progress as each resolves. */
+function runSequentialStepsFlow(params) {
+    const { item, payload, context, config, store, handleError, reportProgress } = params;
+    const steps = config.steps || [];
+    const totalSteps = steps.length;
+    return from(steps).pipe(concatMap((step, index) => {
+        return executeStep(step, { file: item.file, context, payload, item }, index, totalSteps, store, config, reportProgress).pipe(catchError((err) => {
+            handleError(item.id, err, config, context);
+            return throwError(() => err);
+        }));
+    }), toArray(), map(() => context));
+}
+/** Runs `config.multipart`: `init` → chunks sequentially via `uploadPart` → `complete`. */
+function runMultipartFlow(params) {
+    const { item, payload, context, config, store, handleError, reportProgress } = params;
+    const multipart = config.multipart;
+    const chunkSize = multipart.chunkSizeMB * 1024 * 1024;
+    const totalChunks = Math.ceil(item.file.size / chunkSize);
+    return multipart.init({ file: item.file, payload }).pipe(map((initResult) => {
+        Object.assign(context, initResult);
+        reportProgress(0);
+        return { partNumber: 0 };
+    }), expand(({ partNumber }) => {
+        if (partNumber >= totalChunks) {
+            return EMPTY;
+        }
+        const start = partNumber * chunkSize;
+        const end = Math.min(start + chunkSize, item.file.size);
+        const chunk = item.file.slice(start, end);
+        return executeChunk(multipart, {
+            file: item.file,
+            chunk,
+            partNumber,
+            context,
+            payload,
+            metadata: item.metadata
+        }, totalChunks, store, item.id, config, reportProgress);
+    }), takeWhile(({ partNumber }) => partNumber <= totalChunks, true), toArray(), concatMap(() => {
+        const scale = 100 / (config.totalSteps || 1);
+        reportProgress(Math.round(scale), config.resolveText?.('FINISHING') ?? 'FINISHING');
+        return multipart.complete({ context, payload }).pipe(map(() => {
+            return context;
+        }));
+    }), catchError((err) => {
+        handleError(item.id, err, config, context);
+        return throwError(() => err);
+    }));
+}
+/**
+ * Runs `config.polling` after the byte upload succeeds: calls `checkStatus`
+ * every `intervalMs`, merging `progress`/`statusText`/`steps`/`stepsStatus`/
+ * `stepsTitle`/`stepsDescription`/`stepsCountdownSeconds`/`stepsCountdownLabel`
+ * into the item as they arrive, until `status` stops being `'loading'`.
+ */
+function runPolling(params) {
+    const { id, payload, context, config, store, handleError } = params;
+    const pollConfig = config.polling;
+    const interval = pollConfig.intervalMs || 3000;
+    return timer(0, interval).pipe(concatMap(() => pollConfig.checkStatus({ context, payload })), takeWhile((response) => response.status === 'loading', true), map((response) => {
+        if (response.status === 'error') {
+            throw new Error(response.error || 'POLLING_FAILED');
+        }
+        const updates = {};
+        if (response.progress !== undefined) {
+            updates.progress = response.progress;
+        }
+        if (response.statusText !== undefined) {
+            updates.statusText = response.statusText;
+        }
+        if (response.steps !== undefined) {
+            updates.steps = response.steps;
+        }
+        if (response.stepsStatus !== undefined) {
+            updates.stepsStatus = response.stepsStatus;
+        }
+        if (response.stepsTitle !== undefined) {
+            updates.stepsTitle = response.stepsTitle;
+        }
+        if (response.stepsDescription !== undefined) {
+            updates.stepsDescription = response.stepsDescription;
+        }
+        if (response.stepsCountdownSeconds !== undefined) {
+            updates.stepsCountdownSeconds = response.stepsCountdownSeconds;
+        }
+        if (response.stepsCountdownLabel !== undefined) {
+            updates.stepsCountdownLabel = response.stepsCountdownLabel;
+        }
+        if (Object.keys(updates).length > 0) {
+            store.update(id, updates);
+        }
+        return response;
+    }), catchError((err) => {
+        handleError(id, err, config, context);
+        return throwError(() => err);
+    }), toArray(), map((responses) => responses.at(-1)));
+}
+function executeStep(step, params, index, totalSteps, store, config, reportProgress) {
+    const scale = 100 / (config.totalSteps || 1);
+    return step(params).pipe(map((result) => {
+        Object.assign(params.context, result);
+        const id = params.item?.id;
+        if (id) {
+            const progress = Math.round(((index + 1) / totalSteps) * scale);
+            reportProgress(progress);
+        }
+        config.hooks?.onStepComplete?.({
+            stepIndex: index,
+            context: params.context
+        });
+        return params.context;
+    }));
+}
+function executeChunk(multipart, params, totalChunks, store, itemId, config, reportProgress) {
+    const scale = 100 / (config.totalSteps || 1);
+    return multipart.uploadPart(params).pipe(tap((val) => {
+        if (typeof val === 'number' && totalChunks > 0) {
+            const currentPartOffset = (params.partNumber / totalChunks) * scale;
+            const chunkContribution = (val / 100) * (scale / totalChunks);
+            reportProgress(Math.round(currentPartOffset + chunkContribution));
+        }
+    }), filter((val) => typeof val === 'object' && val !== null), defaultIfEmpty({}), last(), map((result) => {
+        if (result && typeof result === 'object' && !Array.isArray(result)) {
+            Object.assign(params.context, result);
+        }
+        const progress = totalChunks > 0
+            ? Math.round(((params.partNumber + 1) / totalChunks) * scale)
+            : Math.round(scale);
+        reportProgress(progress);
+        return { partNumber: params.partNumber + 1 };
+    }));
+}
+
+/** Fallback values applied by `mergeConfigWithDefaults` when the consumer omits them. */
+const UPLOADER_DEFAULTS = {
+    chunkSizeMB: 5,
+    concurrencyLimit: 4,
+    pollingIntervalMs: 3000
+};
+/** Fills in `UPLOADER_DEFAULTS` for whatever `config` leaves unset — never overrides an explicit value. */
+function mergeConfigWithDefaults(config) {
+    let refined = { ...config };
+    if (refined.concurrencyLimit === undefined) {
+        refined = {
+            ...refined,
+            concurrencyLimit: UPLOADER_DEFAULTS.concurrencyLimit
+        };
+    }
+    if (refined.multipart) {
+        refined = {
+            ...refined,
+            multipart: {
+                ...refined.multipart,
+                chunkSizeMB: refined.multipart.chunkSizeMB ?? UPLOADER_DEFAULTS.chunkSizeMB
+            }
+        };
+    }
+    if (refined.polling) {
+        refined = {
+            ...refined,
+            polling: {
+                ...refined.polling,
+                intervalMs: refined.polling.intervalMs ?? UPLOADER_DEFAULTS.pollingIntervalMs
+            }
+        };
+    }
+    return refined;
+}
+
+/** Checks a file against `UploadFlowConfig.restrictions` before it's queued. */
+class UploaderValidator {
+    /**
+     * Checks integrity (non-empty) first, then extension/size — `rules` (per-extension
+     * `maxSizeMB`) if set, otherwise the legacy `allowedExtensions`/`maxSizeMB` pair.
+     */
+    static validate(file, restrictions) {
+        const integrityResult = this.checkFileIntegrity(file);
+        if (!integrityResult.isValid) {
+            return integrityResult;
+        }
+        return restrictions.rules?.length
+            ? this.checkGranularRules(file, restrictions.rules)
+            : this.checkLegacyRestrictions(file, restrictions);
+    }
+    static checkFileIntegrity(file) {
+        if (file.size === 0) {
+            return {
+                isValid: false,
+                error: 'FILE_CORRUPT',
+                detail: { fileName: file.name, fileSize: 0 }
+            };
+        }
+        return { isValid: true };
+    }
+    static checkGranularRules(file, rules) {
+        const fileName = file.name.toLowerCase();
+        const matchingRule = rules.find(rule => rule.extensions.some(ext => fileName.endsWith(ext.toLowerCase())));
+        return matchingRule
+            ? this.checkRuleMaxSize(file, matchingRule)
+            : this.buildGranularInvalidFormatResult(fileName, rules);
+    }
+    static buildGranularInvalidFormatResult(fileName, rules) {
+        return {
+            isValid: false,
+            error: 'INVALID_FORMAT',
+            detail: {
+                fileName,
+                allowedExtensionsByType: rules.map(rule => rule.extensions)
+            }
+        };
+    }
+    static checkRuleMaxSize(file, rule) {
+        if (rule.maxSizeMB !== undefined && file.size > rule.maxSizeMB * 1024 * 1024) {
+            return {
+                isValid: false,
+                error: 'FILE_TOO_LARGE',
+                detail: { fileSize: file.size, maxSizeMB: rule.maxSizeMB }
+            };
+        }
+        return { isValid: true };
+    }
+    static checkLegacyRestrictions(file, restrictions) {
+        const maxSizeResult = this.checkLegacyMaxSize(file, restrictions);
+        if (!maxSizeResult.isValid) {
+            return maxSizeResult;
+        }
+        return this.checkLegacyExtension(file, restrictions);
+    }
+    static checkLegacyMaxSize(file, restrictions) {
+        if (restrictions.maxSizeMB &&
+            file.size > restrictions.maxSizeMB * 1024 * 1024) {
+            return {
+                isValid: false,
+                error: 'FILE_TOO_LARGE',
+                detail: { fileSize: file.size, maxSizeMB: restrictions.maxSizeMB }
+            };
+        }
+        return { isValid: true };
+    }
+    static checkLegacyExtension(file, restrictions) {
+        const fileName = file.name.toLowerCase();
+        const isAllowed = !restrictions.allowedExtensions ||
+            restrictions.allowedExtensions.some(ext => fileName.endsWith(ext.toLowerCase()));
+        return isAllowed
+            ? { isValid: true }
+            : this.buildLegacyInvalidFormatResult(fileName, restrictions);
+    }
+    static buildLegacyInvalidFormatResult(fileName, restrictions) {
+        return {
+            isValid: false,
+            error: 'INVALID_FORMAT',
+            detail: { fileName, allowedExtensions: restrictions.allowedExtensions }
+        };
+    }
+}
+
+const STATUS_KEY_MAP = {
+    loading: 'UPLOAD_IN_PROGRESS',
+    success: 'FULL_LOAD',
+    error: 'LOAD_ERROR',
+    ready: 'READY',
+    analyzing: 'ANALYZING',
+    transforming: 'TRANSFORMING',
+    queued: 'PROCESSING'
+};
+const ERROR_CODES = new Set([
+    'FILE_CORRUPT',
+    'INVALID_FORMAT',
+    'FILE_TOO_LARGE',
+    'ANALYSIS_FAILED',
+    'PROCESS_FAILED',
+    'EXTERNAL_VALIDATION_FAILED',
+    'POLLING_FAILED',
+    'NO_UPLOAD_STRATEGY_CONFIGURED'
+]);
+/**
+ * The engine — orchestrates the whole upload flow (validation, analysis,
+ * transform, `steps`/`multipart`, `polling`, lifecycle hooks) driven purely
+ * by the `UploadFlowConfig` passed to `addToQueue`. Not `providedIn: 'root'`;
+ * `provideUploader()` gives each `tk-uploader` its own instance.
+ */
+class UploaderQueueService {
+    constructor() {
+        this.store = inject(UPLOADER_STORE);
+        this.previewProvider = inject(UPLOADER_PREVIEW_PROVIDER);
+        this.injector = inject(Injector);
+        this.activeSubscriptions = new Map();
+        this.isManualTriggered = signal(false, ...(ngDevMode ? [{ debugName: "isManualTriggered" }] : /* istanbul ignore next */ []));
+        this.uploadQueue = this.store.uploadQueue;
+        /** Every state transition recorded so far — not currently surfaced anywhere by default. */
+        this.auditHistory = signal([], ...(ngDevMode ? [{ debugName: "auditHistory" }] : /* istanbul ignore next */ []));
+        /** Whether any item is actively `loading` right now. */
+        this.isUploading = computed(() => this.uploadQueue().some((i) => i.status === 'loading'), ...(ngDevMode ? [{ debugName: "isUploading" }] : /* istanbul ignore next */ []));
+        /** Whether any item is mid-flight (`analyzing`/`transforming`/`loading`) — client-side or network work in progress. */
+        this.isBusy = computed(() => this.uploadQueue().some((i) => ['analyzing', 'transforming', 'loading'].includes(i.status)), ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        /** `!isBusy()` — whether it's safe to close/navigate away without losing in-flight work. */
+        this.canSafetyClose = computed(() => !this.isBusy(), ...(ngDevMode ? [{ debugName: "canSafetyClose" }] : /* istanbul ignore next */ []));
+    }
+    ngOnDestroy() {
+        this.clearQueue();
+    }
+    /**
+     * Adds one or more files to the queue and starts them through validation →
+     * analysis → transform → (auto-start or wait for `startUpload`/`startAllReady`).
+     * `config` becomes `currentConfig`, reused by every later call until the next `addToQueue`.
+     */
+    addToQueue(files, config) {
+        this.isManualTriggered.set(false);
+        const mergedConfig = mergeConfigWithDefaults(config);
+        this.currentConfig = mergedConfig;
+        const fileList = Array.isArray(files) ? files : [files];
+        fileList.forEach((file) => {
+            const id = crypto.randomUUID();
+            const newItem = {
+                id,
+                file,
+                progress: 0,
+                status: 'analyzing',
+                statusKey: this.getStatusKey('analyzing'),
+                statusText: this.getStatusText('analyzing')
+            };
+            this.addAuditEntry(id, 'none', 'analyzing');
+            this.store.add(newItem);
+            mergedConfig.hooks?.onFileAdded?.(file);
+            untracked(() => {
+                if (mergedConfig.restrictions) {
+                    const result = UploaderValidator.validate(file, mergedConfig.restrictions);
+                    if (!result.isValid) {
+                        this.handleError(id, result.error, mergedConfig, undefined, result.detail, 'invalid');
+                        return;
+                    }
+                }
+                this.runAnalysis(id, file, mergedConfig);
+            });
+        });
+    }
+    runAnalysis(id, file, config) {
+        const analysisResource = runInInjectionContext(this.injector, () => this.previewProvider.generatePreview(file));
+        const sub = toObservable(analysisResource.value, {
+            injector: this.injector
+        })
+            .pipe(filter((val) => !!val), take(1), finalize(() => {
+            this.activeSubscriptions.delete(`${id}_analysis`);
+            analysisResource.destroy();
+        }))
+            .subscribe((analysis) => {
+            if (analysis) {
+                this.handleAnalysisResult(id, analysis, config);
+            }
+        });
+        this.activeSubscriptions.set(`${id}_analysis`, sub);
+    }
+    async handleAnalysisResult(id, analysis, config) {
+        if (!this.uploadQueue().some((i) => i.id === id)) {
+            // The item was removed while analysis was still in flight — the store never
+            // got `previewUrl`, so `removeFromQueue`'s own revoke couldn't find it either.
+            if (analysis.previewUrl?.startsWith('blob:')) {
+                URL.revokeObjectURL(analysis.previewUrl);
+            }
+            return;
+        }
+        if (analysis.analysisError) {
+            const errorKey = analysis.technicalError || 'ANALYSIS_FAILED';
+            this.handleError(id, errorKey, config, {}, analysis.technicalError);
+            return;
+        }
+        this.patchItem(id, {
+            previewUrl: analysis.previewUrl,
+            previewBlob: analysis.previewBlob,
+            previewBase64: analysis.previewBase64,
+            metadata: analysis.metadata
+        });
+        const isValid = await this.validateExternalRestrictions(id, analysis, config);
+        if (!isValid) {
+            return;
+        }
+        await this.runTransformation(id, config);
+    }
+    async validateExternalRestrictions(id, analysis, config) {
+        if (config.hooks?.validate) {
+            let validation;
+            const validation$ = config.hooks.validate({
+                file: this.uploadQueue().find((i) => i.id === id)
+                    .file,
+                metadata: analysis.metadata
+            });
+            if (isObservable(validation$)) {
+                validation = await firstValueFrom(validation$.pipe(catchError(() => of(false))));
+            }
+            else {
+                validation = validation$;
+            }
+            if (validation !== true) {
+                this.handleError(id, typeof validation === 'string' && validation
+                    ? new Error(validation)
+                    : new Error('EXTERNAL_VALIDATION_FAILED'), config, {});
+                return;
+            }
+        }
+        return true;
+    }
+    async runTransformation(id, config) {
+        if (config.hooks?.onTransform) {
+            this.patchItem(id, { status: 'transforming' });
+            try {
+                const item = this.uploadQueue().find((i) => i.id === id);
+                const payload = await config.hooks.onTransform(item);
+                this.patchItem(id, { payload });
+            }
+            catch (err) {
+                this.handleError(id, err, config, {});
+                return;
+            }
+        }
+        const isAutoStart = typeof config.autoStart === 'function'
+            ? config.autoStart()
+            : config.autoStart;
+        if (isAutoStart !== false || this.isManualTriggered()) {
+            this.patchItem(id, { status: 'queued' });
+            this.checkConcurrencyAndProcess(config);
+        }
+        else {
+            this.patchItem(id, { status: 'ready' });
+        }
+    }
+    /** Manually starts a single `ready` item (when `autoStart` is `false`). */
+    startUpload(id) {
+        if (!this.currentConfig) {
+            return;
+        }
+        this.patchItem(id, { status: 'queued' });
+        this.checkConcurrencyAndProcess(this.currentConfig);
+    }
+    /** Manually starts every `ready` item at once (when `autoStart` is `false`). */
+    startAllReady() {
+        if (!this.currentConfig) {
+            return;
+        }
+        this.isManualTriggered.set(true);
+        this.uploadQueue().forEach((item) => {
+            if (item.status === 'ready') {
+                this.patchItem(item.id, { status: 'queued' });
+            }
+        });
+        this.checkConcurrencyAndProcess(this.currentConfig);
+    }
+    checkConcurrencyAndProcess(config) {
+        const limit = config.concurrencyLimit;
+        const activeCount = this.uploadQueue().filter((i) => i.status === 'loading').length;
+        if (activeCount < limit) {
+            const nextItem = this.uploadQueue().find((i) => i.status === 'queued');
+            if (nextItem) {
+                this.processUpload(nextItem, config);
+                this.checkConcurrencyAndProcess(config);
+            }
+        }
+    }
+    processUpload(item, config) {
+        const context = {};
+        this.startUploadFlow(item, config);
+        const subscription = this.getExecutionStream(item, config, context)
+            .pipe(concatMap(() => {
+            if (config.polling) {
+                return runPolling({
+                    id: item.id,
+                    payload: item.payload,
+                    context,
+                    config,
+                    store: this.store,
+                    handleError: this.handleError.bind(this)
+                });
+            }
+            return of(context);
+        }), finalize(() => this.finalizeItem(item.id, config)))
+            .subscribe({
+            next: () => {
+                this.patchItem(item.id, { status: 'success', progress: 100 });
+                config.hooks?.onSuccess?.({ context, payload: item.payload });
+                this.checkAllComplete(config);
+            },
+            error: () => this.checkAllComplete(config)
+        });
+        this.activeSubscriptions.set(item.id, subscription);
+    }
+    startUploadFlow(item, config) {
+        this.patchItem(item.id, {
+            status: 'loading',
+            progress: 0,
+            statusText: this.getStatusText('loading')
+        });
+        config.hooks?.onBeforeStart?.(item.file);
+    }
+    getExecutionStream(item, config, context) {
+        if (!config.multipart && !config.steps?.length) {
+            const error = new Error('NO_UPLOAD_STRATEGY_CONFIGURED');
+            this.handleError(item.id, error, config, context);
+            return throwError(() => error);
+        }
+        const params = {
+            item,
+            payload: item.payload,
+            context,
+            config,
+            store: this.store,
+            handleError: this.handleError.bind(this),
+            reportProgress: (progress, text) => this.patchItem(item.id, { progress, statusText: text })
+        };
+        return config.multipart
+            ? runMultipartFlow(params)
+            : runSequentialStepsFlow(params);
+    }
+    finalizeItem(id, config) {
+        this.activeSubscriptions.delete(id);
+        this.checkConcurrencyAndProcess(config);
+    }
+    extractErrorCode(error) {
+        if (typeof error === 'string' && ERROR_CODES.has(error)) {
+            return error;
+        }
+        if (error instanceof Error &&
+            ERROR_CODES.has(error.message)) {
+            return error.message;
+        }
+        return undefined;
+    }
+    getErrorText(error) {
+        const code = this.extractErrorCode(error);
+        if (code) {
+            return this.resolveUploaderKeyText(code);
+        }
+        if (error instanceof Error) {
+            return error.message;
+        }
+        if (typeof error === 'string') {
+            return error;
+        }
+        return this.getStatusText('error');
+    }
+    resolveUploaderKeyText(key) {
+        return this.currentConfig?.resolveText
+            ? this.currentConfig.resolveText(key)
+            : key;
+    }
+    handleError(id, error, config, context = undefined, detail, status = 'error') {
+        const errorMessage = this.getErrorText(error);
+        this.patchItem(id, {
+            status,
+            error: errorMessage
+        }, detail);
+        config.hooks?.onError?.({ error, context });
+    }
+    checkAllComplete(config) {
+        const allTerminal = this.uploadQueue().every((i) => ['success', 'error', 'invalid'].includes(i.status));
+        if (allTerminal) {
+            this.isManualTriggered.set(false);
+            config.hooks?.onAllComplete?.();
+        }
+    }
+    /**
+     * Removes an item outright — revokes its preview blob URL and cancels any
+     * in-flight upload subscription first. This is outside `UploadFlowConfig`'s
+     * contract on purpose: `tk-uploader` only ever reports a removal request
+     * (see `UploaderRemoveRequest`/`removeRequested`), the consumer decides
+     * whether/when to actually call this.
+     *
+     * Deliberately does NOT cancel a still-pending `${id}_analysis` subscription:
+     * doing so would drop the analysis result (and any blob URL it already created)
+     * on the floor with nothing left to revoke it. Letting it resolve naturally lets
+     * `handleAnalysisResult`'s own "item still in the queue?" check catch it instead.
+     */
+    removeFromQueue(id) {
+        this.revokeItemPreview(id);
+        this.cancelSubscription(id);
+        this.store.remove(id);
+    }
+    revokeItemPreview(id) {
+        const item = this.uploadQueue().find((i) => i.id === id);
+        if (item?.previewUrl?.startsWith('blob:')) {
+            URL.revokeObjectURL(item.previewUrl);
+        }
+    }
+    cancelSubscription(key) {
+        const sub = this.activeSubscriptions.get(key);
+        if (sub) {
+            sub.unsubscribe();
+            this.activeSubscriptions.delete(key);
+        }
+    }
+    /** Cancels an item's in-flight subscription without removing it — `startUpload` resumes it. */
+    pauseUpload(id) {
+        this.cancelSubscription(id);
+    }
+    /** Revokes every preview blob URL, cancels every in-flight subscription, and empties the store. */
+    clearQueue() {
+        this.uploadQueue().forEach((item) => {
+            if (item.previewUrl?.startsWith('blob:')) {
+                URL.revokeObjectURL(item.previewUrl);
+            }
+        });
+        this.activeSubscriptions.forEach((sub) => sub.unsubscribe());
+        this.activeSubscriptions.clear();
+        this.store.clear();
+    }
+    getStatusKey(status) {
+        return STATUS_KEY_MAP[status] || status.toUpperCase();
+    }
+    getStatusText(status) {
+        const key = this.getStatusKey(status);
+        if (this.currentConfig?.resolveText) {
+            return this.currentConfig.resolveText(key);
+        }
+        return status;
+    }
+    patchItem(id, updates, detail) {
+        const currentItem = this.uploadQueue().find((i) => i.id === id);
+        if (!currentItem) {
+            return;
+        }
+        if (updates.status && updates.status !== currentItem.status) {
+            this.addAuditEntry(id, currentItem.status, updates.status, detail);
+            updates.statusKey = this.getStatusKey(updates.status);
+            updates.statusText ??= this.getStatusText(updates.status);
+        }
+        const cleanUpdates = { ...updates };
+        if (cleanUpdates.statusText === undefined) {
+            delete cleanUpdates.statusText;
+        }
+        this.store.update(id, cleanUpdates);
+    }
+    addAuditEntry(itemId, from, toStatus, detail) {
+        this.auditHistory.update((history) => [
+            ...history,
+            {
+                itemId,
+                from,
+                to: toStatus,
+                timestamp: Date.now(),
+                key: this.getStatusKey(toStatus),
+                errorDetail: detail
+            }
+        ]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderQueueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderQueueService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderQueueService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Horizontal file card — icon/preview, title, plain progress bar while
+ * `status` is `'loading'` (otherwise `statusText`), and a trailing action
+ * button. Internal to `tk-uploader`; not part of the public API.
+ */
+class UploaderFileCardComponent {
+    constructor() {
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.status = input.required(...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        /** 0-100, shown only while `status` is `'loading'`. */
+        this.progress = input(0, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        this.previewUrl = input(...(ngDevMode ? [undefined, { debugName: "previewUrl" }] : /* istanbul ignore next */ []));
+        /** Fallback icon shown when there's no `previewUrl`. */
+        this.icon = input('folders', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Shown instead of the progress bar whenever `status` isn't `'loading'`. */
+        this.statusText = input.required(...(ngDevMode ? [{ debugName: "statusText" }] : /* istanbul ignore next */ []));
+        /**
+         * Set by the consumer while it's waiting on its own confirmation for this
+         * item's removal — this card never confirms anything itself, it only
+         * reflects that a decision is pending by disabling the remove button (no
+         * double-clicks while waiting).
+         */
+        this.isPendingRemoval = input(false, ...(ngDevMode ? [{ debugName: "isPendingRemoval" }] : /* istanbul ignore next */ []));
+        /**
+         * Icon for the trailing button — defaults to the remove affordance
+         * (`trash-can`). `tk-uploader` overrides this for its `placeholder` card,
+         * where the same button re-opens the file picker instead of removing
+         * anything (there's nothing in the real queue to remove).
+         */
+        this.trailingIcon = input('trash-can', ...(ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
+        /** Severity for the trailing button — `danger` reads as destructive, `secondary` doesn't. */
+        this.trailingSeverity = input('danger', ...(ngDevMode ? [{ debugName: "trailingSeverity" }] : /* istanbul ignore next */ []));
+        /**
+         * Tooltip/accessible label for the trailing button — this card has no copy of its own
+         * (no i18n coupling, same reasoning as `UploadFlowConfig.resolveText`), so it stays
+         * unlabeled unless the consumer supplies text here.
+         */
+        this.trailingLabel = input(...(ngDevMode ? [undefined, { debugName: "trailingLabel" }] : /* istanbul ignore next */ []));
+        /** Emitted on trailing-button click — its meaning depends on `trailingIcon`/context, this card has no opinion on it. */
+        this.dismissed = output();
+        this.isProcessing = computed(() => this.status() === 'loading', ...(ngDevMode ? [{ debugName: "isProcessing" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderFileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: UploaderFileCardComponent, isStandalone: true, selector: "tk-uploader-file-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, previewUrl: { classPropertyName: "previewUrl", publicName: "previewUrl", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, statusText: { classPropertyName: "statusText", publicName: "statusText", isSignal: true, isRequired: true, transformFunction: null }, isPendingRemoval: { classPropertyName: "isPendingRemoval", publicName: "isPendingRemoval", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingSeverity: { classPropertyName: "trailingSeverity", publicName: "trailingSeverity", isSignal: true, isRequired: false, transformFunction: null }, trailingLabel: { classPropertyName: "trailingLabel", publicName: "trailingLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<article class=\"tk-uploader-file-card\" [attr.data-status]=\"status()\">\n  <div class=\"tk-uploader-file-card__media\">\n    @if (previewUrl()) {\n      <img\n        [src]=\"previewUrl()\"\n        alt=\"File preview\"\n        class=\"tk-uploader-file-card__preview\" />\n    } @else {\n      <tk-icon [icon]=\"icon()\" class=\"tk-uploader-file-card__media-icon\" />\n    }\n  </div>\n\n  <div class=\"tk-uploader-file-card__info\">\n    <h4 class=\"tk-uploader-file-card__title\">{{ title() }}</h4>\n\n    @if (isProcessing()) {\n      <!-- statusText is intentionally hidden while loading: tk-progress-bar only shows a\n           number, so with multiple files (no per-item tk-process-steps) there's no textual\n           feedback during this state \u2014 see uploader.mdx \"Known limitations\". -->\n      <div class=\"tk-uploader-file-card__progress\">\n        <tk-progress-bar [value]=\"progress()\" size=\"medium\" [showValue]=\"true\" />\n      </div>\n    } @else {\n      <p class=\"tk-uploader-file-card__status-text\">{{ statusText() }}</p>\n    }\n  </div>\n\n  <tk-button\n    variant=\"outlined\"\n    [severity]=\"trailingSeverity()\"\n    size=\"small\"\n    [icon]=\"trailingIcon()\"\n    [tooltipText]=\"trailingLabel()\"\n    class=\"tk-uploader-file-card__remove\"\n    [disabled]=\"isPendingRemoval()\"\n    (clicked)=\"dismissed.emit()\" />\n</article>\n", styles: [".tk-uploader-file-card{--card-status-color: var(--tk-color-border-default);position:relative;display:flex;align-items:center;gap:var(--tk-spacing-base-150);padding:var(--tk-spacing-base-100);background-color:var(--tk-color-background-soft);border:1px solid var(--card-status-color);border-radius:var(--tk-borderRadius-m);overflow:hidden;width:100%;transition:border-color .2s ease-in-out}.tk-uploader-file-card__media{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:var(--tk-borderRadius-s);background-color:var(--tk-color-primary-muted);overflow:hidden}.tk-uploader-file-card__media-icon{color:var(--tk-color-primary-default);font-size:1.5rem}.tk-uploader-file-card__preview{width:100%;height:100%;object-fit:cover}.tk-uploader-file-card__info{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--tk-spacing-base-50)}.tk-uploader-file-card__title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:600;color:var(--tk-color-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tk-uploader-file-card__status-text{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-default)}.tk-uploader-file-card__progress{display:flex;flex-direction:column}.tk-uploader-file-card__remove{flex-shrink:0}.tk-uploader-file-card[data-status=success]{--card-status-color: var(--tk-color-feedback-success-default)}.tk-uploader-file-card[data-status=error],.tk-uploader-file-card[data-status=invalid]{--card-status-color: var(--tk-color-feedback-danger-default)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "variant", "link", "icon", "iconPosition", "tooltipText", "full", "ariaLabel", "size"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: ProgressBarComponent, selector: "tk-progress-bar", inputs: ["value", "showValue", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderFileCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-uploader-file-card', standalone: true, imports: [ButtonComponent, IconComponent, ProgressBarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"tk-uploader-file-card\" [attr.data-status]=\"status()\">\n  <div class=\"tk-uploader-file-card__media\">\n    @if (previewUrl()) {\n      <img\n        [src]=\"previewUrl()\"\n        alt=\"File preview\"\n        class=\"tk-uploader-file-card__preview\" />\n    } @else {\n      <tk-icon [icon]=\"icon()\" class=\"tk-uploader-file-card__media-icon\" />\n    }\n  </div>\n\n  <div class=\"tk-uploader-file-card__info\">\n    <h4 class=\"tk-uploader-file-card__title\">{{ title() }}</h4>\n\n    @if (isProcessing()) {\n      <!-- statusText is intentionally hidden while loading: tk-progress-bar only shows a\n           number, so with multiple files (no per-item tk-process-steps) there's no textual\n           feedback during this state \u2014 see uploader.mdx \"Known limitations\". -->\n      <div class=\"tk-uploader-file-card__progress\">\n        <tk-progress-bar [value]=\"progress()\" size=\"medium\" [showValue]=\"true\" />\n      </div>\n    } @else {\n      <p class=\"tk-uploader-file-card__status-text\">{{ statusText() }}</p>\n    }\n  </div>\n\n  <tk-button\n    variant=\"outlined\"\n    [severity]=\"trailingSeverity()\"\n    size=\"small\"\n    [icon]=\"trailingIcon()\"\n    [tooltipText]=\"trailingLabel()\"\n    class=\"tk-uploader-file-card__remove\"\n    [disabled]=\"isPendingRemoval()\"\n    (clicked)=\"dismissed.emit()\" />\n</article>\n", styles: [".tk-uploader-file-card{--card-status-color: var(--tk-color-border-default);position:relative;display:flex;align-items:center;gap:var(--tk-spacing-base-150);padding:var(--tk-spacing-base-100);background-color:var(--tk-color-background-soft);border:1px solid var(--card-status-color);border-radius:var(--tk-borderRadius-m);overflow:hidden;width:100%;transition:border-color .2s ease-in-out}.tk-uploader-file-card__media{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:3.5rem;height:3.5rem;border-radius:var(--tk-borderRadius-s);background-color:var(--tk-color-primary-muted);overflow:hidden}.tk-uploader-file-card__media-icon{color:var(--tk-color-primary-default);font-size:1.5rem}.tk-uploader-file-card__preview{width:100%;height:100%;object-fit:cover}.tk-uploader-file-card__info{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:var(--tk-spacing-base-50)}.tk-uploader-file-card__title{margin:0;font-size:var(--tk-font-size-paragraph-m);font-weight:600;color:var(--tk-color-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tk-uploader-file-card__status-text{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-default)}.tk-uploader-file-card__progress{display:flex;flex-direction:column}.tk-uploader-file-card__remove{flex-shrink:0}.tk-uploader-file-card[data-status=success]{--card-status-color: var(--tk-color-feedback-success-default)}.tk-uploader-file-card[data-status=error],.tk-uploader-file-card[data-status=invalid]{--card-status-color: var(--tk-color-feedback-danger-default)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], previewUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewUrl", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], statusText: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusText", required: true }] }], isPendingRemoval: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPendingRemoval", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingSeverity: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingSeverity", required: false }] }], trailingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingLabel", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
+const TERMINAL_STATUSES = new Set(['success', 'error', 'invalid']);
+const DEFAULT_STEPS_TITLE = 'Processing';
+function resolveRemovePhase(status) {
+    if (status === 'loading') {
+        return 'in-progress';
+    }
+    return TERMINAL_STATUSES.has(status) ? 'post-upload' : 'pre-upload';
+}
+/**
+ * Drag-and-drop upload zone with a queue of file cards. Fully agnostic: it
+ * has no opinion on *how* a file gets uploaded — validation, upload
+ * mechanics, post-upload polling and every lifecycle callback are supplied
+ * by the consumer through `config` (`UploadFlowConfig`). Requires
+ * `provideUploader()` in the providers of the hosting component (or a parent).
+ */
+class UploaderComponent {
+    constructor() {
+        this.queueService = inject(UploaderQueueService);
+        /** Idle-state heading, shown before any file is selected. */
+        this.title = input('Drag and drop your file here', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Whether more than one file can be added to the queue at once. */
+        this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        /** Idle-state helper text. */
+        this.subtitle = input('or click to browse', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /** Optional helper line shown below the drop zone while it's empty. */
+        this.helperText = input(null, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+        /** Label for the optional link appended to `helperText`. */
+        this.helperLinkText = input(null, ...(ngDevMode ? [{ debugName: "helperLinkText" }] : /* istanbul ignore next */ []));
+        /** URL for the optional link appended to `helperText`. */
+        this.helperLinkUrl = input(null, ...(ngDevMode ? [{ debugName: "helperLinkUrl" }] : /* istanbul ignore next */ []));
+        /** Everything this instance needs to run its flow — see `UploadFlowConfig`. */
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        /**
+         * Terminal "existing file" card shown instead of the idle dropzone while
+         * the queue is empty (e.g. edit mode: an already-loaded entity) — see
+         * `LoaderPlaceholder`.
+         */
+        this.placeholder = input(null, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /**
+         * Ids the consumer is currently waiting on its own confirmation for (see
+         * `removeRequested`). Matching cards disable their remove button so the
+         * user can't double-trigger a request while a decision is pending — this
+         * component still has no opinion on what that confirmation looks like.
+         */
+        this.pendingRemovalIds = input([], ...(ngDevMode ? [{ debugName: "pendingRemovalIds" }] : /* istanbul ignore next */ []));
+        /**
+         * Tooltip/accessible label for a real queue item's remove button — `tk-uploader` has no
+         * copy of its own (same reasoning as `UploadFlowConfig.resolveText`), so the button stays
+         * unlabeled unless the consumer supplies text here.
+         */
+        this.removeLabel = input(...(ngDevMode ? [undefined, { debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+        /** Tooltip/accessible label for the `placeholder` card's trailing (re-upload) button. */
+        this.placeholderReplaceLabel = input(...(ngDevMode ? [undefined, { debugName: "placeholderReplaceLabel" }] : /* istanbul ignore next */ []));
+        /** Emitted with the raw `File`(s) as soon as they're picked/dropped — `File[]` when `multiple`, a single `File` otherwise. */
+        this.fileSelected = output();
+        /**
+         * Emitted when a file-card's remove button is clicked — `tk-uploader` never
+         * removes the item itself. Inspect `phase` to decide whether to confirm
+         * (typically for `in-progress`) before calling
+         * `UploaderQueueService.removeFromQueue(id)`.
+         */
+        this.removeRequested = output();
+        /**
+         * Emitted when an item's `tk-process-steps` countdown (`stepsCountdownSeconds`)
+         * reaches zero — `tk-uploader` never acts on it itself (doesn't remove the
+         * item, doesn't close anything). The consumer decides what that means: close
+         * a modal, remove the item, show a toast, etc.
+         */
+        this.stepsCountdownFinished = output();
+        this.fileInput = viewChild.required('fileInput');
+        this.queue = this.queueService.uploadQueue;
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+        /**
+         * Files already in a terminal state (`success` / `error` / `invalid`) are
+         * done — they don't consume capacity anymore even though they stay visible
+         * in the queue until manually removed. Capacity is about what's still
+         * in-flight, not the size of the visible history.
+         */
+        this.activeCount = computed(() => this.queue().filter((item) => !TERMINAL_STATUSES.has(item.status)).length, ...(ngDevMode ? [{ debugName: "activeCount" }] : /* istanbul ignore next */ []));
+        this.isAtCapacity = computed(() => !this.multiple() && this.activeCount() >= 1, ...(ngDevMode ? [{ debugName: "isAtCapacity" }] : /* istanbul ignore next */ []));
+        /**
+         * Native `accept` attribute for the hidden `<input type="file">`, derived
+         * from `config.restrictions` (`rules[].extensions` or `allowedExtensions`)
+         * — the same list that actually validates a file — so there is a single
+         * source of truth instead of a separate, independently-settable input that
+         * could drift out of sync with it. This is only a hint for the OS file
+         * picker: it does not filter drag & drop and does not validate anything.
+         */
+        this.accept = computed(() => {
+            const restrictions = this.config().restrictions;
+            if (!restrictions) {
+                return '';
+            }
+            const extensions = restrictions.rules?.length
+                ? restrictions.rules.flatMap((rule) => rule.extensions)
+                : restrictions.allowedExtensions;
+            return extensions?.join(',') ?? '';
+        }, ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+        this.dragCounter = 0;
+    }
+    onDragOver(event) {
+        if (this.isAtCapacity()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    onDragEnter(event) {
+        if (this.isAtCapacity()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragCounter++;
+        this.isDragging.set(true);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragCounter--;
+        if (this.dragCounter === 0) {
+            this.isDragging.set(false);
+        }
+    }
+    onDrop(event) {
+        if (this.isAtCapacity()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragCounter = 0;
+        this.isDragging.set(false);
+        if (event.dataTransfer?.files) {
+            this.handleFiles(event.dataTransfer.files);
+        }
+    }
+    onFileChange(event) {
+        if (this.isAtCapacity()) {
+            return;
+        }
+        const input = event.target;
+        if (input.files) {
+            this.handleFiles(input.files);
+        }
+    }
+    onCancelItem(id) {
+        const item = this.queue().find((i) => i.id === id);
+        if (!item) {
+            return;
+        }
+        this.removeRequested.emit({ id, phase: resolveRemovePhase(item.status) });
+    }
+    isPendingRemoval(id) {
+        return this.pendingRemovalIds().includes(id);
+    }
+    stepsTitleFor(stepsTitle) {
+        return stepsTitle ?? DEFAULT_STEPS_TITLE;
+    }
+    /** Opens the OS file picker programmatically — a no-op while `isAtCapacity()`. */
+    triggerBrowse() {
+        if (this.isAtCapacity()) {
+            return;
+        }
+        this.fileInput().nativeElement.click();
+    }
+    handleFiles(fileList) {
+        const allFiles = Array.from(fileList);
+        if (allFiles.length === 0) {
+            return;
+        }
+        const files = this.multiple() ? allFiles : allFiles.slice(0, 1);
+        this.queueService.addToQueue(files, this.config());
+        this.emitFileSelection(files);
+    }
+    emitFileSelection(files) {
+        if (this.multiple()) {
+            this.fileSelected.emit(files);
+        }
+        else {
+            this.fileSelected.emit(files[0]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: UploaderComponent, isStandalone: true, selector: "tk-uploader", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, helperLinkText: { classPropertyName: "helperLinkText", publicName: "helperLinkText", isSignal: true, isRequired: false, transformFunction: null }, helperLinkUrl: { classPropertyName: "helperLinkUrl", publicName: "helperLinkUrl", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, pendingRemovalIds: { classPropertyName: "pendingRemovalIds", publicName: "pendingRemovalIds", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholderReplaceLabel: { classPropertyName: "placeholderReplaceLabel", publicName: "placeholderReplaceLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", removeRequested: "removeRequested", stepsCountdownFinished: "stepsCountdownFinished" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"tk-uploader\"\n  [class.tk-uploader--dragging]=\"isDragging()\"\n  [class.tk-uploader--has-file]=\"queue().length > 0 || !!placeholder()\"\n  [class.tk-uploader--disabled]=\"isAtCapacity()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    (change)=\"onFileChange($event)\"\n    hidden />\n\n  @if (queue().length === 0) {\n    @if (placeholder()) {\n      <!-- Stays a div, not a button: tk-uploader-file-card renders its own trailing\n           <button> (replace icon), and a <button> cannot contain another <button>. -->\n      <div\n        class=\"tk-uploader__placeholder\"\n        [class.tk-uploader__placeholder--dragging]=\"isDragging()\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"fileInput.click()\"\n        (keydown.enter)=\"fileInput.click()\"\n        (keydown.space)=\"fileInput.click(); $event.preventDefault()\">\n        <tk-uploader-file-card\n          [title]=\"placeholder()!.title\"\n          [status]=\"placeholder()!.status\"\n          [statusText]=\"placeholder()!.statusText\"\n          [progress]=\"placeholder()!.progress ?? 0\"\n          [previewUrl]=\"placeholder()!.previewUrl\"\n          trailingIcon=\"upload\"\n          trailingSeverity=\"secondary\"\n          [trailingLabel]=\"placeholderReplaceLabel()\"\n          (dismissed)=\"fileInput.click()\" />\n      </div>\n    } @else {\n      <!-- Native <button>, not a div with role=\"button\": no nested interactive\n           children here, so the accessible, semantic element is the right fit. -->\n      <button type=\"button\" class=\"tk-uploader__idle\" (click)=\"fileInput.click()\">\n        <div class=\"tk-uploader__illustration\">\n          <tk-icon icon=\"upload\" color=\"primary\" />\n        </div>\n\n        <div class=\"tk-uploader__text\">\n          <h3 class=\"tk-uploader__title\">\n            {{ title() }}\n          </h3>\n          <p class=\"tk-uploader__subtitle\">\n            {{ subtitle() }}\n          </p>\n        </div>\n      </button>\n    }\n  } @else {\n    <div class=\"tk-uploader__list\">\n      @for (item of queue(); track item.id) {\n        <tk-uploader-file-card\n          [title]=\"item.file.name\"\n          [status]=\"item.status\"\n          [statusText]=\"item.statusText\"\n          [progress]=\"item.progress\"\n          [previewUrl]=\"item.previewUrl\"\n          [isPendingRemoval]=\"isPendingRemoval(item.id)\"\n          [trailingLabel]=\"removeLabel()\"\n          (dismissed)=\"onCancelItem(item.id)\" />\n\n        <!-- Gated to !multiple: a step-by-step breakdown per item gets noisy with several\n             files uploading at once, so multiple falls back to the plain progress bar even\n             when checkStatus returns steps. See uploader.mdx \"Known limitations\". -->\n        @if (!multiple() && item.steps) {\n          <tk-process-steps\n            [steps]=\"item.steps\"\n            [title]=\"stepsTitleFor(item.stepsTitle)\"\n            [description]=\"item.stepsDescription\"\n            [status]=\"item.stepsStatus ?? 'progress'\"\n            [showIcon]=\"false\"\n            [compact]=\"true\"\n            [countdownSeconds]=\"item.stepsCountdownSeconds\"\n            [countdownLabel]=\"item.stepsCountdownLabel ?? 'Closing in {seconds}s\u2026'\"\n            (countdownFinished)=\"stepsCountdownFinished.emit(item.id)\" />\n        }\n      }\n    </div>\n  }\n</div>\n\n@if (queue().length === 0 && helperText()) {\n  <div class=\"tk-uploader__helper\">\n    <span>{{ helperText() }}</span>\n    @if (helperLinkText() && helperLinkUrl()) {\n      <a\n        [href]=\"helperLinkUrl()\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"tk-uploader__helper-link\">\n        {{ helperLinkText() }}\n      </a>\n    }\n  </div>\n}\n", styles: [".tk-uploader{position:relative;overflow:hidden;border:1px dashed var(--tk-color-border-default);border-radius:var(--tk-borderRadius-m);background-color:var(--tk-color-background-default);padding:var(--tk-spacing-base-200) var(--tk-spacing-base-100);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s ease-in-out;width:100%}.tk-uploader--has-file{border-color:transparent;border-radius:0;background-color:var(--tk-color-base-surface-0);justify-content:flex-start;padding:0;overflow:visible}.tk-uploader--dragging{background-color:var(--tk-color-primary-muted);border-color:var(--tk-color-border-default);padding:var(--tk-spacing-base-200) var(--tk-spacing-base-100)}.tk-uploader--dragging>*{pointer-events:none}.tk-uploader--disabled{cursor:default;opacity:.8}.tk-uploader--disabled .tk-uploader__idle,.tk-uploader--disabled .tk-uploader__placeholder{cursor:default;pointer-events:none}.tk-uploader__idle{border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--tk-spacing-base-150);text-align:center;width:100%;height:100%}.tk-uploader__illustration{display:flex;align-items:center;justify-content:center}.tk-uploader__text{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-base-100)}.tk-uploader__title{margin:0;font-size:var(--tk-font-size-paragraph-m);color:var(--tk-color-text-default);font-weight:600}.tk-uploader__subtitle{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-default);font-weight:400}.tk-uploader__list,.tk-uploader__placeholder{width:100%;display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);transition:transform .2s ease-in-out}.tk-uploader__list--dragging,.tk-uploader__placeholder--dragging{filter:brightness(1.05)}.tk-uploader__helper{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-base-25);font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-default);margin-top:var(--tk-spacing-base-100)}.tk-uploader__helper-link{color:var(--tk-color-primary-default);font-weight:600;text-decoration:none}.tk-uploader__helper-link:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: UploaderFileCardComponent, selector: "tk-uploader-file-card", inputs: ["title", "status", "progress", "previewUrl", "icon", "statusText", "isPendingRemoval", "trailingIcon", "trailingSeverity", "trailingLabel"], outputs: ["dismissed"] }, { kind: "component", type: IconComponent, selector: "tk-icon", inputs: ["icon", "styleIcon", "color", "size", "disabled"] }, { kind: "component", type: ProcessStepsComponent, selector: "tk-process-steps", inputs: ["steps", "title", "description", "icon", "status", "showIcon", "compact", "errors", "countdownSeconds", "countdownLabel"], outputs: ["countdownFinished"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tk-uploader', standalone: true, imports: [UploaderFileCardComponent, IconComponent, ProcessStepsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"tk-uploader\"\n  [class.tk-uploader--dragging]=\"isDragging()\"\n  [class.tk-uploader--has-file]=\"queue().length > 0 || !!placeholder()\"\n  [class.tk-uploader--disabled]=\"isAtCapacity()\"\n  (dragover)=\"onDragOver($event)\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"accept()\"\n    [multiple]=\"multiple()\"\n    (change)=\"onFileChange($event)\"\n    hidden />\n\n  @if (queue().length === 0) {\n    @if (placeholder()) {\n      <!-- Stays a div, not a button: tk-uploader-file-card renders its own trailing\n           <button> (replace icon), and a <button> cannot contain another <button>. -->\n      <div\n        class=\"tk-uploader__placeholder\"\n        [class.tk-uploader__placeholder--dragging]=\"isDragging()\"\n        role=\"button\"\n        tabindex=\"0\"\n        (click)=\"fileInput.click()\"\n        (keydown.enter)=\"fileInput.click()\"\n        (keydown.space)=\"fileInput.click(); $event.preventDefault()\">\n        <tk-uploader-file-card\n          [title]=\"placeholder()!.title\"\n          [status]=\"placeholder()!.status\"\n          [statusText]=\"placeholder()!.statusText\"\n          [progress]=\"placeholder()!.progress ?? 0\"\n          [previewUrl]=\"placeholder()!.previewUrl\"\n          trailingIcon=\"upload\"\n          trailingSeverity=\"secondary\"\n          [trailingLabel]=\"placeholderReplaceLabel()\"\n          (dismissed)=\"fileInput.click()\" />\n      </div>\n    } @else {\n      <!-- Native <button>, not a div with role=\"button\": no nested interactive\n           children here, so the accessible, semantic element is the right fit. -->\n      <button type=\"button\" class=\"tk-uploader__idle\" (click)=\"fileInput.click()\">\n        <div class=\"tk-uploader__illustration\">\n          <tk-icon icon=\"upload\" color=\"primary\" />\n        </div>\n\n        <div class=\"tk-uploader__text\">\n          <h3 class=\"tk-uploader__title\">\n            {{ title() }}\n          </h3>\n          <p class=\"tk-uploader__subtitle\">\n            {{ subtitle() }}\n          </p>\n        </div>\n      </button>\n    }\n  } @else {\n    <div class=\"tk-uploader__list\">\n      @for (item of queue(); track item.id) {\n        <tk-uploader-file-card\n          [title]=\"item.file.name\"\n          [status]=\"item.status\"\n          [statusText]=\"item.statusText\"\n          [progress]=\"item.progress\"\n          [previewUrl]=\"item.previewUrl\"\n          [isPendingRemoval]=\"isPendingRemoval(item.id)\"\n          [trailingLabel]=\"removeLabel()\"\n          (dismissed)=\"onCancelItem(item.id)\" />\n\n        <!-- Gated to !multiple: a step-by-step breakdown per item gets noisy with several\n             files uploading at once, so multiple falls back to the plain progress bar even\n             when checkStatus returns steps. See uploader.mdx \"Known limitations\". -->\n        @if (!multiple() && item.steps) {\n          <tk-process-steps\n            [steps]=\"item.steps\"\n            [title]=\"stepsTitleFor(item.stepsTitle)\"\n            [description]=\"item.stepsDescription\"\n            [status]=\"item.stepsStatus ?? 'progress'\"\n            [showIcon]=\"false\"\n            [compact]=\"true\"\n            [countdownSeconds]=\"item.stepsCountdownSeconds\"\n            [countdownLabel]=\"item.stepsCountdownLabel ?? 'Closing in {seconds}s\u2026'\"\n            (countdownFinished)=\"stepsCountdownFinished.emit(item.id)\" />\n        }\n      }\n    </div>\n  }\n</div>\n\n@if (queue().length === 0 && helperText()) {\n  <div class=\"tk-uploader__helper\">\n    <span>{{ helperText() }}</span>\n    @if (helperLinkText() && helperLinkUrl()) {\n      <a\n        [href]=\"helperLinkUrl()\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        class=\"tk-uploader__helper-link\">\n        {{ helperLinkText() }}\n      </a>\n    }\n  </div>\n}\n", styles: [".tk-uploader{position:relative;overflow:hidden;border:1px dashed var(--tk-color-border-default);border-radius:var(--tk-borderRadius-m);background-color:var(--tk-color-background-default);padding:var(--tk-spacing-base-200) var(--tk-spacing-base-100);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s ease-in-out;width:100%}.tk-uploader--has-file{border-color:transparent;border-radius:0;background-color:var(--tk-color-base-surface-0);justify-content:flex-start;padding:0;overflow:visible}.tk-uploader--dragging{background-color:var(--tk-color-primary-muted);border-color:var(--tk-color-border-default);padding:var(--tk-spacing-base-200) var(--tk-spacing-base-100)}.tk-uploader--dragging>*{pointer-events:none}.tk-uploader--disabled{cursor:default;opacity:.8}.tk-uploader--disabled .tk-uploader__idle,.tk-uploader--disabled .tk-uploader__placeholder{cursor:default;pointer-events:none}.tk-uploader__idle{border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--tk-spacing-base-150);text-align:center;width:100%;height:100%}.tk-uploader__illustration{display:flex;align-items:center;justify-content:center}.tk-uploader__text{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-base-100)}.tk-uploader__title{margin:0;font-size:var(--tk-font-size-paragraph-m);color:var(--tk-color-text-default);font-weight:600}.tk-uploader__subtitle{margin:0;font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-default);font-weight:400}.tk-uploader__list,.tk-uploader__placeholder{width:100%;display:flex;flex-direction:column;gap:var(--tk-spacing-base-100);transition:transform .2s ease-in-out}.tk-uploader__list--dragging,.tk-uploader__placeholder--dragging{filter:brightness(1.05)}.tk-uploader__helper{display:flex;flex-wrap:wrap;gap:var(--tk-spacing-base-25);font-size:var(--tk-font-size-paragraph-s);color:var(--tk-color-text-default);margin-top:var(--tk-spacing-base-100)}.tk-uploader__helper-link{color:var(--tk-color-primary-default);font-weight:600;text-decoration:none}.tk-uploader__helper-link:hover{text-decoration:underline}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], helperLinkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperLinkText", required: false }] }], helperLinkUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperLinkUrl", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], pendingRemovalIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingRemovalIds", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], placeholderReplaceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderReplaceLabel", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], removeRequested: [{ type: i0.Output, args: ["removeRequested"] }], stepsCountdownFinished: [{ type: i0.Output, args: ["stepsCountdownFinished"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
+/**
+ * Default `IUploaderStore` — a plain in-memory signal, nothing persisted.
+ * Registered by `provideUploader()` under `UPLOADER_STORE`; one instance per
+ * `tk-uploader` (not `providedIn: 'root'`), so each gets its own queue.
+ */
+class UploaderStore {
+    constructor() {
+        this.queue = signal([], ...(ngDevMode ? [{ debugName: "queue" }] : /* istanbul ignore next */ []));
+        this.uploadQueue = this.queue.asReadonly();
+    }
+    add(item) {
+        this.queue.update((items) => [...items, item]);
+    }
+    update(id, updates) {
+        this.queue.update((items) => items.map((item) => (item.id === id ? { ...item, ...updates } : item)));
+    }
+    remove(id) {
+        this.queue.update((items) => items.filter((item) => item.id !== id));
+    }
+    clear() {
+        this.queue.set([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderStore }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderStore, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Default `IUploaderPreviewProvider` — generates a client-side preview/
+ * metadata pass during `analyzing` (dimensions for images/video, duration
+ * for audio/video, a downscaled preview frame), entirely in the browser
+ * with no network call. Registered by `provideUploader()` under
+ * `UPLOADER_PREVIEW_PROVIDER`.
+ */
+class UploaderPreviewProvider {
+    /** Kicks off the analysis as an Angular `resource()`, re-run if `file` changes identity. */
+    generatePreview(file) {
+        return resource({
+            params: () => file,
+            loader: ({ params: f }) => this.analyzeFile(f)
+        });
+    }
+    async analyzeFile(file) {
+        const type = this.normalizeMimeType(file);
+        try {
+            return await this.dispatchByType(file, type);
+        }
+        catch (error) {
+            return this.createErrorResult(file, type, error);
+        }
+    }
+    dispatchByType(file, type) {
+        if (type.startsWith('image/')) {
+            return this.processImageFile(file, type);
+        }
+        if (type.startsWith('video/')) {
+            return this.processVideoFile(file, type);
+        }
+        if (type.startsWith('audio/')) {
+            return this.processAudioFile(file, type);
+        }
+        return Promise.resolve(this.createAnalysisResult(file, type, { size: file.size }));
+    }
+    createAnalysisResult(file, mimeType, metadata, previews) {
+        return {
+            previewUrl: previews?.url || '',
+            previewBase64: previews?.base64 || '',
+            previewBlob: previews?.blob,
+            analysisError: false,
+            metadata: { ...metadata, mimeType }
+        };
+    }
+    createErrorResult(file, mimeType, error) {
+        return {
+            previewUrl: '',
+            previewBase64: '',
+            previewBlob: undefined,
+            analysisError: true,
+            technicalError: this.resolveTechnicalError(mimeType),
+            errorDetail: error,
+            metadata: { size: file.size, mimeType }
+        };
+    }
+    resolveTechnicalError(mimeType) {
+        const errorMap = {
+            'image/': 'PROCESS_FAILED',
+            'video/': 'PROCESS_FAILED',
+            'audio/': 'PROCESS_FAILED'
+        };
+        return (Object.entries(errorMap).find(([key]) => mimeType.startsWith(key))?.[1] ||
+            'ANALYSIS_FAILED');
+    }
+    resolveMimeFromExtension(file) {
+        const extension = file.name.split('.').pop()?.toLowerCase();
+        const mimeMap = {
+            zip: 'application/zip',
+            pdf: 'application/pdf',
+            jpg: 'image/jpeg',
+            jpeg: 'image/jpeg',
+            png: 'image/png',
+            gif: 'image/gif',
+            mp4: 'video/mp4',
+            mp3: 'audio/mpeg'
+        };
+        return extension ? mimeMap[extension] : undefined;
+    }
+    normalizeMimeType(file) {
+        const byExtension = this.resolveMimeFromExtension(file);
+        if (byExtension) {
+            return byExtension;
+        }
+        const type = file.type.toLowerCase();
+        const isZipVariant = type === 'application/x-zip-compressed' ||
+            type === 'application/zip-compressed';
+        return isZipVariant ? 'application/zip' : type || 'application/octet-stream';
+    }
+    async processImageFile(file, type) {
+        const img = new Image();
+        const objectUrl = URL.createObjectURL(file);
+        img.src = objectUrl;
+        try {
+            await this.waitForReady(img, 'load');
+            return await this.buildImageAnalysis(img, file, type);
+        }
+        finally {
+            URL.revokeObjectURL(objectUrl);
+        }
+    }
+    async buildImageAnalysis(img, file, type) {
+        const preview = await this.captureScaledFrame(img, img.naturalWidth, img.naturalHeight);
+        return this.createAnalysisResult(file, type, this.buildImageMetadata(img, file), preview);
+    }
+    buildImageMetadata(img, file) {
+        return {
+            width: img.naturalWidth,
+            height: img.naturalHeight,
+            aspectRatio: img.naturalWidth / img.naturalHeight,
+            size: file.size
+        };
+    }
+    async processAudioFile(file, type) {
+        const audio = new Audio();
+        const objectUrl = URL.createObjectURL(file);
+        audio.src = objectUrl;
+        try {
+            await this.waitForReady(audio, 'loadedmetadata');
+            return this.createAnalysisResult(file, type, {
+                durationMs: audio.duration * 1000,
+                size: file.size
+            });
+        }
+        finally {
+            URL.revokeObjectURL(objectUrl);
+        }
+    }
+    async processVideoFile(file, type) {
+        const video = this.createVideoElement(file);
+        try {
+            await this.waitForReady(video, 'loadedmetadata');
+            await this.seekToTime(video, 1);
+            return await this.buildVideoAnalysis(video, file, type);
+        }
+        finally {
+            URL.revokeObjectURL(video.src);
+        }
+    }
+    async buildVideoAnalysis(video, file, type) {
+        const preview = await this.captureScaledFrame(video, video.videoWidth, video.videoHeight);
+        return this.createAnalysisResult(file, type, this.buildVideoMetadata(video, file), preview);
+    }
+    buildVideoMetadata(video, file) {
+        return {
+            width: video.videoWidth,
+            height: video.videoHeight,
+            durationMs: video.duration * 1000,
+            aspectRatio: video.videoWidth / video.videoHeight,
+            size: file.size
+        };
+    }
+    createVideoElement(file) {
+        const video = document.createElement('video');
+        video.muted = true;
+        video.playsInline = true;
+        video.src = URL.createObjectURL(file);
+        return video;
+    }
+    async captureScaledFrame(source, naturalWidth, naturalHeight) {
+        const { width, height } = this.calculateDimensions(naturalWidth, naturalHeight);
+        return this.capturePreviewFrame(source, width, height);
+    }
+    async capturePreviewFrame(source, width, height) {
+        const canvas = this.prepareCanvas(width, height);
+        const ctx = canvas.getContext('2d');
+        ctx?.drawImage(source, 0, 0, width, height);
+        const base64 = canvas.toDataURL('image/jpeg', 0.8);
+        const blob = (await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.8)));
+        const url = URL.createObjectURL(blob);
+        return { url, blob, base64 };
+    }
+    async waitForReady(target, readyEvent) {
+        await Promise.race([
+            firstValueFrom(fromEvent(target, readyEvent)),
+            firstValueFrom(fromEvent(target, 'error')).then(() => {
+                throw new Error('PROCESS_FAILED');
+            })
+        ]);
+    }
+    seekToTime(video, seconds) {
+        video.currentTime = seconds;
+        return firstValueFrom(fromEvent(video, 'seeked'));
+    }
+    prepareCanvas(width, height) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        return canvas;
+    }
+    calculateDimensions(originalWidth, originalHeight, maxSize = 400) {
+        if (originalWidth <= maxSize && originalHeight <= maxSize) {
+            return { width: originalWidth, height: originalHeight };
+        }
+        const ratio = originalWidth / originalHeight;
+        if (originalWidth > originalHeight) {
+            return { width: maxSize, height: maxSize / ratio };
+        }
+        return { width: maxSize * ratio, height: maxSize };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderPreviewProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderPreviewProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: UploaderPreviewProvider, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Default `IUploaderTransport` — a bare `HttpClient` (via `HttpBackend`, so
+ * it bypasses app-level interceptors) that reports upload progress as a
+ * plain 0-100 number. Registered by `provideUploader()` under
+ * `UPLOADER_TRANSPORT`, for the consumer's own `steps`/`multipart.uploadPart`
+ * functions to `inject()` — `tk-uploader` never calls this itself.
+ */
+class TkUploadTransportService {
+    constructor() {
+        this.handler = inject(HttpBackend);
+        this.http = new HttpClient(this.handler);
+    }
+    upload(url, file, method = 'PUT', headers = {}, reportProgress = true, observe = 'events', withCredentials = false) {
+        const finalHeaders = this.resolveHeaders(headers ?? {}, file);
+        if (observe === 'body') {
+            return this.http.request(method, url, {
+                body: file,
+                headers: finalHeaders,
+                reportProgress,
+                observe: 'body',
+                withCredentials
+            });
+        }
+        return this.http
+            .request(method, url, {
+            body: file,
+            headers: finalHeaders,
+            reportProgress,
+            observe: 'events',
+            withCredentials
+        })
+            .pipe(map((event) => this.mapUploadEvent(event)));
+    }
+    /**
+     * Merges the caller's headers with a normalized `Content-Type`
+     * (defaulting `.zip`-flavored mime types to `application/zip`).
+     * @private
+     */
+    resolveHeaders(headers, file) {
+        const finalHeaders = { ...headers };
+        const contentType = this.resolveContentType(headers, file);
+        if (contentType) {
+            finalHeaders['Content-Type'] = contentType;
+            delete finalHeaders['content-type'];
+        }
+        return finalHeaders;
+    }
+    /**
+     * @private
+     */
+    resolveContentType(headers, file) {
+        const contentType = this.headerValue(headers['Content-Type']) ||
+            this.headerValue(headers['content-type']) ||
+            file.type ||
+            '';
+        const fileName = file instanceof File ? file.name : '';
+        const isZip = fileName.toLowerCase().endsWith('.zip') ||
+            contentType === 'application/x-zip-compressed' ||
+            contentType === 'application/zip-compressed';
+        return isZip ? 'application/zip' : contentType;
+    }
+    /**
+     * @private
+     */
+    headerValue(value) {
+        return Array.isArray(value) ? value.join(',') : (value ?? '');
+    }
+    /**
+     * @private
+     */
+    mapUploadEvent(event) {
+        switch (event.type) {
+            case HttpEventType.UploadProgress:
+                return Math.round((100 * event.loaded) / (event.total || 1));
+            case HttpEventType.Response:
+                return 100;
+            default:
+                return 0;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TkUploadTransportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TkUploadTransportService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TkUploadTransportService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Registers every service `tk-uploader` depends on (queue, preview,
+ * transport) — add to the `providers` of the component that hosts
+ * `tk-uploader` (or a parent). Each instance gets its own queue.
+ */
+function provideUploader() {
+    return [
+        UploaderStore,
+        { provide: UPLOADER_STORE, useExisting: UploaderStore },
+        UploaderPreviewProvider,
+        { provide: UPLOADER_PREVIEW_PROVIDER, useExisting: UploaderPreviewProvider },
+        TkUploadTransportService,
+        { provide: UPLOADER_TRANSPORT, useExisting: TkUploadTransportService },
+        UploaderQueueService
+    ];
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UPLOADER_PREVIEW_PROVIDER, UPLOADER_STORE, UPLOADER_TRANSPORT, UploaderComponent, UploaderQueueService, provideUploader };
+//# sourceMappingURL=tekus-design-system-components-uploader.mjs.map