@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-import-export-center.mjs

@@ -0,0 +1,1792 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, ElementRef, DestroyRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, TemplateRef, Directive, booleanAttribute, model, output, HostAttributeToken, viewChild, contentChild, signal, effect, untracked, afterRenderEffect } from '@angular/core';
+import { SlButton, SlButtonEnd, SlButtonLink } from '@slotted/angular/button';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlProgressBar } from '@slotted/angular/progress-indicator';
+import { SlResultState, SlResultStateActions, SlResultStateContent, SlResultStateDescription, SlResultStateTitle } from '@slotted/angular/result-state';
+import { SlSkeleton, SlSkeletonText } from '@slotted/angular/skeleton';
+import { SlTable, SlTableBody, SlTableCaption, SlTableCell, SlTableColumnHeader, SlTableContent, SlTableHead, SlTableRow } from '@slotted/angular/table';
+import { SlTab, SlTabList, SlTabs } from '@slotted/angular/tabs';
+import { filterJobs, activeJobCount, isFinishedJob, jobTransition, jobAnnouncement, remainingSeconds, jobControls, fileAvailability, jobGlyph, jobSummaryText, jobStatusText, jobProgressText, jobOutcome, hasDetails, focusDestination, jobNotice } from '@slotted/core/import-export-center';
+import { importExportCenterMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createControllable } from '@slotted/core/state';
+import { formatTimestamp } from '@slotted/core/timeline';
+import { fileKind, splitName, formatBytes } from '@slotted/core/upload';
+import * as i1 from '@slotted/angular/tooltip';
+import { SlTooltip, SlTooltipLayer, SlTooltipContent, provideTooltipDefaults } from '@slotted/angular/tooltip';
+import { SlToastService } from '@slotted/angular/toast';
+
+const FALLBACK = {
+    growing: 'none',
+    level: '2',
+    size: 'md',
+    timeFormat: 'relative',
+};
+const IMPORT_EXPORT_CENTER_DEFAULTS = new InjectionToken('slotted import-export-center defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once how its job centre reads — the size, the rank,
+ * how history loads, how time is written and in which zone. A centre that
+ * states any of them still wins. Its words and the locale come from the
+ * language in force (`provideSlotted`).
+ */
+function provideImportExportCenterDefaults(defaults) {
+    return {
+        provide: IMPORT_EXPORT_CENTER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+function injectImportExportCenterDefaults() {
+    return inject(IMPORT_EXPORT_CENTER_DEFAULTS);
+}
+class SlImportExportCenterIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-import-export-center-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenterIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenterIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenterIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * The family's one icon control, named by a tooltip with the words its
+ * accessible name carries: a cross with no words beside it is a control
+ * nobody can tell apart until it is named. The job's title describes it, and
+ * the tooltip's own content joins that description while it is open.
+ */
+class SlImportExportControl {
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** The id of the element that says which job the control acts on. */
+    describedBy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    tooltip = inject(SlTooltip);
+    native = inject(ElementRef).nativeElement;
+    constructor() {
+        this.tooltip.triggerNode.set(this.native);
+        inject(DestroyRef).onDestroy(() => this.tooltip.triggerNode.set(null));
+    }
+    describedByValue = computed(() => {
+        const ids = [this.describedBy(), this.tooltip.isOpen() ? this.tooltip.contentId : undefined];
+        const joined = ids.filter((id) => id !== undefined).join(' ');
+        return joined === '' ? null : joined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedByValue" }] : /* istanbul ignore next */ []));
+    onPointerEnter(event) {
+        if (event.pointerType === 'touch')
+            return;
+        this.tooltip.openAfterDelay(event);
+    }
+    onPointerLeave(event) {
+        this.tooltip.closeAfterDelay(event);
+    }
+    onPointerDown(event) {
+        if (event.pointerType === 'touch')
+            this.tooltip.pressAndHold(event);
+        else if (this.tooltip.isOpen())
+            this.tooltip.toggle(false, 'pointer', event);
+    }
+    onPointerUp() {
+        this.tooltip.cancelPending();
+    }
+    onFocus(event) {
+        if (!this.native.matches(':focus-visible'))
+            return;
+        this.tooltip.toggle(true, 'keyboard', event);
+    }
+    onBlur(event) {
+        if (this.tooltip.isOpen())
+            this.tooltip.toggle(false, 'blur', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlImportExportControl, isStandalone: true, selector: "button[slImportExportControl]", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.aria-label": "text()", "attr.aria-describedby": "describedByValue()" } }, providers: [provideTooltipDefaults({ openOn: 'hover', side: 'bottom' })], hostDirectives: [{ directive: i1.SlTooltip }], ngImport: i0, template: `<ng-content /><ng-template slTooltipLayer>
+      <div slTooltipContent>{{ text() }}</div>
+    </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: SlTooltipLayer, selector: "ng-template[slTooltipLayer]", exportAs: ["slTooltipLayer"] }, { kind: "component", type: SlTooltipContent, selector: "[slTooltipContent]", exportAs: ["slTooltipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slImportExportControl]',
+                    standalone: true,
+                    imports: [SlTooltipLayer, SlTooltipContent],
+                    template: `<ng-content /><ng-template slTooltipLayer>
+      <div slTooltipContent>{{ text() }}</div>
+    </ng-template>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: [provideTooltipDefaults({ openOn: 'hover', side: 'bottom' })],
+                    host: {
+                        type: 'button',
+                        '[attr.aria-label]': 'text()',
+                        '[attr.aria-describedby]': 'describedByValue()',
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointerup)': 'onPointerUp()',
+                        '(pointercancel)': 'onPointerUp()',
+                        '(focus)': 'onFocus($event)',
+                        '(blur)': 'onBlur($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }] } });
+
+/** The mark of a file's kind, the drawing `upload` puts in the same tile. */
+const KIND_GLYPH = {
+    pdf: 'file-text',
+    document: 'file-type',
+    spreadsheet: 'file-spreadsheet',
+    presentation: 'presentation',
+    image: 'file-image',
+    video: 'file-video',
+    audio: 'file-audio',
+    archive: 'file-archive',
+    other: 'file',
+};
+/** The parts focus can rest on in a job, in the order they are drawn. */
+const FOCUSABLE_PARTS = ['job-title', 'download', 'retry', 'cancel', 'toggle', 'remove'];
+const WAITING_ROWS = [0, 1, 2];
+const SAMPLE_LIMIT = 12;
+const COUNT_KEYS = ['total', 'processed', 'created', 'updated', 'skipped', 'failed'];
+/** A deadline is a date: day, month and time, in every time format. */
+const DEADLINE = {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+};
+function createRequest(reason, event) {
+    let cancelled = false;
+    return {
+        reason,
+        event,
+        get cancelled() {
+            return cancelled;
+        },
+        cancel() {
+            cancelled = true;
+        },
+    };
+}
+/** A click with no coordinates is a key. */
+function pressReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+function escapeKey(key) {
+    return key.replace(/[^\w-]/g, (character) => `-${character.charCodeAt(0).toString(16)}-`);
+}
+function sameKeys(a, b) {
+    return a.length === b.length && a.every((key, index) => key === b[index]);
+}
+/**
+ * The consumer's own controls for one job, after the family's.
+ *
+ * ```html
+ * <ng-template slImportExportJobActions let-job>
+ *   <a slButtonLink size="sm" variant="ghost" [href]="'/jobs/' + job.key">Abrir</a>
+ * </ng-template>
+ * ```
+ */
+class SlImportExportJobActions {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportJobActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlImportExportJobActions, isStandalone: true, selector: "ng-template[slImportExportJobActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportJobActions, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slImportExportJobActions]', standalone: true }]
+        }] });
+/** The consumer's controls in the header: an import dialog's trigger, an export button. */
+class SlImportExportCenterActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenterActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlImportExportCenterActions, isStandalone: true, selector: "[slImportExportCenterActions]", host: { attributes: { "data-part": "actions" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenterActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slImportExportCenterActions]',
+                    standalone: true,
+                    host: { 'data-part': 'actions' },
+                }]
+        }] });
+/** Replaces the view's empty page. */
+class SlImportExportCenterEmpty {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenterEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlImportExportCenterEmpty, isStandalone: true, selector: "[slImportExportCenterEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenterEmpty, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slImportExportCenterEmpty]', standalone: true }]
+        }] });
+/** The consumer's footer: the link from a popover to the whole page. */
+class SlImportExportCenterFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenterFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlImportExportCenterFooter, isStandalone: true, selector: "[slImportExportCenterFooter]", host: { attributes: { "data-part": "footer" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenterFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slImportExportCenterFooter]',
+                    standalone: true,
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+/**
+ * The jobs an application runs away from the page — imports and exports —
+ * and what the reader can do about each.
+ *
+ * **It holds none of the facts.** `jobs` is the consumer's array. Cancelling,
+ * retrying, removing, downloading, opening and loading are outputs with a
+ * reason, and the store answers by changing the array. The family never
+ * opens a connection and never transfers a byte: `upload` does, in the
+ * import dialog the consumer projects into the actions slot.
+ *
+ * **Two values move:** `[(view)]` and `[(expanded)]`, each with a request
+ * output that carries the reason and can be cancelled.
+ *
+ * **What a job offers is one table,** `jobControls` in
+ * `@slotted/core/import-export-center`, which the React binding renders too.
+ *
+ * **Focus never falls to the body.** A job that finishes while focus is on
+ * Cancel keeps focus in the job; a job that leaves takes focus to the same
+ * control of the job in its place.
+ */
+class SlImportExportCenter {
+    /** The consumer's jobs, in the order they are drawn. The family changes none of them. */
+    jobs = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "jobs" }] : /* istanbul ignore next */ []));
+    /** The strip's entries. `all`, `import` and `export` when unstated; one entry draws no strip. */
+    views = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    level = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    growing = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "growing" }] : /* istanbul ignore next */ []));
+    timeFormat = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    /** What numbers, sizes, times and deadlines are written in. Absent, the language in force. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    /** The moment a relative reading and a deadline count from. State it for a stable server render. */
+    now = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    status = input('ready', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Whether the history has another page; `growing="button"` draws `more` while it has. */
+    hasMore = input(false, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Words laid over the catalog of the language in force, key by key. */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** The view an unbound centre starts on, read once. */
+    defaultView = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultView" }] : /* istanbul ignore next */ []));
+    /** The keys an unbound centre starts with shown, read once. */
+    defaultExpanded = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultExpanded" }] : /* istanbul ignore next */ []));
+    /** The current view. Two-way. */
+    view = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /** The keys whose details are shown. Two-way. */
+    expanded = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    viewRequest = output();
+    expandedRequest = output();
+    cancelRequest = output();
+    retryRequest = output();
+    removeRequest = output();
+    /** Asked before a download. With an `href` the link navigates unless cancelled; without one the consumer produces the file. */
+    downloadRequest = output();
+    /** Asked before the title's link navigates to the job's page; cancellable. */
+    openRequest = output();
+    loadMoreRequest = output();
+    reloadRequest = output();
+    defaults = injectImportExportCenterDefaults();
+    native = inject(ElementRef).nativeElement;
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    listElement = viewChild('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listElement" }] : /* istanbul ignore next */ []));
+    jobActionsTemplate = contentChild(SlImportExportJobActions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "jobActionsTemplate" }] : /* istanbul ignore next */ []));
+    id = inject(SlImportExportCenterIdFactory).next();
+    titleId = `${this.id}-title`;
+    listId = `${this.id}-list`;
+    waitingRows = WAITING_ROWS;
+    pressReason = pressReason;
+    sizeValue = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
+    levelValue = computed(() => this.level() ?? this.defaults.level, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "levelValue" }] : /* istanbul ignore next */ []));
+    growingValue = computed(() => this.growing() ?? this.defaults.growing, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "growingValue" }] : /* istanbul ignore next */ []));
+    timeFormatValue = computed(() => this.timeFormat() ?? this.defaults.timeFormat, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormatValue" }] : /* istanbul ignore next */ []));
+    contextLocale = injectLocale();
+    localeValue = computed(() => this.locale() ?? this.contextLocale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "localeValue" }] : /* istanbul ignore next */ []));
+    timeZoneValue = computed(() => this.timeZone() ?? this.defaults.timeZone, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZoneValue" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this centre's `messages` laid over them. */
+    t = injectMessages(importExportCenterMessages, this.messages);
+    labelledBy = computed(() => this.writtenLabel !== null ? null : (this.writtenLabelledBy ?? this.titleId), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    viewList = computed(() => this.views() ?? [
+        { label: this.t('all'), value: 'all' },
+        { label: this.t('imports'), value: 'import' },
+        { label: this.t('exports'), value: 'export' },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewList" }] : /* istanbul ignore next */ []));
+    /** The view: the model, then defaultView, then the first entry. */
+    currentView = computed(() => this.view() ?? this.defaultView() ?? this.viewList()[0]?.value ?? 'all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    /** The shown keys: the model, then defaultExpanded. */
+    currentExpanded = computed(() => this.expanded() ?? this.defaultExpanded() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentExpanded" }] : /* istanbul ignore next */ []));
+    visibleJobs = computed(() => filterJobs(this.jobs(), this.currentView()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleJobs" }] : /* istanbul ignore next */ []));
+    active = computed(() => activeJobCount(this.jobs()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    finished = computed(() => this.visibleJobs().filter((job) => isFinishedJob(job) && job.removable !== false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finished" }] : /* istanbul ignore next */ []));
+    waiting = computed(() => this.loading() && this.visibleJobs().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "waiting" }] : /* istanbul ignore next */ []));
+    showEmpty = computed(() => !this.waiting() && this.visibleJobs().length === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
+    emptyTitle = computed(() => {
+        const view = this.currentView();
+        return view === 'import'
+            ? this.t('emptyImports')
+            : view === 'export'
+                ? this.t('emptyExports')
+                : this.t('empty');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
+    remaining = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remaining" }] : /* istanbul ignore next */ []));
+    samples = new Map();
+    jobViews = computed(() => {
+        const expanded = new Set(this.currentExpanded());
+        return this.visibleJobs().map((job) => this.viewOf(job, expanded));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "jobViews" }] : /* istanbul ignore next */ []));
+    memory = null;
+    revealing = null;
+    previous = null;
+    constructor() {
+        /* A transition of a shown job is announced once; the first render is not. */
+        effect(() => {
+            const jobs = this.jobs();
+            untracked(() => {
+                const seen = this.previous;
+                this.previous = new Map(jobs.map((job) => [job.key, job]));
+                if (seen === null)
+                    return;
+                for (const job of jobs) {
+                    const transition = jobTransition(seen.get(job.key), job);
+                    if (transition !== null) {
+                        getLiveAnnouncer().announce(jobAnnouncement(transition, job, this.t));
+                    }
+                }
+            });
+        });
+        /* The time left: samples of the progress the family has seen, and the server's eta first. */
+        effect(() => {
+            const jobs = this.jobs();
+            const now = this.now() ?? Date.now();
+            const timeZone = this.timeZoneValue();
+            untracked(() => {
+                const next = new Map();
+                for (const job of jobs) {
+                    if (job.status !== 'running') {
+                        this.samples.delete(job.key);
+                        continue;
+                    }
+                    const value = job.progress?.value;
+                    const max = job.progress?.max;
+                    const list = this.samples.get(job.key) ?? [];
+                    if (value !== undefined && max !== undefined && list.at(-1)?.value !== value) {
+                        list.push({ at: Date.now(), max, value });
+                        if (list.length > SAMPLE_LIMIT)
+                            list.shift();
+                        this.samples.set(job.key, list);
+                    }
+                    next.set(job.key, remainingSeconds(job, list, { now, timeZone }));
+                }
+                this.remaining.set(next);
+            });
+        });
+        /* A key that left the jobs leaves the set. */
+        effect(() => {
+            const present = new Set(this.jobs().map((job) => job.key));
+            untracked(() => {
+                const own = this.expanded();
+                if (own === undefined)
+                    return;
+                const kept = own.filter((key) => present.has(key));
+                if (kept.length !== own.length)
+                    this.expanded.set(kept);
+            });
+        });
+        /* After every render: focus that lost its element, and a job being revealed. */
+        afterRenderEffect(() => {
+            this.jobViews();
+            untracked(() => {
+                this.restoreFocus();
+                this.finishReveal();
+            });
+        });
+    }
+    /** Focuses the first job's first control, or the list when there is none. */
+    focus() {
+        const list = this.listElement()?.nativeElement;
+        const first = list?.querySelector(':scope > [data-part="job"] :is(a[data-part="job-title"], [data-part="controls"] button, [data-part="controls"] a)');
+        (first ?? list)?.focus();
+    }
+    /** Shows a job's details, scrolls it into view and focuses its title: where a toast's View takes the reader. */
+    reveal(key) {
+        const job = this.jobs().find((each) => each.key === key);
+        if (job === undefined)
+            return;
+        const keys = this.currentExpanded();
+        if (!keys.includes(key))
+            this.requestExpanded([...keys, key], 'programmatic', undefined);
+        if (filterJobs([job], this.currentView()).length === 0) {
+            this.selectView('all', 'programmatic', undefined);
+        }
+        this.revealing = key;
+    }
+    formatCount(value) {
+        return new Intl.NumberFormat(this.localeValue()).format(value);
+    }
+    deadline(value) {
+        return formatTimestamp(value, {
+            absolute: DEADLINE,
+            format: 'absolute',
+            locale: this.localeValue(),
+            timeZone: this.timeZoneValue(),
+        }).text;
+    }
+    viewOf(job, expandedKeys) {
+        const t = this.t;
+        const locale = this.localeValue();
+        const clock = { now: this.now(), timeZone: this.timeZoneValue() };
+        const prefix = `${this.id}-${escapeKey(job.key)}`;
+        const ids = {
+            control: (part) => `${prefix}-${part}`,
+            details: `${prefix}-details`,
+            status: `${prefix}-status`,
+            title: `${prefix}-title`,
+            toggle: `${prefix}-toggle`,
+        };
+        const controls = jobControls(job, clock);
+        const kindFile = job.result ?? job.source;
+        const kind = kindFile !== undefined
+            ? fileKind({ name: kindFile.name, type: kindFile.type ?? '' })
+            : job.format !== undefined
+                ? fileKind({ name: `job.${job.format.toLowerCase()}`, type: '' })
+                : 'other';
+        const shown = job.direction === 'export' ? (job.result ?? job.source) : (job.source ?? job.result);
+        const when = job.status === 'succeeded' || job.status === 'failed'
+            ? (job.finishedAt ?? job.createdAt)
+            : job.createdAt;
+        const counts = job.counts ?? {};
+        const count = new Intl.NumberFormat(locale);
+        const errors = job.errors ?? [];
+        const total = Math.max(job.errorCount ?? 0, errors.length);
+        const files = [
+            ['source', job.source],
+            ['result', job.result],
+            ['errors', job.errorsFile],
+        ]
+            .filter((entry) => entry[1] !== undefined)
+            .map(([role, file]) => {
+            const availability = fileAvailability(file, clock);
+            const { stem, extension } = splitName(file.name);
+            return {
+                availability,
+                downloadable: availability === 'available' || availability === 'expires',
+                extension,
+                file,
+                label: t(`fileLabels.${role}`),
+                note: availability === 'denied'
+                    ? (file.denied ?? null)
+                    : file.expiresAt === undefined
+                        ? null
+                        : availability === 'expired'
+                            ? t('expired', { date: this.deadline(file.expiresAt) })
+                            : t('expires', { date: this.deadline(file.expiresAt) }),
+                role,
+                size: file.size === undefined ? null : formatBytes(file.size, locale),
+                stem,
+            };
+        });
+        const downloadFile = controls.download === 'errors'
+            ? (job.errorsFile ?? null)
+            : controls.download === 'result'
+                ? (job.result ?? null)
+                : null;
+        const mark = jobGlyph(job);
+        return {
+            controls,
+            counts: COUNT_KEYS.filter((name) => typeof counts[name] === 'number').map((name) => ({
+                key: name,
+                label: t(`countLabels.${name}`),
+                value: count.format(counts[name] ?? 0),
+            })),
+            downloadFile,
+            downloadLabel: controls.download === 'errors' ? t('downloadErrors') : t('download'),
+            errorNote: total > errors.length && errors.length > 0
+                ? t('sample', { shown: errors.length, total })
+                : null,
+            expanded: expandedKeys.has(job.key) && controls.controls.includes('toggle') && hasDetails(job),
+            file: shown === undefined
+                ? null
+                : {
+                    ...splitName(shown.name),
+                    size: shown.size === undefined ? null : formatBytes(shown.size, locale),
+                },
+            files,
+            ids,
+            job,
+            directionText: t(job.direction),
+            kind,
+            kindGlyph: KIND_GLYPH[kind],
+            mark,
+            message: this.messageOf(job, clock),
+            ordered: controls.controls.filter((part) => part !== 'remove'),
+            outcome: jobOutcome(job),
+            progressText: job.status === 'running'
+                ? jobProgressText(job, {
+                    locale,
+                    t,
+                    remaining: this.remaining().get(job.key),
+                })
+                : [],
+            removable: controls.controls.includes('remove'),
+            retryLabel: controls.retry === 'regenerate' ? t('regenerate') : t('retry'),
+            statusText: jobStatusText(job, t),
+            summary: jobSummaryText(job, { locale, t }),
+            time: when === undefined
+                ? null
+                : formatTimestamp(when, {
+                    format: this.timeFormatValue(),
+                    locale,
+                    now: this.now(),
+                    timeZone: this.timeZoneValue(),
+                }),
+        };
+    }
+    messageOf(job, clock) {
+        if (job.message !== undefined && job.message !== '')
+            return job.message;
+        const result = job.result;
+        if (result === undefined)
+            return null;
+        const availability = fileAvailability(result, clock);
+        if (availability === 'denied')
+            return result.denied ?? null;
+        if (result.expiresAt === undefined)
+            return null;
+        if (availability === 'expired')
+            return this.t('expired', { date: this.deadline(result.expiresAt) });
+        if (availability === 'expires')
+            return this.t('expires', { date: this.deadline(result.expiresAt) });
+        return null;
+    }
+    /* ── The two models ────────────────────────────────────────────────── */
+    forwardView(request) {
+        if (request.value === undefined)
+            return;
+        this.selectView(request.value, request.reason, request.source);
+    }
+    selectView(next, reason, source) {
+        if (next === this.currentView())
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.currentView(),
+            onRequest: (request) => {
+                this.viewRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        /* The model is the state: written once the request is accepted, which is
+           what `[(view)]` binds and what an unbound centre keeps. */
+        if (!cancelled && moved)
+            this.view.set(next);
+    }
+    requestExpanded(next, reason, source) {
+        if (sameKeys(next, this.currentExpanded()))
+            return;
+        let cancelled = false;
+        const state = createControllable({
+            equals: (a, b) => sameKeys(a ?? [], b ?? []),
+            initial: this.currentExpanded(),
+            onRequest: (request) => {
+                this.expandedRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (!cancelled && moved)
+            this.expanded.set(next);
+    }
+    toggle(key, reason, event) {
+        const keys = this.currentExpanded();
+        this.requestExpanded(keys.includes(key) ? keys.filter((each) => each !== key) : [...keys, key], reason, event);
+    }
+    /* ── Requests ──────────────────────────────────────────────────────── */
+    press(part, key, event) {
+        const request = Object.assign(createRequest(pressReason(event), event), { key });
+        (part === 'cancel' ? this.cancelRequest : this.retryRequest).emit(request);
+    }
+    removeOne(key, event) {
+        this.removeRequest.emit(Object.assign(createRequest(pressReason(event), event), { keys: [key] }));
+    }
+    clear(event) {
+        this.removeRequest.emit(Object.assign(createRequest('clear', event), {
+            keys: this.finished().map((job) => job.key),
+        }));
+    }
+    askDownload(key, file, event) {
+        const request = Object.assign(createRequest(pressReason(event), event), { file, key });
+        this.downloadRequest.emit(request);
+        if (request.cancelled)
+            event.preventDefault();
+    }
+    open(key, event) {
+        const request = Object.assign(createRequest(pressReason(event), event), { key });
+        this.openRequest.emit(request);
+        if (request.cancelled)
+            event.preventDefault();
+    }
+    loadMore(event) {
+        if (this.loading())
+            return;
+        this.loadMoreRequest.emit(createRequest(pressReason(event), event));
+    }
+    reload(event) {
+        this.reloadRequest.emit(createRequest(pressReason(event), event));
+    }
+    /* ── Focus ─────────────────────────────────────────────────────────── */
+    rememberFocus(event) {
+        const list = this.listElement()?.nativeElement;
+        const target = event.target;
+        const job = target?.closest('[data-part="job"]') ?? null;
+        if (list === undefined || target === null || job === null || !list.contains(job)) {
+            this.memory = null;
+            return;
+        }
+        const all = [...list.querySelectorAll(':scope > [data-part="job"]')];
+        let part = 'job-title';
+        for (let node = target; node !== null && node !== job; node = node.parentElement) {
+            const name = node.dataset['part'];
+            if (name !== undefined && FOCUSABLE_PARTS.includes(name)) {
+                part = name;
+                break;
+            }
+        }
+        this.memory = { element: target, index: all.indexOf(job), key: job.dataset['key'] ?? '', part };
+    }
+    focusPart(list, key, part) {
+        const job = list.querySelector(`:scope > [data-part="job"][data-key="${CSS.escape(key)}"]`);
+        const holder = job?.querySelector(`[data-part="${part}"]`) ?? null;
+        const target = holder === null
+            ? null
+            : holder.matches('button, a, [tabindex]')
+                ? holder
+                : holder.querySelector('button, a');
+        target?.focus();
+    }
+    restoreFocus() {
+        const kept = this.memory;
+        const list = this.listElement()?.nativeElement;
+        if (kept === null || list === undefined || kept.element.isConnected)
+            return;
+        const active = list.ownerDocument.activeElement;
+        if (active !== null && active !== list.ownerDocument.body)
+            return;
+        const drawn = [
+            ...list.querySelectorAll(':scope > [data-part="job"][data-key]'),
+        ].map((job) => ({
+            key: job.dataset['key'] ?? '',
+            parts: FOCUSABLE_PARTS.filter((part) => part !== 'job-title' && job.querySelector(`[data-part="${part}"]`) !== null),
+        }));
+        const destination = focusDestination(kept, drawn);
+        this.memory = null;
+        if ('list' in destination)
+            list.focus();
+        else
+            this.focusPart(list, destination.key, destination.part);
+    }
+    finishReveal() {
+        const key = this.revealing;
+        const list = this.listElement()?.nativeElement;
+        if (key === null || list === undefined)
+            return;
+        this.revealing = null;
+        const job = list.querySelector(`:scope > [data-part="job"][data-key="${CSS.escape(key)}"]`);
+        if (job === null)
+            return;
+        job.scrollIntoView?.({ block: 'nearest' });
+        job.querySelector('[data-part="job-title"]')?.focus({ preventScroll: true });
+    }
+    /** The element the family renders on: the region a consumer's ref reaches. */
+    get element() {
+        return this.native;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlImportExportCenter, isStandalone: true, selector: "section[slImportExportCenter]", inputs: { jobs: { classPropertyName: "jobs", publicName: "jobs", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, growing: { classPropertyName: "growing", publicName: "growing", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, now: { classPropertyName: "now", publicName: "now", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, defaultExpanded: { classPropertyName: "defaultExpanded", publicName: "defaultExpanded", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", expanded: "expandedChange", viewRequest: "viewRequest", expandedRequest: "expandedRequest", cancelRequest: "cancelRequest", retryRequest: "retryRequest", removeRequest: "removeRequest", downloadRequest: "downloadRequest", openRequest: "openRequest", loadMoreRequest: "loadMoreRequest", reloadRequest: "reloadRequest" }, host: { attributes: { "data-ui": "import-export-center", "data-part": "root" }, properties: { "attr.data-size": "sizeValue()", "attr.data-level": "levelValue()", "attr.data-growing": "growingValue()", "attr.data-time-format": "timeFormatValue()", "attr.data-view": "currentView()", "attr.data-loading": "loading() ? '' : null", "attr.data-status": "status() === 'error' ? 'error' : null", "attr.aria-labelledby": "labelledBy()" } }, queries: [{ propertyName: "jobActionsTemplate", first: true, predicate: SlImportExportJobActions, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listElement", first: true, predicate: ["list"], descendants: true, isSignal: true }], exportAs: ["slImportExportCenter"], ngImport: i0, template: `
+    <div data-part="header">
+      @switch (levelValue()) {
+        @case ('3') {
+          <h3 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (active() > 0) {
+              <span data-part="count">{{ t('active', { count: active() }) }}</span>
+            }
+          </h3>
+        }
+        @case ('4') {
+          <h4 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (active() > 0) {
+              <span data-part="count">{{ t('active', { count: active() }) }}</span>
+            }
+          </h4>
+        }
+        @default {
+          <h2 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (active() > 0) {
+              <span data-part="count">{{ t('active', { count: active() }) }}</span>
+            }
+          </h2>
+        }
+      }
+      <div data-part="tools">
+        @if (finished().length > 0) {
+          <span data-part="clear">
+            <button
+              slButton
+              size="sm"
+              tone="secondary"
+              variant="ghost"
+              type="button"
+              (click)="clear($event)"
+            >
+              {{ t('clear') }}
+            </button>
+          </span>
+        }
+        <ng-content select="[slImportExportCenterActions]" />
+      </div>
+    </div>
+    @if (viewList().length > 1) {
+      <div data-part="views">
+        <div
+          slTabs
+          track="none"
+          [size]="sizeValue()"
+          [value]="currentView()"
+          (valueChange)="forwardView($event)"
+        >
+          <div slTabList [attr.aria-label]="t('views')">
+            @for (entry of viewList(); track entry.value) {
+              <div slTab [value]="entry.value" [controls]="listId">{{ entry.label }}</div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+    @if (status() === 'error') {
+      <div data-part="error">
+        <section slResultState reach="section" status="error" live="off">
+          <div slResultStateContent>
+            <div slResultStateTitle>{{ t('loadError') }}</div>
+            <p slResultStateDescription>{{ t('loadErrorDescription') }}</p>
+          </div>
+          <div slResultStateActions>
+            <button
+              slButton
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              type="button"
+              (click)="reload($event)"
+            >
+              {{ t('reload') }}
+            </button>
+          </div>
+        </section>
+      </div>
+    } @else if (showEmpty()) {
+      <div data-part="empty">
+        <ng-content select="[slImportExportCenterEmpty]">
+          <section slResultState reach="section" status="empty" live="off">
+            <div slResultStateContent>
+              <div slResultStateTitle>{{ emptyTitle() }}</div>
+              <p slResultStateDescription>{{ t('emptyDescription') }}</p>
+            </div>
+          </section>
+        </ng-content>
+      </div>
+    } @else {
+      <ul
+        #list
+        data-part="list"
+        tabindex="-1"
+        [id]="listId"
+        [attr.aria-labelledby]="titleId"
+        [attr.aria-busy]="loading() ? 'true' : null"
+        (focusin)="rememberFocus($event)"
+      >
+        @if (waiting()) {
+          @for (row of waitingRows; track row) {
+            <li data-part="job" aria-hidden="true">
+              <span data-part="visual"><span slSkeleton shape="block"></span></span>
+              <div data-part="body">
+                <span slSkeletonText [lines]="2"></span>
+                <span slSkeletonText [lines]="1"></span>
+              </div>
+            </li>
+          }
+        } @else {
+          @for (view of jobViews(); track view.job.key) {
+            <ng-container
+              [ngTemplateOutlet]="jobTemplate"
+              [ngTemplateOutletContext]="{ $implicit: view }"
+            />
+          }
+        }
+      </ul>
+    }
+    @if (status() !== 'error' && growingValue() === 'button' && hasMore() && !waiting()) {
+      <button
+        data-part="more"
+        type="button"
+        [attr.aria-disabled]="loading() ? 'true' : null"
+        [attr.data-loading]="loading() ? '' : null"
+        (click)="loadMore($event)"
+      >
+        {{ loading() ? t('loading') : t('loadMore') }}
+      </button>
+    }
+    <ng-content select="[slImportExportCenterFooter]" />
+
+    <ng-template #fileName let-stem="stem" let-extension="extension">
+      <span data-part="file-name" dir="auto"
+        ><span data-part="name">{{ stem }}</span>
+        @if (extension !== '') {
+          <span data-part="extension">{{ extension }}</span>
+        }
+      </span>
+    </ng-template>
+
+    <ng-template
+      #download
+      let-view="view"
+      let-file="file"
+      let-role="role"
+      let-label="label"
+      let-primary="primary"
+    >
+      <span data-part="download">
+        @if (file.href === undefined) {
+          <button
+            slButton
+            size="sm"
+            tone="secondary"
+            type="button"
+            [variant]="primary ? 'outline' : 'ghost'"
+            [attr.id]="primary ? view.ids.control('download') : null"
+            [attr.aria-labelledby]="
+              primary ? view.ids.control('download') + ' ' + view.ids.title : null
+            "
+            [attr.aria-describedby]="primary ? view.ids.status : null"
+            (click)="askDownload(view.job.key, role, $event)"
+          >
+            {{ label }}
+          </button>
+        } @else {
+          <a
+            slButtonLink
+            size="sm"
+            tone="secondary"
+            [variant]="primary ? 'outline' : 'ghost'"
+            [href]="file.href"
+            [attr.download]="file.name"
+            [attr.id]="primary ? view.ids.control('download') : null"
+            [attr.aria-labelledby]="
+              primary ? view.ids.control('download') + ' ' + view.ids.title : null
+            "
+            [attr.aria-describedby]="primary ? view.ids.status : null"
+            (click)="askDownload(view.job.key, role, $event)"
+            >{{ label }}</a
+          >
+        }
+      </span>
+    </ng-template>
+
+    <ng-template #jobTemplate let-view>
+      <li
+        data-part="job"
+        [attr.data-key]="view.job.key"
+        [attr.data-direction]="view.job.direction"
+        [attr.data-status]="view.job.status"
+        [attr.data-outcome]="view.outcome"
+        [attr.data-expired]="view.controls.expired ? '' : null"
+        [attr.data-expanded]="view.expanded ? '' : null"
+      >
+        <span data-part="visual" aria-hidden="true" [attr.data-kind]="view.kind"
+          ><span slIcon><svg slGlyph [name]="view.kindGlyph"></svg></span
+        ></span>
+        <div data-part="body">
+          <div data-part="heading">
+            @if (view.job.href === undefined) {
+              <span data-part="job-title" tabindex="-1" [id]="view.ids.title">{{
+                view.job.title
+              }}</span>
+            } @else {
+              <a
+                data-part="job-title"
+                [id]="view.ids.title"
+                [attr.href]="view.job.href"
+                (click)="open(view.job.key, $event)"
+                >{{ view.job.title }}</a
+              >
+            }
+            <p data-part="meta">
+              <span>{{ view.directionText }}</span>
+              @if (view.job.format !== undefined) {
+                <span>{{ view.job.format }}</span>
+              }
+              @if (view.file !== null) {
+                <span
+                  ><ng-container
+                    [ngTemplateOutlet]="fileName"
+                    [ngTemplateOutletContext]="{
+                      stem: view.file.stem,
+                      extension: view.file.extension,
+                    }"
+                /></span>
+                @if (view.file.size !== null) {
+                  <span>{{ view.file.size }}</span>
+                }
+              }
+              @if (view.job.actor !== undefined) {
+                <span>{{ view.job.actor }}</span>
+              }
+              @if (view.time !== null) {
+                <time
+                  data-part="time"
+                  [attr.datetime]="view.time.dateTime"
+                  [attr.title]="view.time.title"
+                  >{{ view.time.text }}</time
+                >
+              }
+            </p>
+          </div>
+          <div data-part="status" [id]="view.ids.status">
+            <span data-part="mark" aria-hidden="true">
+              @if (view.mark === 'spinner') {
+                <span data-ui="spinner"></span>
+              } @else {
+                <span slIcon><svg slGlyph [name]="view.mark"></svg></span>
+              }
+            </span>
+            <span data-part="status-label"
+              ><span>{{ view.statusText }}</span>
+              @if (view.job.stage) {
+                <span data-part="stage" [attr.title]="view.job.stage">{{ view.job.stage }}</span>
+              }
+            </span>
+          </div>
+          @if (view.job.status === 'running') {
+            <div data-part="progress">
+              <div
+                slProgressBar
+                hideLabel
+                size="sm"
+                tone="accent"
+                [delay]="0"
+                [label]="view.job.title"
+                [max]="view.job.progress?.max ?? 100"
+                [value]="view.job.progress?.value ?? null"
+                [valueText]="
+                  view.progressText.length > 0 ? view.progressText.join(', ') : undefined
+                "
+              ></div>
+              @if (view.progressText.length > 0) {
+                <span data-part="progress-text">
+                  @for (item of view.progressText; track item) {
+                    <span>{{ item }}</span>
+                  }
+                </span>
+              }
+            </div>
+          }
+          @if (view.summary.length > 0) {
+            <p data-part="summary">
+              @for (item of view.summary; track item) {
+                <span>{{ item }}</span>
+              }
+            </p>
+          }
+          @if (view.message !== null) {
+            <p data-part="message">{{ view.message }}</p>
+          }
+        </div>
+        @if (view.ordered.length > 0 || view.removable || jobActionsTemplate()) {
+          <div data-part="controls">
+            @for (part of view.ordered; track part) {
+              @switch (part) {
+                @case ('download') {
+                  @if (view.downloadFile !== null) {
+                    <ng-container
+                      [ngTemplateOutlet]="download"
+                      [ngTemplateOutletContext]="{
+                        view,
+                        file: view.downloadFile,
+                        role: view.controls.download,
+                        label: view.downloadLabel,
+                        primary: true,
+                      }"
+                    />
+                  }
+                }
+                @case ('toggle') {
+                  <span data-part="toggle" [attr.data-expanded]="view.expanded ? '' : null">
+                    <button
+                      slButton
+                      size="sm"
+                      tone="secondary"
+                      variant="ghost"
+                      type="button"
+                      [id]="view.ids.toggle"
+                      [attr.aria-expanded]="view.expanded ? 'true' : 'false'"
+                      [attr.aria-controls]="view.ids.details"
+                      [attr.aria-labelledby]="view.ids.toggle + ' ' + view.ids.title"
+                      (click)="toggle(view.job.key, pressReason($event), $event)"
+                    >
+                      {{ t('details') }}
+                      <span slButtonEnd
+                        ><span data-part="chevron"
+                          ><span slIcon><svg slGlyph name="chevron-down"></svg></span></span
+                      ></span>
+                    </button>
+                  </span>
+                }
+                @default {
+                  <span [attr.data-part]="part">
+                    <button
+                      slButton
+                      size="sm"
+                      tone="secondary"
+                      variant="outline"
+                      type="button"
+                      [id]="view.ids.control(part)"
+                      [attr.aria-labelledby]="view.ids.control(part) + ' ' + view.ids.title"
+                      [attr.aria-describedby]="view.ids.status"
+                      (click)="press(part, view.job.key, $event)"
+                    >
+                      {{ part === 'cancel' ? t('cancel') : view.retryLabel }}
+                    </button>
+                  </span>
+                }
+              }
+            }
+            @if (jobActionsTemplate(); as own) {
+              <span data-part="job-actions"
+                ><ng-container
+                  [ngTemplateOutlet]="own.template"
+                  [ngTemplateOutletContext]="{ $implicit: view.job }"
+              /></span>
+            }
+            @if (view.removable) {
+              <button
+                slImportExportControl
+                data-part="remove"
+                [text]="t('remove')"
+                [describedBy]="view.ids.title"
+                (click)="removeOne(view.job.key, $event)"
+              >
+                <span slIcon><svg slGlyph name="x"></svg></span>
+              </button>
+            }
+          </div>
+        }
+        @if (view.expanded) {
+          <div
+            data-part="details"
+            role="region"
+            [id]="view.ids.details"
+            [attr.aria-labelledby]="view.ids.toggle"
+          >
+            @if (view.counts.length > 0) {
+              <dl data-part="counts">
+                @for (count of view.counts; track count.key) {
+                  <div [attr.data-count]="count.key">
+                    <dt>{{ count.label }}</dt>
+                    <dd>{{ count.value }}</dd>
+                  </div>
+                }
+              </dl>
+            }
+            @if (view.files.length > 0) {
+              <ul data-part="files">
+                @for (row of view.files; track row.role) {
+                  <li data-part="file" [attr.data-availability]="row.availability">
+                    <span data-part="meta">
+                      <strong>{{ row.label }}</strong>
+                      <span
+                        ><ng-container
+                          [ngTemplateOutlet]="fileName"
+                          [ngTemplateOutletContext]="{ stem: row.stem, extension: row.extension }"
+                      /></span>
+                      @if (row.size !== null) {
+                        <span>{{ row.size }}</span>
+                      }
+                      @if (row.note !== null) {
+                        <span>{{ row.note }}</span>
+                      }
+                    </span>
+                    @if (row.downloadable) {
+                      <ng-container
+                        [ngTemplateOutlet]="download"
+                        [ngTemplateOutletContext]="{
+                          view,
+                          file: row.file,
+                          role: row.role,
+                          label: t('download'),
+                          primary: false,
+                        }"
+                      />
+                    }
+                  </li>
+                }
+              </ul>
+            }
+            @if ((view.job.errors?.length ?? 0) > 0) {
+              <div data-part="errors">
+                <div slTable variant="framed" [columns]="4">
+                  <div slTableContent>
+                    <caption slTableCaption>
+                      {{
+                        t('errorsCaption')
+                      }}
+                    </caption>
+                    <thead slTableHead>
+                      <tr slTableRow>
+                        <th slTableColumnHeader numeric>{{ t('errorColumns.row') }}</th>
+                        <th slTableColumnHeader>{{ t('errorColumns.message') }}</th>
+                        <th slTableColumnHeader>{{ t('errorColumns.column') }}</th>
+                        <th slTableColumnHeader>{{ t('errorColumns.value') }}</th>
+                      </tr>
+                    </thead>
+                    <tbody slTableBody>
+                      @for (error of view.job.errors; track $index) {
+                        <tr slTableRow>
+                          <td slTableCell numeric>{{ formatCount(error.row) }}</td>
+                          <td slTableCell>{{ error.message }}</td>
+                          <td slTableCell>{{ error.column ?? '' }}</td>
+                          <td slTableCell>{{ error.value ?? '' }}</td>
+                        </tr>
+                      }
+                    </tbody>
+                  </div>
+                </div>
+                @if (view.errorNote !== null) {
+                  <p data-part="errors-note">
+                    <span>{{ view.errorNote }}</span>
+                  </p>
+                }
+              </div>
+            }
+          </div>
+        }
+      </li>
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=import-export-center]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-import-export-center-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-import-export-center-background, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_inset-inline: var( --slotted-import-export-center-inset-inline-md, var(--slotted-space-6, 1rem) );--_inset-block: var( --slotted-import-export-center-inset-block-md, var(--slotted-space-5, .75rem) );--_gap: var(--slotted-import-export-center-gap-md, var(--slotted-space-5, .75rem));--_title-size: var(--slotted-font-size-lg, 1rem);--_title-line-height: var(--slotted-line-height-lg, 1.5);--_job-title-size: var(--slotted-font-size-md, .875rem);--_job-title-line-height: var(--slotted-line-height-md, 1.5);--_meta-size: var(--slotted-font-size-sm, .8125rem);--_meta-line-height: var(--slotted-line-height-sm, 1.45);--_small-size: var(--slotted-font-size-xs, .75rem);--_small-line-height: var(--slotted-line-height-xs, 1.4);--_glyph: var(--slotted-control-icon-size-md, 16px);--_tile: calc(2 * var(--_glyph));--_control-glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_control-glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_count-size: var(--slotted-font-size-xs, .75rem);--_count-box: calc( var(--_count-size) + 2 * var(--slotted-space-1, .125rem) + 2 * var(--slotted-border-width-thin, 1px) );--_rule-size: var(--slotted-border-width-thin, 1px);--_mark-gap: var(--slotted-space-3, .375rem);--_separator: 3px;--_separator-gap: var(--slotted-space-5, .75rem);--_status-column: var(--slotted-import-export-center-status-column, 16rem);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);background-color:var(--_ground);color:var(--_text);container-name:import-export-center;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui=import-export-center][data-size=sm]{min-inline-size:var( --slotted-import-export-center-min-inline-size-sm, min(24rem, calc(100vw - var(--slotted-space-8, 2rem))) );--_inset-inline: var( --slotted-import-export-center-inset-inline-sm, var(--slotted-space-5, .75rem) );--_inset-block: var( --slotted-import-export-center-inset-block-sm, var(--slotted-space-4, .5rem) );--_gap: var(--slotted-import-export-center-gap-sm, var(--slotted-space-4, .5rem));--_title-size: var(--slotted-font-size-md, .875rem);--_title-line-height: var(--slotted-line-height-md, 1.5);--_job-title-size: var(--slotted-font-size-sm, .8125rem);--_job-title-line-height: var(--slotted-line-height-sm, 1.45);--_meta-size: var(--slotted-font-size-xs, .75rem);--_meta-line-height: var(--slotted-line-height-xs, 1.4);--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_control-glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-sm, 22px) )}[data-ui=import-export-center]>[data-part=header]{align-items:center;border-block-end:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--_gap);justify-content:flex-end;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=import-export-center]>[data-part=header]>[data-part=title]{align-items:center;color:var(--_text);display:inline-flex;flex-wrap:wrap;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-size);font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--slotted-space-3, .375rem);letter-spacing:-.01em;line-height:var(--_title-line-height);margin:0;margin-inline-end:auto;min-inline-size:0}[data-ui=import-export-center]>[data-part=header]>[data-part=title]>[data-part=count]{align-items:center;background-color:var(--slotted-tone-accent-surface, Canvas);block-size:var(--_count-box);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,currentcolor 20%,transparent);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--slotted-tone-accent-text, Highlight);display:inline-flex;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);justify-content:center;letter-spacing:0;line-height:1;min-inline-size:var(--_count-box);padding-block:0;padding-inline:var(--slotted-space-3, .375rem);white-space:nowrap}[data-ui=import-export-center]>[data-part=header]>[data-part=tools]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);justify-content:flex-end;min-inline-size:0}[data-ui=import-export-center] [data-part=tools]>[data-part=clear],[data-ui=import-export-center] [data-part=tools]>[data-part=actions]{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px)}[data-ui=import-export-center]>[data-part=views]{border-block-end:var(--_rule-size) solid var(--_rule);min-inline-size:0;padding-inline:var(--_inset-inline)}[data-ui=import-export-center]>[data-part=list]{display:flex;flex:1 1 auto;flex-direction:column;list-style:none;margin:0;min-block-size:0;min-inline-size:0;overflow-y:auto;overscroll-behavior:contain;padding:0;scrollbar-color:var(--slotted-border-strong, ButtonBorder) transparent;scrollbar-width:thin}[data-ui=import-export-center]>[data-part=list]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=import-export-center]>[data-part=list]>[data-part=job]{--_tone-text: var(--slotted-tone-secondary-text, CanvasText);--_tone-solid: var(--slotted-tone-secondary-solid, CanvasText);align-items:start;border-block-end:var(--_rule-size) solid var(--_rule);column-gap:var(--_gap);display:grid;grid-template-areas:\"visual body\" \"visual controls\" \". details\";grid-template-columns:var(--_tile) minmax(0,1fr);min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);row-gap:var(--slotted-space-4, .5rem)}[data-ui=import-export-center]>[data-part=list]>[data-part=job]:last-child{border-block-end:0}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-status=running]{--_tone-text: var(--slotted-tone-accent-text, Highlight);--_tone-solid: var(--slotted-tone-accent-solid, Highlight)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-outcome=success]{--_tone-text: var(--slotted-tone-success-text, CanvasText);--_tone-solid: var(--slotted-tone-success-solid, CanvasText)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-outcome=partial]{--_tone-text: var(--slotted-tone-warning-text, CanvasText);--_tone-solid: var(--slotted-tone-warning-solid, CanvasText)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-outcome=failed]{--_tone-text: var(--slotted-tone-danger-text, CanvasText);--_tone-solid: var(--slotted-tone-danger-solid, CanvasText)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-outcome=canceled]{--_tone-text: var(--_muted);--_tone-solid: var(--_muted)}[data-ui=import-export-center] [data-part=job]>[data-part=visual]{--_kind-tile: var(--slotted-upload-kind-other);--slotted-icon-size: var(--_glyph);align-items:center;background-color:var(--_kind-tile);block-size:var(--_tile);border-radius:var(--slotted-radius-sm, 4px);color:var(--slotted-upload-kind-foreground);display:inline-flex;grid-area:visual;inline-size:var(--_tile);justify-content:center;margin-block-start:round(nearest,calc((var(--_job-title-size) * var(--_job-title-line-height) + var(--_meta-size) * var(--_meta-line-height) - var(--_tile)) / 2),1px)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=pdf]{--_kind-tile: var(--slotted-upload-kind-pdf)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=document]{--_kind-tile: var(--slotted-upload-kind-document)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=spreadsheet]{--_kind-tile: var(--slotted-upload-kind-spreadsheet)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=presentation]{--_kind-tile: var(--slotted-upload-kind-presentation)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=image]{--_kind-tile: var(--slotted-upload-kind-image)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=video]{--_kind-tile: var(--slotted-upload-kind-video)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=audio]{--_kind-tile: var(--slotted-upload-kind-audio)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=archive]{--_kind-tile: var(--slotted-upload-kind-archive)}[data-ui=import-export-center] [data-part=job]>[data-part=body]{display:grid;gap:var(--slotted-space-3, .375rem);grid-area:body;grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui=import-export-center] [data-part=job]>[data-part=body]>[data-part=heading]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0}[data-ui=import-export-center] [data-part=heading]>[data-part=job-title]{align-self:flex-start;color:var(--_text);font-size:var(--_job-title-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_job-title-line-height);min-inline-size:0;overflow-wrap:anywhere}[data-ui=import-export-center] [data-part=heading]>a[data-part=job-title]{border-radius:var(--slotted-radius-xs, 2px);text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:from-font;text-underline-offset:.2em;transition:text-decoration-color var(--_duration) var(--_easing)}[data-ui=import-export-center] [data-part=heading]>a[data-part=job-title]:not([data-disabled]):hover{text-decoration-color:currentcolor}[data-ui=import-export-center] [data-part=heading]>a[data-part=job-title]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=import-export-center] [data-part=heading]>span[data-part=job-title]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=import-export-center] [data-part=heading]>[data-part=meta]{align-items:baseline;color:var(--_muted);display:flex;flex-wrap:wrap;font-size:var(--_meta-size);gap:0 var(--_separator-gap);line-height:var(--_meta-line-height);margin:0;min-inline-size:0;overflow-x:clip}[data-ui=import-export-center] [data-part=meta]>*,[data-ui=import-export-center] [data-part=summary]>*,[data-ui=import-export-center] [data-part=progress-text]>*{max-inline-size:100%;min-inline-size:0;overflow:clip;overflow-clip-margin:var(--_separator-gap);text-overflow:ellipsis;white-space:nowrap}[data-ui=import-export-center] [data-part=meta]>*+*:before,[data-ui=import-export-center] [data-part=summary]>*+*:before,[data-ui=import-export-center] [data-part=progress-text]>*+*:before,[data-ui=import-export-center] [data-part=status-label]>[data-part=stage]:before{background-color:currentcolor;block-size:var(--_separator);border-radius:var(--slotted-radius-full, 9999px);content:\"\";display:inline-block;inline-size:var(--_separator);margin-inline-end:calc((var(--_separator-gap) - var(--_separator)) / 2);margin-inline-start:calc((var(--_separator-gap) + var(--_separator)) / -2);opacity:.6;vertical-align:calc(.5ex - var(--_separator) / 2)}[data-ui=import-export-center] [data-part=meta]>:has(>[data-part=file-name]){max-inline-size:100%;white-space:nowrap}[data-ui=import-export-center] [data-part=meta] [data-part=file-name]{display:inline-flex;max-inline-size:100%;min-inline-size:0;unicode-bidi:isolate}[data-ui=import-export-center] [data-part=file-name]>[data-part=name]{min-inline-size:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=import-export-center] [data-part=file-name]>[data-part=extension]{flex:none;white-space:nowrap}[data-ui=import-export-center] [data-part=meta]>[data-part=time]{font-variant-numeric:tabular-nums;white-space:nowrap}[data-ui=import-export-center] [data-part=body]>[data-part=status]{align-items:baseline;color:var(--_tone-text);column-gap:var(--_mark-gap);display:grid;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);grid-template-columns:auto minmax(0,1fr);line-height:var(--_meta-line-height);min-inline-size:0}[data-ui=import-export-center] [data-part=status]>[data-part=mark]{--slotted-icon-size: 1em;--slotted-spinner-size: 1em;align-self:baseline;block-size:1em;inline-size:1em;position:relative;inset-block-start:round(nearest,calc(.5em - ((1cap + 1ex)/4)),1px)}[data-ui=import-export-center] [data-part=status]>[data-part=status-label]{align-items:baseline;display:flex;flex-wrap:wrap;gap:0 var(--_separator-gap);min-inline-size:0;overflow-wrap:anywhere;overflow-x:clip}[data-ui=import-export-center] [data-part=status-label]>*{min-inline-size:0}[data-ui=import-export-center] [data-part=status-label]>[data-part=stage]{max-inline-size:100%;overflow:clip;overflow-clip-margin:var(--_separator-gap);text-overflow:ellipsis;white-space:nowrap}[data-ui=import-export-center] [data-part=status]>[data-part=mark]>[data-ui=icon],[data-ui=import-export-center] [data-part=status]>[data-part=mark]>[data-ui=spinner]{inset:0;position:absolute}[data-ui=import-export-center] [data-part=status-label]>[data-part=stage]{color:var(--_muted);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=import-export-center] [data-part=body]>[data-part=progress]{display:grid;gap:var(--slotted-space-2, .25rem);min-inline-size:0}[data-ui=import-export-center] [data-part=progress]>[data-part=progress-text]{color:var(--_muted);display:flex;flex-wrap:wrap;gap:0 var(--_separator-gap);overflow-x:clip;font-size:var(--_small-size);font-variant-numeric:tabular-nums;line-height:var(--_small-line-height);min-inline-size:0}[data-ui=import-export-center] [data-part=body]>[data-part=summary]{color:var(--_muted);display:flex;flex-wrap:wrap;gap:0 var(--_separator-gap);overflow-x:clip;font-size:var(--_meta-size);font-variant-numeric:tabular-nums;line-height:var(--_meta-line-height);margin:0;min-inline-size:0}[data-ui=import-export-center] [data-part=body]>[data-part=message]{color:var(--_muted);font-size:var(--_meta-size);line-height:var(--_meta-line-height);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=import-export-center] [data-part=job][data-outcome=failed] [data-part=body]>[data-part=message],[data-ui=import-export-center] [data-part=job][data-outcome=partial] [data-part=body]>[data-part=message]{color:var(--_tone-text)}[data-ui=import-export-center] [data-part=job]>[data-part=controls]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);grid-area:controls;min-inline-size:0}[data-ui=import-export-center] [data-part=controls]>[data-part=download],[data-ui=import-export-center] [data-part=controls]>[data-part=cancel],[data-ui=import-export-center] [data-part=controls]>[data-part=retry],[data-ui=import-export-center] [data-part=controls]>[data-part=toggle],[data-ui=import-export-center] [data-part=controls]>[data-part=job-actions]{align-items:center;display:inline-flex;gap:var(--slotted-control-gap-sm, 6px)}[data-ui=import-export-center] [data-part=controls]>[data-part=remove]{margin-inline-start:auto}[data-ui=import-export-center] [data-part=toggle] [data-part=chevron]{--slotted-icon-size: var(--_control-glyph);block-size:var(--_control-glyph);display:flex;inline-size:var(--_control-glyph);transition:transform var(--_duration) var(--_easing)}[data-ui=import-export-center] [data-part=toggle][data-expanded] [data-part=chevron]{transform:rotate(180deg)}[data-ui=import-export-center] button[data-part=remove]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_control);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--_muted);cursor:pointer;display:inline-flex;flex:none;inline-size:var(--_control);justify-content:center;padding:0;position:relative;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=import-export-center] button[data-part=remove]:after{content:\"\";inset:min(0px,calc((var(--_control) - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=import-export-center] button[data-part=remove]>[data-ui=icon]{--slotted-icon-size: var(--_control-glyph)}[data-ui=import-export-center] button[data-part=remove]:not([data-disabled]):hover{background-color:var(--_hover);color:var(--_text)}[data-ui=import-export-center] button[data-part=remove]:not([data-disabled]):active{background-color:var(--_active)}[data-ui=import-export-center] button[data-part=remove]:focus-visible{color:var(--_text);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=import-export-center] [data-part=job]>[data-part=details]{background-color:var(--slotted-surface-sunken, Canvas);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-md, 6px);display:grid;gap:var(--_gap);grid-area:details;grid-template-columns:minmax(0,1fr);min-inline-size:0;padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--slotted-space-5, .75rem)}[data-ui=import-export-center] [data-part=job]>[data-part=details][hidden]{display:none}[data-ui=import-export-center] [data-part=details]>[data-part=counts]{display:grid;gap:var(--slotted-space-4, .5rem) var(--slotted-space-7, 1.25rem);grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));margin:0;min-inline-size:0}[data-ui=import-export-center] [data-part=counts]>div{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0}[data-ui=import-export-center] [data-part=counts] dt{color:var(--_muted);font-size:var(--_small-size);line-height:var(--_small-line-height)}[data-ui=import-export-center] [data-part=counts] dd{color:var(--_text);font-size:var(--_job-title-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_job-title-line-height);margin:0}[data-ui=import-export-center] [data-part=counts]>div[data-count=failed] dd{color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=import-export-center] [data-part=details]>[data-part=files]{display:grid;gap:var(--slotted-space-3, .375rem);list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui=import-export-center] [data-part=files]>[data-part=file]{align-items:center;display:flex;flex-wrap:wrap;font-size:var(--_meta-size);gap:var(--slotted-space-2, .25rem) var(--slotted-space-4, .5rem);justify-content:space-between;line-height:var(--_meta-line-height);min-inline-size:0}[data-ui=import-export-center] [data-part=file]>[data-part=meta]{flex:1 1 14rem;align-items:baseline;color:var(--_muted);display:flex;flex-wrap:wrap;gap:0 var(--_separator-gap);min-inline-size:0;overflow-x:clip}[data-ui=import-export-center] [data-part=file]>[data-part=meta]>strong{color:var(--_text);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=import-export-center] [data-part=file]>[data-part=download]{display:inline-flex}[data-ui=import-export-center] [data-part=details]>[data-part=errors]{display:grid;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=import-export-center] [data-part=errors]>[data-ui=table]{max-block-size:var(--slotted-import-export-center-errors-max-block-size, 16rem);min-inline-size:0;overflow:auto}[data-ui=import-export-center] [data-part=errors]>[data-part=errors-note]{align-items:center;color:var(--_muted);display:flex;flex-wrap:wrap;font-size:var(--_small-size);gap:var(--slotted-space-3, .375rem) var(--slotted-space-5, .75rem);justify-content:space-between;line-height:var(--_small-line-height);margin:0}[data-ui=import-export-center]>button[data-part=more]{align-items:center;appearance:none;background-color:var(--_ground);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);color:var(--_text);cursor:pointer;display:flex;font:inherit;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);inline-size:fit-content;justify-content:center;line-height:var(--slotted-control-line-height, 1);margin-block:var(--_inset-block);margin-inline:auto;min-block-size:var(--slotted-control-height-sm, 30px);padding-inline:var(--slotted-control-padding-inline-md, 13px);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing)}[data-ui=import-export-center]>button[data-part=more]:not([data-loading]):enabled:hover{background-color:var(--_hover)}[data-ui=import-export-center]>button[data-part=more]:not([data-loading]):enabled:active{background-color:var(--_active)}[data-ui=import-export-center]>button[data-part=more][data-loading]{color:var(--_muted);cursor:progress}[data-ui=import-export-center]>button[data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=import-export-center]>[data-part=empty],[data-ui=import-export-center]>[data-part=error]{min-inline-size:0;padding-block:var(--slotted-space-9, 2rem);padding-inline:var(--_inset-inline)}[data-ui=import-export-center]>[data-part=footer]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;font-size:var(--_meta-size);gap:var(--_gap);justify-content:center;line-height:var(--_meta-line-height);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][aria-hidden=true]>[data-part=visual]{background-color:transparent}[data-ui=import-export-center] [data-part=job][aria-hidden=true]>[data-part=visual]>[data-ui=skeleton]{block-size:100%;inline-size:100%}@container import-export-center (inline-size < 22rem){[data-ui=import-export-center]>[data-part=list]>[data-part=job]{grid-template-areas:\"visual body\" \"visual controls\" \"details details\"}}@container import-export-center (inline-size >= 42rem){[data-ui=import-export-center]>[data-part=list]{column-gap:var(--_gap);display:grid;grid-template-columns:auto minmax(0,6fr) minmax(var(--_status-column),5fr)}[data-ui=import-export-center]>[data-part=list]>[data-part=job]{grid-column:1 / -1;grid-template-areas:none;grid-template-columns:subgrid;grid-template-rows:repeat(5,auto) auto;row-gap:0}[data-ui=import-export-center] [data-part=job]>[data-part=visual]{grid-column:1;grid-row:1 / span 5}[data-ui=import-export-center] [data-part=job]>[data-part=body]{display:contents}[data-ui=import-export-center] [data-part=job]>[data-part=body]>[data-part=heading]{grid-column:2;grid-row:1 / span 5}[data-ui=import-export-center] [data-part=job]>[data-part=body]>:not([data-part=heading]){grid-column:3}[data-ui=import-export-center] [data-part=job]>[data-part=body]>:not([data-part=heading])+:not([data-part=heading]){margin-block-start:var(--slotted-space-3, .375rem)}[data-ui=import-export-center] [data-part=job]>[data-part=controls]{grid-column:3;grid-row:5;margin-block-start:var(--slotted-space-4, .5rem)}[data-ui=import-export-center] [data-part=job]>[data-part=details]{grid-column:2 / -1;grid-row:6;margin-block-start:var(--_gap)}}@media(forced-colors:active){[data-ui=import-export-center] [data-part=meta]>*+*:before,[data-ui=import-export-center] [data-part=summary]>*+*:before,[data-ui=import-export-center] [data-part=progress-text]>*+*:before,[data-ui=import-export-center] [data-part=status-label]>[data-part=stage]:before{forced-color-adjust:none}[data-ui=import-export-center] [data-part=job]>[data-part=visual]{border:var(--slotted-border-width-thin, 1px) solid CanvasText;color:CanvasText}[data-ui=import-export-center] [data-part=job]>[data-part=details]{border-color:CanvasText}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlButtonEnd, selector: "[slButtonEnd]", exportAs: ["slButtonEnd"] }, { kind: "component", type: SlButtonLink, selector: "a[slButtonLink]", inputs: ["disabled", "fullWidth", "size", "tone", "variant", "href"], exportAs: ["slButtonLink"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlImportExportControl, selector: "button[slImportExportControl]", inputs: ["text", "describedBy"] }, { kind: "component", type: SlProgressBar, selector: "[slProgressBar]", inputs: ["value", "min", "max", "buffer", "showValue", "valueText", "format", "locale", "wave", "placement"], exportAs: ["slProgressBar"] }, { kind: "component", type: SlResultState, selector: "[slResultState]", inputs: ["status", "reach", "align", "live", "illustration"], exportAs: ["slResultState"] }, { kind: "directive", type: SlResultStateActions, selector: "[slResultStateActions]", exportAs: ["slResultStateActions"] }, { kind: "directive", type: SlResultStateContent, selector: "[slResultStateContent]", exportAs: ["slResultStateContent"] }, { kind: "directive", type: SlResultStateDescription, selector: "[slResultStateDescription]", exportAs: ["slResultStateDescription"] }, { kind: "component", type: SlResultStateTitle, selector: "[slResultStateTitle]", exportAs: ["slResultStateTitle"] }, { kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }, { kind: "component", type: SlSkeletonText, selector: "[slSkeletonText]", inputs: ["lines", "animation", "loading", "lastLineSize", "inlineSize"], exportAs: ["slSkeletonText"] }, { kind: "component", type: SlTab, selector: "[slTab]", inputs: ["value", "disabled", "dismissible", "dismissLabel", "href", "controls"], exportAs: ["slTab"] }, { kind: "directive", type: SlTabList, selector: "[slTabList]", exportAs: ["slTabList"] }, { kind: "component", type: SlTable, selector: "div[slTable]", inputs: ["sort", "value", "expanded", "variant", "layout", "selectionMode", "cellAlign", "striped", "stickyHeader", "stickyFooter", "stickyTo", "columns", "loading", "messages"], outputs: ["sortChange", "valueChange", "expandedChange", "sortChangeRequest", "valueChangeRequest", "expandedChangeRequest"], exportAs: ["slTable"] }, { kind: "directive", type: SlTableBody, selector: "tbody[slTableBody]", exportAs: ["slTableBody"] }, { kind: "directive", type: SlTableCaption, selector: "caption[slTableCaption]", exportAs: ["slTableCaption"] }, { kind: "directive", type: SlTableCell, selector: "td[slTableCell]", exportAs: ["slTableCell"] }, { kind: "component", type: SlTableColumnHeader, selector: "th[slTableColumnHeader]", inputs: ["column", "scope"], exportAs: ["slTableColumnHeader"] }, { kind: "component", type: SlTableContent, selector: "div[slTableContent]", inputs: ["totalRowCount", "scrollLabel", "scrollLabelledBy"], exportAs: ["slTableContent"] }, { kind: "directive", type: SlTableHead, selector: "thead[slTableHead]", exportAs: ["slTableHead"] }, { kind: "directive", type: SlTableRow, selector: "tr[slTableRow]", inputs: ["value", "disabled", "rowIndex"], exportAs: ["slTableRow"] }, { kind: "component", type: SlTabs, selector: "[slTabs]", inputs: ["value", "defaultValue", "activation", "orientation", "size", "variant", "track", "fit", "mount", "loop", "disabled"], outputs: ["valueChange", "tabDismiss"], exportAs: ["slTabs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlImportExportCenter, decorators: [{
+            type: Component,
+            args: [{ selector: 'section[slImportExportCenter]', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlButtonEnd,
+                        SlButtonLink,
+                        SlGlyph,
+                        SlIcon,
+                        SlImportExportControl,
+                        SlProgressBar,
+                        SlResultState,
+                        SlResultStateActions,
+                        SlResultStateContent,
+                        SlResultStateDescription,
+                        SlResultStateTitle,
+                        SlSkeleton,
+                        SlSkeletonText,
+                        SlTab,
+                        SlTabList,
+                        SlTable,
+                        SlTableBody,
+                        SlTableCaption,
+                        SlTableCell,
+                        SlTableColumnHeader,
+                        SlTableContent,
+                        SlTableHead,
+                        SlTableRow,
+                        SlTabs,
+                    ], template: `
+    <div data-part="header">
+      @switch (levelValue()) {
+        @case ('3') {
+          <h3 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (active() > 0) {
+              <span data-part="count">{{ t('active', { count: active() }) }}</span>
+            }
+          </h3>
+        }
+        @case ('4') {
+          <h4 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (active() > 0) {
+              <span data-part="count">{{ t('active', { count: active() }) }}</span>
+            }
+          </h4>
+        }
+        @default {
+          <h2 data-part="title" [id]="titleId">
+            {{ t('title') }}
+            @if (active() > 0) {
+              <span data-part="count">{{ t('active', { count: active() }) }}</span>
+            }
+          </h2>
+        }
+      }
+      <div data-part="tools">
+        @if (finished().length > 0) {
+          <span data-part="clear">
+            <button
+              slButton
+              size="sm"
+              tone="secondary"
+              variant="ghost"
+              type="button"
+              (click)="clear($event)"
+            >
+              {{ t('clear') }}
+            </button>
+          </span>
+        }
+        <ng-content select="[slImportExportCenterActions]" />
+      </div>
+    </div>
+    @if (viewList().length > 1) {
+      <div data-part="views">
+        <div
+          slTabs
+          track="none"
+          [size]="sizeValue()"
+          [value]="currentView()"
+          (valueChange)="forwardView($event)"
+        >
+          <div slTabList [attr.aria-label]="t('views')">
+            @for (entry of viewList(); track entry.value) {
+              <div slTab [value]="entry.value" [controls]="listId">{{ entry.label }}</div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+    @if (status() === 'error') {
+      <div data-part="error">
+        <section slResultState reach="section" status="error" live="off">
+          <div slResultStateContent>
+            <div slResultStateTitle>{{ t('loadError') }}</div>
+            <p slResultStateDescription>{{ t('loadErrorDescription') }}</p>
+          </div>
+          <div slResultStateActions>
+            <button
+              slButton
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              type="button"
+              (click)="reload($event)"
+            >
+              {{ t('reload') }}
+            </button>
+          </div>
+        </section>
+      </div>
+    } @else if (showEmpty()) {
+      <div data-part="empty">
+        <ng-content select="[slImportExportCenterEmpty]">
+          <section slResultState reach="section" status="empty" live="off">
+            <div slResultStateContent>
+              <div slResultStateTitle>{{ emptyTitle() }}</div>
+              <p slResultStateDescription>{{ t('emptyDescription') }}</p>
+            </div>
+          </section>
+        </ng-content>
+      </div>
+    } @else {
+      <ul
+        #list
+        data-part="list"
+        tabindex="-1"
+        [id]="listId"
+        [attr.aria-labelledby]="titleId"
+        [attr.aria-busy]="loading() ? 'true' : null"
+        (focusin)="rememberFocus($event)"
+      >
+        @if (waiting()) {
+          @for (row of waitingRows; track row) {
+            <li data-part="job" aria-hidden="true">
+              <span data-part="visual"><span slSkeleton shape="block"></span></span>
+              <div data-part="body">
+                <span slSkeletonText [lines]="2"></span>
+                <span slSkeletonText [lines]="1"></span>
+              </div>
+            </li>
+          }
+        } @else {
+          @for (view of jobViews(); track view.job.key) {
+            <ng-container
+              [ngTemplateOutlet]="jobTemplate"
+              [ngTemplateOutletContext]="{ $implicit: view }"
+            />
+          }
+        }
+      </ul>
+    }
+    @if (status() !== 'error' && growingValue() === 'button' && hasMore() && !waiting()) {
+      <button
+        data-part="more"
+        type="button"
+        [attr.aria-disabled]="loading() ? 'true' : null"
+        [attr.data-loading]="loading() ? '' : null"
+        (click)="loadMore($event)"
+      >
+        {{ loading() ? t('loading') : t('loadMore') }}
+      </button>
+    }
+    <ng-content select="[slImportExportCenterFooter]" />
+
+    <ng-template #fileName let-stem="stem" let-extension="extension">
+      <span data-part="file-name" dir="auto"
+        ><span data-part="name">{{ stem }}</span>
+        @if (extension !== '') {
+          <span data-part="extension">{{ extension }}</span>
+        }
+      </span>
+    </ng-template>
+
+    <ng-template
+      #download
+      let-view="view"
+      let-file="file"
+      let-role="role"
+      let-label="label"
+      let-primary="primary"
+    >
+      <span data-part="download">
+        @if (file.href === undefined) {
+          <button
+            slButton
+            size="sm"
+            tone="secondary"
+            type="button"
+            [variant]="primary ? 'outline' : 'ghost'"
+            [attr.id]="primary ? view.ids.control('download') : null"
+            [attr.aria-labelledby]="
+              primary ? view.ids.control('download') + ' ' + view.ids.title : null
+            "
+            [attr.aria-describedby]="primary ? view.ids.status : null"
+            (click)="askDownload(view.job.key, role, $event)"
+          >
+            {{ label }}
+          </button>
+        } @else {
+          <a
+            slButtonLink
+            size="sm"
+            tone="secondary"
+            [variant]="primary ? 'outline' : 'ghost'"
+            [href]="file.href"
+            [attr.download]="file.name"
+            [attr.id]="primary ? view.ids.control('download') : null"
+            [attr.aria-labelledby]="
+              primary ? view.ids.control('download') + ' ' + view.ids.title : null
+            "
+            [attr.aria-describedby]="primary ? view.ids.status : null"
+            (click)="askDownload(view.job.key, role, $event)"
+            >{{ label }}</a
+          >
+        }
+      </span>
+    </ng-template>
+
+    <ng-template #jobTemplate let-view>
+      <li
+        data-part="job"
+        [attr.data-key]="view.job.key"
+        [attr.data-direction]="view.job.direction"
+        [attr.data-status]="view.job.status"
+        [attr.data-outcome]="view.outcome"
+        [attr.data-expired]="view.controls.expired ? '' : null"
+        [attr.data-expanded]="view.expanded ? '' : null"
+      >
+        <span data-part="visual" aria-hidden="true" [attr.data-kind]="view.kind"
+          ><span slIcon><svg slGlyph [name]="view.kindGlyph"></svg></span
+        ></span>
+        <div data-part="body">
+          <div data-part="heading">
+            @if (view.job.href === undefined) {
+              <span data-part="job-title" tabindex="-1" [id]="view.ids.title">{{
+                view.job.title
+              }}</span>
+            } @else {
+              <a
+                data-part="job-title"
+                [id]="view.ids.title"
+                [attr.href]="view.job.href"
+                (click)="open(view.job.key, $event)"
+                >{{ view.job.title }}</a
+              >
+            }
+            <p data-part="meta">
+              <span>{{ view.directionText }}</span>
+              @if (view.job.format !== undefined) {
+                <span>{{ view.job.format }}</span>
+              }
+              @if (view.file !== null) {
+                <span
+                  ><ng-container
+                    [ngTemplateOutlet]="fileName"
+                    [ngTemplateOutletContext]="{
+                      stem: view.file.stem,
+                      extension: view.file.extension,
+                    }"
+                /></span>
+                @if (view.file.size !== null) {
+                  <span>{{ view.file.size }}</span>
+                }
+              }
+              @if (view.job.actor !== undefined) {
+                <span>{{ view.job.actor }}</span>
+              }
+              @if (view.time !== null) {
+                <time
+                  data-part="time"
+                  [attr.datetime]="view.time.dateTime"
+                  [attr.title]="view.time.title"
+                  >{{ view.time.text }}</time
+                >
+              }
+            </p>
+          </div>
+          <div data-part="status" [id]="view.ids.status">
+            <span data-part="mark" aria-hidden="true">
+              @if (view.mark === 'spinner') {
+                <span data-ui="spinner"></span>
+              } @else {
+                <span slIcon><svg slGlyph [name]="view.mark"></svg></span>
+              }
+            </span>
+            <span data-part="status-label"
+              ><span>{{ view.statusText }}</span>
+              @if (view.job.stage) {
+                <span data-part="stage" [attr.title]="view.job.stage">{{ view.job.stage }}</span>
+              }
+            </span>
+          </div>
+          @if (view.job.status === 'running') {
+            <div data-part="progress">
+              <div
+                slProgressBar
+                hideLabel
+                size="sm"
+                tone="accent"
+                [delay]="0"
+                [label]="view.job.title"
+                [max]="view.job.progress?.max ?? 100"
+                [value]="view.job.progress?.value ?? null"
+                [valueText]="
+                  view.progressText.length > 0 ? view.progressText.join(', ') : undefined
+                "
+              ></div>
+              @if (view.progressText.length > 0) {
+                <span data-part="progress-text">
+                  @for (item of view.progressText; track item) {
+                    <span>{{ item }}</span>
+                  }
+                </span>
+              }
+            </div>
+          }
+          @if (view.summary.length > 0) {
+            <p data-part="summary">
+              @for (item of view.summary; track item) {
+                <span>{{ item }}</span>
+              }
+            </p>
+          }
+          @if (view.message !== null) {
+            <p data-part="message">{{ view.message }}</p>
+          }
+        </div>
+        @if (view.ordered.length > 0 || view.removable || jobActionsTemplate()) {
+          <div data-part="controls">
+            @for (part of view.ordered; track part) {
+              @switch (part) {
+                @case ('download') {
+                  @if (view.downloadFile !== null) {
+                    <ng-container
+                      [ngTemplateOutlet]="download"
+                      [ngTemplateOutletContext]="{
+                        view,
+                        file: view.downloadFile,
+                        role: view.controls.download,
+                        label: view.downloadLabel,
+                        primary: true,
+                      }"
+                    />
+                  }
+                }
+                @case ('toggle') {
+                  <span data-part="toggle" [attr.data-expanded]="view.expanded ? '' : null">
+                    <button
+                      slButton
+                      size="sm"
+                      tone="secondary"
+                      variant="ghost"
+                      type="button"
+                      [id]="view.ids.toggle"
+                      [attr.aria-expanded]="view.expanded ? 'true' : 'false'"
+                      [attr.aria-controls]="view.ids.details"
+                      [attr.aria-labelledby]="view.ids.toggle + ' ' + view.ids.title"
+                      (click)="toggle(view.job.key, pressReason($event), $event)"
+                    >
+                      {{ t('details') }}
+                      <span slButtonEnd
+                        ><span data-part="chevron"
+                          ><span slIcon><svg slGlyph name="chevron-down"></svg></span></span
+                      ></span>
+                    </button>
+                  </span>
+                }
+                @default {
+                  <span [attr.data-part]="part">
+                    <button
+                      slButton
+                      size="sm"
+                      tone="secondary"
+                      variant="outline"
+                      type="button"
+                      [id]="view.ids.control(part)"
+                      [attr.aria-labelledby]="view.ids.control(part) + ' ' + view.ids.title"
+                      [attr.aria-describedby]="view.ids.status"
+                      (click)="press(part, view.job.key, $event)"
+                    >
+                      {{ part === 'cancel' ? t('cancel') : view.retryLabel }}
+                    </button>
+                  </span>
+                }
+              }
+            }
+            @if (jobActionsTemplate(); as own) {
+              <span data-part="job-actions"
+                ><ng-container
+                  [ngTemplateOutlet]="own.template"
+                  [ngTemplateOutletContext]="{ $implicit: view.job }"
+              /></span>
+            }
+            @if (view.removable) {
+              <button
+                slImportExportControl
+                data-part="remove"
+                [text]="t('remove')"
+                [describedBy]="view.ids.title"
+                (click)="removeOne(view.job.key, $event)"
+              >
+                <span slIcon><svg slGlyph name="x"></svg></span>
+              </button>
+            }
+          </div>
+        }
+        @if (view.expanded) {
+          <div
+            data-part="details"
+            role="region"
+            [id]="view.ids.details"
+            [attr.aria-labelledby]="view.ids.toggle"
+          >
+            @if (view.counts.length > 0) {
+              <dl data-part="counts">
+                @for (count of view.counts; track count.key) {
+                  <div [attr.data-count]="count.key">
+                    <dt>{{ count.label }}</dt>
+                    <dd>{{ count.value }}</dd>
+                  </div>
+                }
+              </dl>
+            }
+            @if (view.files.length > 0) {
+              <ul data-part="files">
+                @for (row of view.files; track row.role) {
+                  <li data-part="file" [attr.data-availability]="row.availability">
+                    <span data-part="meta">
+                      <strong>{{ row.label }}</strong>
+                      <span
+                        ><ng-container
+                          [ngTemplateOutlet]="fileName"
+                          [ngTemplateOutletContext]="{ stem: row.stem, extension: row.extension }"
+                      /></span>
+                      @if (row.size !== null) {
+                        <span>{{ row.size }}</span>
+                      }
+                      @if (row.note !== null) {
+                        <span>{{ row.note }}</span>
+                      }
+                    </span>
+                    @if (row.downloadable) {
+                      <ng-container
+                        [ngTemplateOutlet]="download"
+                        [ngTemplateOutletContext]="{
+                          view,
+                          file: row.file,
+                          role: row.role,
+                          label: t('download'),
+                          primary: false,
+                        }"
+                      />
+                    }
+                  </li>
+                }
+              </ul>
+            }
+            @if ((view.job.errors?.length ?? 0) > 0) {
+              <div data-part="errors">
+                <div slTable variant="framed" [columns]="4">
+                  <div slTableContent>
+                    <caption slTableCaption>
+                      {{
+                        t('errorsCaption')
+                      }}
+                    </caption>
+                    <thead slTableHead>
+                      <tr slTableRow>
+                        <th slTableColumnHeader numeric>{{ t('errorColumns.row') }}</th>
+                        <th slTableColumnHeader>{{ t('errorColumns.message') }}</th>
+                        <th slTableColumnHeader>{{ t('errorColumns.column') }}</th>
+                        <th slTableColumnHeader>{{ t('errorColumns.value') }}</th>
+                      </tr>
+                    </thead>
+                    <tbody slTableBody>
+                      @for (error of view.job.errors; track $index) {
+                        <tr slTableRow>
+                          <td slTableCell numeric>{{ formatCount(error.row) }}</td>
+                          <td slTableCell>{{ error.message }}</td>
+                          <td slTableCell>{{ error.column ?? '' }}</td>
+                          <td slTableCell>{{ error.value ?? '' }}</td>
+                        </tr>
+                      }
+                    </tbody>
+                  </div>
+                </div>
+                @if (view.errorNote !== null) {
+                  <p data-part="errors-note">
+                    <span>{{ view.errorNote }}</span>
+                  </p>
+                }
+              </div>
+            }
+          </div>
+        }
+      </li>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slImportExportCenter', host: {
+                        'data-ui': 'import-export-center',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'sizeValue()',
+                        '[attr.data-level]': 'levelValue()',
+                        '[attr.data-growing]': 'growingValue()',
+                        '[attr.data-time-format]': 'timeFormatValue()',
+                        '[attr.data-view]': 'currentView()',
+                        '[attr.data-loading]': "loading() ? '' : null",
+                        '[attr.data-status]': "status() === 'error' ? 'error' : null",
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                    }, styles: ["@layer slotted.components{[data-ui=import-export-center]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-import-export-center-border, var(--slotted-border-subtle, ButtonBorder));--_ground: var(--slotted-import-export-center-background, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_inset-inline: var( --slotted-import-export-center-inset-inline-md, var(--slotted-space-6, 1rem) );--_inset-block: var( --slotted-import-export-center-inset-block-md, var(--slotted-space-5, .75rem) );--_gap: var(--slotted-import-export-center-gap-md, var(--slotted-space-5, .75rem));--_title-size: var(--slotted-font-size-lg, 1rem);--_title-line-height: var(--slotted-line-height-lg, 1.5);--_job-title-size: var(--slotted-font-size-md, .875rem);--_job-title-line-height: var(--slotted-line-height-md, 1.5);--_meta-size: var(--slotted-font-size-sm, .8125rem);--_meta-line-height: var(--slotted-line-height-sm, 1.45);--_small-size: var(--slotted-font-size-xs, .75rem);--_small-line-height: var(--slotted-line-height-xs, 1.4);--_glyph: var(--slotted-control-icon-size-md, 16px);--_tile: calc(2 * var(--_glyph));--_control-glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_control-glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_count-size: var(--slotted-font-size-xs, .75rem);--_count-box: calc( var(--_count-size) + 2 * var(--slotted-space-1, .125rem) + 2 * var(--slotted-border-width-thin, 1px) );--_rule-size: var(--slotted-border-width-thin, 1px);--_mark-gap: var(--slotted-space-3, .375rem);--_separator: 3px;--_separator-gap: var(--slotted-space-5, .75rem);--_status-column: var(--slotted-import-export-center-status-column, 16rem);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);background-color:var(--_ground);color:var(--_text);container-name:import-export-center;container-type:inline-size;display:flex;flex-direction:column;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);min-inline-size:0}[data-ui=import-export-center][data-size=sm]{min-inline-size:var( --slotted-import-export-center-min-inline-size-sm, min(24rem, calc(100vw - var(--slotted-space-8, 2rem))) );--_inset-inline: var( --slotted-import-export-center-inset-inline-sm, var(--slotted-space-5, .75rem) );--_inset-block: var( --slotted-import-export-center-inset-block-sm, var(--slotted-space-4, .5rem) );--_gap: var(--slotted-import-export-center-gap-sm, var(--slotted-space-4, .5rem));--_title-size: var(--slotted-font-size-md, .875rem);--_title-line-height: var(--slotted-line-height-md, 1.5);--_job-title-size: var(--slotted-font-size-sm, .8125rem);--_job-title-line-height: var(--slotted-line-height-sm, 1.45);--_meta-size: var(--slotted-font-size-xs, .75rem);--_meta-line-height: var(--slotted-line-height-xs, 1.4);--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_control-glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-sm, 22px) )}[data-ui=import-export-center]>[data-part=header]{align-items:center;border-block-end:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;gap:var(--slotted-space-3, .375rem) var(--_gap);justify-content:flex-end;min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=import-export-center]>[data-part=header]>[data-part=title]{align-items:center;color:var(--_text);display:inline-flex;flex-wrap:wrap;font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--_title-size);font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--slotted-space-3, .375rem);letter-spacing:-.01em;line-height:var(--_title-line-height);margin:0;margin-inline-end:auto;min-inline-size:0}[data-ui=import-export-center]>[data-part=header]>[data-part=title]>[data-part=count]{align-items:center;background-color:var(--slotted-tone-accent-surface, Canvas);block-size:var(--_count-box);border:var(--slotted-border-width-thin, 1px) solid color-mix(in oklab,currentcolor 20%,transparent);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--slotted-tone-accent-text, Highlight);display:inline-flex;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);justify-content:center;letter-spacing:0;line-height:1;min-inline-size:var(--_count-box);padding-block:0;padding-inline:var(--slotted-space-3, .375rem);white-space:nowrap}[data-ui=import-export-center]>[data-part=header]>[data-part=tools]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);justify-content:flex-end;min-inline-size:0}[data-ui=import-export-center] [data-part=tools]>[data-part=clear],[data-ui=import-export-center] [data-part=tools]>[data-part=actions]{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px)}[data-ui=import-export-center]>[data-part=views]{border-block-end:var(--_rule-size) solid var(--_rule);min-inline-size:0;padding-inline:var(--_inset-inline)}[data-ui=import-export-center]>[data-part=list]{display:flex;flex:1 1 auto;flex-direction:column;list-style:none;margin:0;min-block-size:0;min-inline-size:0;overflow-y:auto;overscroll-behavior:contain;padding:0;scrollbar-color:var(--slotted-border-strong, ButtonBorder) transparent;scrollbar-width:thin}[data-ui=import-export-center]>[data-part=list]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=import-export-center]>[data-part=list]>[data-part=job]{--_tone-text: var(--slotted-tone-secondary-text, CanvasText);--_tone-solid: var(--slotted-tone-secondary-solid, CanvasText);align-items:start;border-block-end:var(--_rule-size) solid var(--_rule);column-gap:var(--_gap);display:grid;grid-template-areas:\"visual body\" \"visual controls\" \". details\";grid-template-columns:var(--_tile) minmax(0,1fr);min-inline-size:0;padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);row-gap:var(--slotted-space-4, .5rem)}[data-ui=import-export-center]>[data-part=list]>[data-part=job]:last-child{border-block-end:0}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-status=running]{--_tone-text: var(--slotted-tone-accent-text, Highlight);--_tone-solid: var(--slotted-tone-accent-solid, Highlight)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-outcome=success]{--_tone-text: var(--slotted-tone-success-text, CanvasText);--_tone-solid: var(--slotted-tone-success-solid, CanvasText)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-outcome=partial]{--_tone-text: var(--slotted-tone-warning-text, CanvasText);--_tone-solid: var(--slotted-tone-warning-solid, CanvasText)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-outcome=failed]{--_tone-text: var(--slotted-tone-danger-text, CanvasText);--_tone-solid: var(--slotted-tone-danger-solid, CanvasText)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][data-outcome=canceled]{--_tone-text: var(--_muted);--_tone-solid: var(--_muted)}[data-ui=import-export-center] [data-part=job]>[data-part=visual]{--_kind-tile: var(--slotted-upload-kind-other);--slotted-icon-size: var(--_glyph);align-items:center;background-color:var(--_kind-tile);block-size:var(--_tile);border-radius:var(--slotted-radius-sm, 4px);color:var(--slotted-upload-kind-foreground);display:inline-flex;grid-area:visual;inline-size:var(--_tile);justify-content:center;margin-block-start:round(nearest,calc((var(--_job-title-size) * var(--_job-title-line-height) + var(--_meta-size) * var(--_meta-line-height) - var(--_tile)) / 2),1px)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=pdf]{--_kind-tile: var(--slotted-upload-kind-pdf)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=document]{--_kind-tile: var(--slotted-upload-kind-document)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=spreadsheet]{--_kind-tile: var(--slotted-upload-kind-spreadsheet)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=presentation]{--_kind-tile: var(--slotted-upload-kind-presentation)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=image]{--_kind-tile: var(--slotted-upload-kind-image)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=video]{--_kind-tile: var(--slotted-upload-kind-video)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=audio]{--_kind-tile: var(--slotted-upload-kind-audio)}[data-ui=import-export-center] [data-part=job]>[data-part=visual][data-kind=archive]{--_kind-tile: var(--slotted-upload-kind-archive)}[data-ui=import-export-center] [data-part=job]>[data-part=body]{display:grid;gap:var(--slotted-space-3, .375rem);grid-area:body;grid-template-columns:minmax(0,1fr);min-inline-size:0}[data-ui=import-export-center] [data-part=job]>[data-part=body]>[data-part=heading]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0}[data-ui=import-export-center] [data-part=heading]>[data-part=job-title]{align-self:flex-start;color:var(--_text);font-size:var(--_job-title-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_job-title-line-height);min-inline-size:0;overflow-wrap:anywhere}[data-ui=import-export-center] [data-part=heading]>a[data-part=job-title]{border-radius:var(--slotted-radius-xs, 2px);text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:from-font;text-underline-offset:.2em;transition:text-decoration-color var(--_duration) var(--_easing)}[data-ui=import-export-center] [data-part=heading]>a[data-part=job-title]:not([data-disabled]):hover{text-decoration-color:currentcolor}[data-ui=import-export-center] [data-part=heading]>a[data-part=job-title]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=import-export-center] [data-part=heading]>span[data-part=job-title]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=import-export-center] [data-part=heading]>[data-part=meta]{align-items:baseline;color:var(--_muted);display:flex;flex-wrap:wrap;font-size:var(--_meta-size);gap:0 var(--_separator-gap);line-height:var(--_meta-line-height);margin:0;min-inline-size:0;overflow-x:clip}[data-ui=import-export-center] [data-part=meta]>*,[data-ui=import-export-center] [data-part=summary]>*,[data-ui=import-export-center] [data-part=progress-text]>*{max-inline-size:100%;min-inline-size:0;overflow:clip;overflow-clip-margin:var(--_separator-gap);text-overflow:ellipsis;white-space:nowrap}[data-ui=import-export-center] [data-part=meta]>*+*:before,[data-ui=import-export-center] [data-part=summary]>*+*:before,[data-ui=import-export-center] [data-part=progress-text]>*+*:before,[data-ui=import-export-center] [data-part=status-label]>[data-part=stage]:before{background-color:currentcolor;block-size:var(--_separator);border-radius:var(--slotted-radius-full, 9999px);content:\"\";display:inline-block;inline-size:var(--_separator);margin-inline-end:calc((var(--_separator-gap) - var(--_separator)) / 2);margin-inline-start:calc((var(--_separator-gap) + var(--_separator)) / -2);opacity:.6;vertical-align:calc(.5ex - var(--_separator) / 2)}[data-ui=import-export-center] [data-part=meta]>:has(>[data-part=file-name]){max-inline-size:100%;white-space:nowrap}[data-ui=import-export-center] [data-part=meta] [data-part=file-name]{display:inline-flex;max-inline-size:100%;min-inline-size:0;unicode-bidi:isolate}[data-ui=import-export-center] [data-part=file-name]>[data-part=name]{min-inline-size:1ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=import-export-center] [data-part=file-name]>[data-part=extension]{flex:none;white-space:nowrap}[data-ui=import-export-center] [data-part=meta]>[data-part=time]{font-variant-numeric:tabular-nums;white-space:nowrap}[data-ui=import-export-center] [data-part=body]>[data-part=status]{align-items:baseline;color:var(--_tone-text);column-gap:var(--_mark-gap);display:grid;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);grid-template-columns:auto minmax(0,1fr);line-height:var(--_meta-line-height);min-inline-size:0}[data-ui=import-export-center] [data-part=status]>[data-part=mark]{--slotted-icon-size: 1em;--slotted-spinner-size: 1em;align-self:baseline;block-size:1em;inline-size:1em;position:relative;inset-block-start:round(nearest,calc(.5em - ((1cap + 1ex)/4)),1px)}[data-ui=import-export-center] [data-part=status]>[data-part=status-label]{align-items:baseline;display:flex;flex-wrap:wrap;gap:0 var(--_separator-gap);min-inline-size:0;overflow-wrap:anywhere;overflow-x:clip}[data-ui=import-export-center] [data-part=status-label]>*{min-inline-size:0}[data-ui=import-export-center] [data-part=status-label]>[data-part=stage]{max-inline-size:100%;overflow:clip;overflow-clip-margin:var(--_separator-gap);text-overflow:ellipsis;white-space:nowrap}[data-ui=import-export-center] [data-part=status]>[data-part=mark]>[data-ui=icon],[data-ui=import-export-center] [data-part=status]>[data-part=mark]>[data-ui=spinner]{inset:0;position:absolute}[data-ui=import-export-center] [data-part=status-label]>[data-part=stage]{color:var(--_muted);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=import-export-center] [data-part=body]>[data-part=progress]{display:grid;gap:var(--slotted-space-2, .25rem);min-inline-size:0}[data-ui=import-export-center] [data-part=progress]>[data-part=progress-text]{color:var(--_muted);display:flex;flex-wrap:wrap;gap:0 var(--_separator-gap);overflow-x:clip;font-size:var(--_small-size);font-variant-numeric:tabular-nums;line-height:var(--_small-line-height);min-inline-size:0}[data-ui=import-export-center] [data-part=body]>[data-part=summary]{color:var(--_muted);display:flex;flex-wrap:wrap;gap:0 var(--_separator-gap);overflow-x:clip;font-size:var(--_meta-size);font-variant-numeric:tabular-nums;line-height:var(--_meta-line-height);margin:0;min-inline-size:0}[data-ui=import-export-center] [data-part=body]>[data-part=message]{color:var(--_muted);font-size:var(--_meta-size);line-height:var(--_meta-line-height);margin:0;min-inline-size:0;overflow-wrap:anywhere}[data-ui=import-export-center] [data-part=job][data-outcome=failed] [data-part=body]>[data-part=message],[data-ui=import-export-center] [data-part=job][data-outcome=partial] [data-part=body]>[data-part=message]{color:var(--_tone-text)}[data-ui=import-export-center] [data-part=job]>[data-part=controls]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-control-gap-sm, 6px);grid-area:controls;min-inline-size:0}[data-ui=import-export-center] [data-part=controls]>[data-part=download],[data-ui=import-export-center] [data-part=controls]>[data-part=cancel],[data-ui=import-export-center] [data-part=controls]>[data-part=retry],[data-ui=import-export-center] [data-part=controls]>[data-part=toggle],[data-ui=import-export-center] [data-part=controls]>[data-part=job-actions]{align-items:center;display:inline-flex;gap:var(--slotted-control-gap-sm, 6px)}[data-ui=import-export-center] [data-part=controls]>[data-part=remove]{margin-inline-start:auto}[data-ui=import-export-center] [data-part=toggle] [data-part=chevron]{--slotted-icon-size: var(--_control-glyph);block-size:var(--_control-glyph);display:flex;inline-size:var(--_control-glyph);transition:transform var(--_duration) var(--_easing)}[data-ui=import-export-center] [data-part=toggle][data-expanded] [data-part=chevron]{transform:rotate(180deg)}[data-ui=import-export-center] button[data-part=remove]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_control);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--_muted);cursor:pointer;display:inline-flex;flex:none;inline-size:var(--_control);justify-content:center;padding:0;position:relative;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=import-export-center] button[data-part=remove]:after{content:\"\";inset:min(0px,calc((var(--_control) - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=import-export-center] button[data-part=remove]>[data-ui=icon]{--slotted-icon-size: var(--_control-glyph)}[data-ui=import-export-center] button[data-part=remove]:not([data-disabled]):hover{background-color:var(--_hover);color:var(--_text)}[data-ui=import-export-center] button[data-part=remove]:not([data-disabled]):active{background-color:var(--_active)}[data-ui=import-export-center] button[data-part=remove]:focus-visible{color:var(--_text);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=import-export-center] [data-part=job]>[data-part=details]{background-color:var(--slotted-surface-sunken, Canvas);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-md, 6px);display:grid;gap:var(--_gap);grid-area:details;grid-template-columns:minmax(0,1fr);min-inline-size:0;padding-block:var(--slotted-space-5, .75rem);padding-inline:var(--slotted-space-5, .75rem)}[data-ui=import-export-center] [data-part=job]>[data-part=details][hidden]{display:none}[data-ui=import-export-center] [data-part=details]>[data-part=counts]{display:grid;gap:var(--slotted-space-4, .5rem) var(--slotted-space-7, 1.25rem);grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));margin:0;min-inline-size:0}[data-ui=import-export-center] [data-part=counts]>div{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0}[data-ui=import-export-center] [data-part=counts] dt{color:var(--_muted);font-size:var(--_small-size);line-height:var(--_small-line-height)}[data-ui=import-export-center] [data-part=counts] dd{color:var(--_text);font-size:var(--_job-title-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_job-title-line-height);margin:0}[data-ui=import-export-center] [data-part=counts]>div[data-count=failed] dd{color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=import-export-center] [data-part=details]>[data-part=files]{display:grid;gap:var(--slotted-space-3, .375rem);list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui=import-export-center] [data-part=files]>[data-part=file]{align-items:center;display:flex;flex-wrap:wrap;font-size:var(--_meta-size);gap:var(--slotted-space-2, .25rem) var(--slotted-space-4, .5rem);justify-content:space-between;line-height:var(--_meta-line-height);min-inline-size:0}[data-ui=import-export-center] [data-part=file]>[data-part=meta]{flex:1 1 14rem;align-items:baseline;color:var(--_muted);display:flex;flex-wrap:wrap;gap:0 var(--_separator-gap);min-inline-size:0;overflow-x:clip}[data-ui=import-export-center] [data-part=file]>[data-part=meta]>strong{color:var(--_text);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=import-export-center] [data-part=file]>[data-part=download]{display:inline-flex}[data-ui=import-export-center] [data-part=details]>[data-part=errors]{display:grid;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=import-export-center] [data-part=errors]>[data-ui=table]{max-block-size:var(--slotted-import-export-center-errors-max-block-size, 16rem);min-inline-size:0;overflow:auto}[data-ui=import-export-center] [data-part=errors]>[data-part=errors-note]{align-items:center;color:var(--_muted);display:flex;flex-wrap:wrap;font-size:var(--_small-size);gap:var(--slotted-space-3, .375rem) var(--slotted-space-5, .75rem);justify-content:space-between;line-height:var(--_small-line-height);margin:0}[data-ui=import-export-center]>button[data-part=more]{align-items:center;appearance:none;background-color:var(--_ground);border:var(--_rule-size) solid var(--_rule);border-radius:var(--slotted-radius-full, 9999px);color:var(--_text);cursor:pointer;display:flex;font:inherit;font-size:var(--_meta-size);font-weight:var(--slotted-font-weight-medium, 500);gap:var(--slotted-control-gap-sm, 6px);inline-size:fit-content;justify-content:center;line-height:var(--slotted-control-line-height, 1);margin-block:var(--_inset-block);margin-inline:auto;min-block-size:var(--slotted-control-height-sm, 30px);padding-inline:var(--slotted-control-padding-inline-md, 13px);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing)}[data-ui=import-export-center]>button[data-part=more]:not([data-loading]):enabled:hover{background-color:var(--_hover)}[data-ui=import-export-center]>button[data-part=more]:not([data-loading]):enabled:active{background-color:var(--_active)}[data-ui=import-export-center]>button[data-part=more][data-loading]{color:var(--_muted);cursor:progress}[data-ui=import-export-center]>button[data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=import-export-center]>[data-part=empty],[data-ui=import-export-center]>[data-part=error]{min-inline-size:0;padding-block:var(--slotted-space-9, 2rem);padding-inline:var(--_inset-inline)}[data-ui=import-export-center]>[data-part=footer]{align-items:center;border-block-start:var(--_rule-size) solid var(--_rule);display:flex;flex-wrap:wrap;font-size:var(--_meta-size);gap:var(--_gap);justify-content:center;line-height:var(--_meta-line-height);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline)}[data-ui=import-export-center]>[data-part=list]>[data-part=job][aria-hidden=true]>[data-part=visual]{background-color:transparent}[data-ui=import-export-center] [data-part=job][aria-hidden=true]>[data-part=visual]>[data-ui=skeleton]{block-size:100%;inline-size:100%}@container import-export-center (inline-size < 22rem){[data-ui=import-export-center]>[data-part=list]>[data-part=job]{grid-template-areas:\"visual body\" \"visual controls\" \"details details\"}}@container import-export-center (inline-size >= 42rem){[data-ui=import-export-center]>[data-part=list]{column-gap:var(--_gap);display:grid;grid-template-columns:auto minmax(0,6fr) minmax(var(--_status-column),5fr)}[data-ui=import-export-center]>[data-part=list]>[data-part=job]{grid-column:1 / -1;grid-template-areas:none;grid-template-columns:subgrid;grid-template-rows:repeat(5,auto) auto;row-gap:0}[data-ui=import-export-center] [data-part=job]>[data-part=visual]{grid-column:1;grid-row:1 / span 5}[data-ui=import-export-center] [data-part=job]>[data-part=body]{display:contents}[data-ui=import-export-center] [data-part=job]>[data-part=body]>[data-part=heading]{grid-column:2;grid-row:1 / span 5}[data-ui=import-export-center] [data-part=job]>[data-part=body]>:not([data-part=heading]){grid-column:3}[data-ui=import-export-center] [data-part=job]>[data-part=body]>:not([data-part=heading])+:not([data-part=heading]){margin-block-start:var(--slotted-space-3, .375rem)}[data-ui=import-export-center] [data-part=job]>[data-part=controls]{grid-column:3;grid-row:5;margin-block-start:var(--slotted-space-4, .5rem)}[data-ui=import-export-center] [data-part=job]>[data-part=details]{grid-column:2 / -1;grid-row:6;margin-block-start:var(--_gap)}}@media(forced-colors:active){[data-ui=import-export-center] [data-part=meta]>*+*:before,[data-ui=import-export-center] [data-part=summary]>*+*:before,[data-ui=import-export-center] [data-part=progress-text]>*+*:before,[data-ui=import-export-center] [data-part=status-label]>[data-part=stage]:before{forced-color-adjust:none}[data-ui=import-export-center] [data-part=job]>[data-part=visual]{border:var(--slotted-border-width-thin, 1px) solid CanvasText;color:CanvasText}[data-ui=import-export-center] [data-part=job]>[data-part=details]{border-color:CanvasText}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { jobs: [{ type: i0.Input, args: [{ isSignal: true, alias: "jobs", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], growing: [{ type: i0.Input, args: [{ isSignal: true, alias: "growing", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], now: [{ type: i0.Input, args: [{ isSignal: true, alias: "now", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", required: false }] }], defaultExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpanded", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], viewRequest: [{ type: i0.Output, args: ["viewRequest"] }], expandedRequest: [{ type: i0.Output, args: ["expandedRequest"] }], cancelRequest: [{ type: i0.Output, args: ["cancelRequest"] }], retryRequest: [{ type: i0.Output, args: ["retryRequest"] }], removeRequest: [{ type: i0.Output, args: ["removeRequest"] }], downloadRequest: [{ type: i0.Output, args: ["downloadRequest"] }], openRequest: [{ type: i0.Output, args: ["openRequest"] }], loadMoreRequest: [{ type: i0.Output, args: ["loadMoreRequest"] }], reloadRequest: [{ type: i0.Output, args: ["reloadRequest"] }], listElement: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], jobActionsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlImportExportJobActions), { isSignal: true }] }] } });
+
+/**
+ * A toast that points at a job, for a page that is not the centre: the job
+ * started, finished, finished with failed rows, failed. Called once in an
+ * injection context where the application keeps its jobs — the shell — so
+ * the reader hears of a job that finishes while they work elsewhere.
+ *
+ * The toast only points. It carries no progress, no cancel and no download;
+ * its one action is the consumer's View, which takes the reader to the centre
+ * and calls its `reveal(key)`. Its id is the job's key under
+ * `import-export-center:`, so the finishing notice replaces the starting one
+ * in place. Its announcement is the sentence the centre says for the same
+ * transition, which the shared announcer does not repeat when both are
+ * mounted. The jobs present the first time the signal is read made no move
+ * the reader saw, and get no toast.
+ */
+function jobToasts(jobs, { actions, messages } = {}) {
+    const toasts = inject(SlToastService);
+    const t = injectMessages(importExportCenterMessages, signal(messages));
+    let previous = null;
+    effect(() => {
+        const current = jobs();
+        untracked(() => {
+            const seen = previous;
+            previous = new Map(current.map((job) => [job.key, job]));
+            if (seen === null)
+                return;
+            for (const job of current) {
+                const notice = jobNotice(seen.get(job.key), job, t);
+                if (notice === null)
+                    continue;
+                const template = typeof actions === 'function' ? actions() : actions;
+                toasts.show({
+                    ...(template === undefined ? {} : { actions: template }),
+                    announcement: notice.title,
+                    data: { key: notice.key },
+                    description: notice.description,
+                    id: notice.id,
+                    loading: notice.loading,
+                    title: notice.title,
+                    tone: notice.tone,
+                });
+            }
+        });
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IMPORT_EXPORT_CENTER_DEFAULTS, SlImportExportCenter, SlImportExportCenterActions, SlImportExportCenterEmpty, SlImportExportCenterFooter, SlImportExportCenterIdFactory, SlImportExportControl, SlImportExportJobActions, injectImportExportCenterDefaults, jobToasts, provideImportExportCenterDefaults };
+//# sourceMappingURL=slotted-angular-import-export-center.mjs.map