@keepui/ui 0.1.0

package/fesm2022/keepui-ui.mjs

@@ -0,0 +1,656 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, input, output, computed, ChangeDetectionStrategy, Component, inject, signal, makeEnvironmentProviders } from '@angular/core';
+import { TranslocoPipe, TRANSLOCO_SCOPE, TranslocoService, provideTransloco } from '@jsverse/transloco';
+import { of } from 'rxjs';
+
+/**
+ * Injection token for the platform file/image adapter.
+ *
+ * Register a concrete implementation with:
+ * - `provideKeepUi()` for web projects
+ * - `provideKeepUiCapacitor()` for Angular + Capacitor projects
+ */
+const FILE_PORT = new InjectionToken('FILE_PORT');
+
+/**
+ * Web implementation of `FilePort`.
+ *
+ * Uses a hidden `<input type="file">` and the `FileReader` API to let the user
+ * pick an image from the file system in a browser environment.
+ *
+ * This implementation has no dependency on Capacitor or any native plugin.
+ */
+class WebFileService {
+    pickImage() {
+        return new Promise((resolve, reject) => {
+            const input = document.createElement('input');
+            input.type = 'file';
+            input.accept = 'image/*';
+            input.onchange = () => {
+                const file = input.files?.[0];
+                if (!file) {
+                    reject(new Error('No file selected'));
+                    return;
+                }
+                const reader = new FileReader();
+                reader.onload = () => {
+                    resolve({
+                        dataUrl: reader.result,
+                        mimeType: file.type,
+                    });
+                };
+                reader.onerror = () => reject(reader.error ?? new Error('FileReader error'));
+                reader.readAsDataURL(file);
+            };
+            input.click();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WebFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WebFileService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: WebFileService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Accessible, themed action button with support for variants, shapes, sizes,
+ * loading state, full-width layout, and named icon slots.
+ *
+ * Works identically on **web** and **Angular + Capacitor** (no native API usage).
+ *
+ * ```html
+ * <!-- Basic usage -->
+ * <keepui-button (clicked)="save()">Save</keepui-button>
+ *
+ * <!-- Primary, pill-shaped, fixed width -->
+ * <keepui-button variant="primary" shape="pill">Confirm</keepui-button>
+ *
+ * <!-- With leading icon (any inline element) -->
+ * <keepui-button variant="outline" size="auto">
+ *   <svg slot="leading" width="16" height="16" aria-hidden="true">…</svg>
+ *   Upload
+ * </keepui-button>
+ *
+ * <!-- Loading state -->
+ * <keepui-button [loading]="isSaving()">Saving…</keepui-button>
+ *
+ * <!-- Full-width, danger -->
+ * <keepui-button variant="danger" [fullWidth]="true">Delete account</keepui-button>
+ *
+ * <!-- Icon-only (requires ariaLabel for accessibility) -->
+ * <keepui-button variant="ghost" size="auto" ariaLabel="Close dialog">
+ *   <svg slot="leading" …>…</svg>
+ * </keepui-button>
+ * ```
+ */
+class ButtonComponent {
+    constructor() {
+        /** Visual style of the button. @default 'primary' */
+        this.variant = input('primary');
+        /**
+         * Size mode.
+         * - `md` → fixed 160 px wide, 40 px tall.
+         * - `auto` → padding-driven width, 40 px tall.
+         * @default 'md'
+         */
+        this.size = input('md');
+        /** Border-radius style. @default 'pill' */
+        this.shape = input('pill');
+        /** HTML `type` attribute of the inner `<button>`. @default 'button' */
+        this.type = input('button');
+        /** Disables the button when `true`. @default false */
+        this.disabled = input(false);
+        /**
+         * Replaces the content with an animated spinner and sets `aria-busy`.
+         * Also disables the button until the operation completes.
+         * @default false
+         */
+        this.loading = input(false);
+        /** Expands the button to fill its container width. @default false */
+        this.fullWidth = input(false);
+        /**
+         * Accessible label for icon-only buttons.
+         * When provided, sets the `aria-label` attribute on the inner `<button>`.
+         * @default ''
+         */
+        this.ariaLabel = input('');
+        /** Emitted when the button is clicked and is not disabled or loading. */
+        this.clicked = output();
+        this.isDisabled = computed(() => this.disabled() || this.loading());
+        this.buttonClass = computed(() => {
+            const base = [
+                'inline-flex items-center justify-center gap-2',
+                'min-h-[2.75rem] text-sm font-medium cursor-pointer select-none',
+                'transition-colors duration-200',
+                'focus-visible:outline-none focus-visible:ring-2',
+                'focus-visible:ring-keepui-primary focus-visible:ring-offset-2',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+            ].join(' ');
+            const sizeClass = this.fullWidth()
+                ? 'w-full h-10 px-4'
+                : this.size() === 'md'
+                    ? 'w-40 h-10'
+                    : 'px-6 h-10';
+            const shapeMap = {
+                pill: 'rounded-full',
+                rounded: 'rounded-2xl',
+            };
+            const variantMap = {
+                primary: [
+                    'bg-keepui-primary text-keepui-primary-fg border border-keepui-primary',
+                    'enabled:hover:bg-keepui-primary-hover enabled:hover:border-keepui-primary-hover',
+                    'enabled:active:bg-keepui-primary-active enabled:active:border-keepui-primary-active',
+                ].join(' '),
+                secondary: [
+                    'bg-keepui-surface text-keepui-text border border-keepui-border',
+                    'enabled:hover:bg-keepui-surface-hover enabled:hover:border-keepui-border-strong',
+                    'disabled:text-keepui-text-disabled',
+                ].join(' '),
+                outline: [
+                    'bg-transparent border border-keepui-border text-keepui-text',
+                    'enabled:hover:border-keepui-primary enabled:hover:text-keepui-primary',
+                ].join(' '),
+                ghost: [
+                    'bg-transparent border border-keepui-primary text-keepui-primary',
+                    'enabled:hover:bg-keepui-primary/10',
+                ].join(' '),
+                danger: [
+                    'bg-keepui-error text-keepui-error-fg border border-keepui-error',
+                    'enabled:hover:opacity-90',
+                    'enabled:active:opacity-80',
+                ].join(' '),
+            };
+            return [base, sizeClass, shapeMap[this.shape()], variantMap[this.variant()]].join(' ');
+        });
+    }
+    handleClick() {
+        if (!this.isDisabled()) {
+            this.clicked.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "keepui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "style.display": "fullWidth() ? \"block\" : \"inline-block\"", "style.width": "fullWidth() ? \"100%\" : null" } }, ngImport: i0, template: `
+    <button
+      [attr.type]="type()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="isDisabled() ? true : null"
+      [attr.aria-busy]="loading() ? true : null"
+      [attr.aria-label]="ariaLabel() || null"
+      (click)="handleClick()"
+      [class]="buttonClass()"
+    >
+      @if (loading()) {
+        <span class="keepui-btn-spinner" aria-hidden="true"></span>
+      } @else {
+        <ng-content select="[slot='leading']" />
+      }
+
+      <ng-content />
+
+      @if (!loading()) {
+        <ng-content select="[slot='trailing']" />
+      }
+    </button>
+  `, isInline: true, styles: [".keepui-btn-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:keepui-spin .65s linear infinite;flex-shrink:0}@keyframes keepui-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'keepui-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.display]': 'fullWidth() ? "block" : "inline-block"',
+                        '[style.width]': 'fullWidth() ? "100%" : null',
+                    }, template: `
+    <button
+      [attr.type]="type()"
+      [disabled]="isDisabled()"
+      [attr.aria-disabled]="isDisabled() ? true : null"
+      [attr.aria-busy]="loading() ? true : null"
+      [attr.aria-label]="ariaLabel() || null"
+      (click)="handleClick()"
+      [class]="buttonClass()"
+    >
+      @if (loading()) {
+        <span class="keepui-btn-spinner" aria-hidden="true"></span>
+      } @else {
+        <ng-content select="[slot='leading']" />
+      }
+
+      <ng-content />
+
+      @if (!loading()) {
+        <ng-content select="[slot='trailing']" />
+      }
+    </button>
+  `, styles: [".keepui-btn-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:keepui-spin .65s linear infinite;flex-shrink:0}@keyframes keepui-spin{to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+/**
+ * A versatile card container component.
+ *
+ * ```html
+ * <keepui-card>
+ *   <h2>Title</h2>
+ *   <p>Some content</p>
+ * </keepui-card>
+ *
+ * <keepui-card [elevation]="2">
+ *   Elevated card
+ * </keepui-card>
+ * ```
+ */
+class CardComponent {
+    constructor() {
+        /** Shadow elevation level (0–3). */
+        this.elevation = input(1);
+        this.cardClass = computed(() => {
+            const base = [
+                'rounded-lg p-4',
+                'bg-keepui-surface border border-keepui-border text-keepui-text',
+                'transition-all duration-200',
+            ].join(' ');
+            const shadowMap = {
+                0: '',
+                1: 'shadow-keepui-sm',
+                2: 'shadow-keepui-md',
+                3: 'shadow-keepui-lg',
+            };
+            const shadow = shadowMap[this.elevation()];
+            return shadow ? `${base} ${shadow}` : base;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: CardComponent, isStandalone: true, selector: "keepui-card", inputs: { elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div [class]="cardClass()">
+      <ng-content />
+    </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-card',
+                    standalone: true,
+                    host: { class: 'block' },
+                    template: `
+    <div [class]="cardClass()">
+      <ng-content />
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * Typed constants for every translation key used in @keepui/ui.
+ *
+ * Use these instead of raw strings so that renaming a key is caught by
+ * the TypeScript compiler across all consumers.
+ *
+ * @example
+ * ```ts
+ * import { KEEPUI_TRANSLATION_KEYS as T } from '@keepui/ui';
+ *
+ * const label = translocoService.translate(T.IMAGE_PREVIEW.SELECT_IMAGE);
+ * ```
+ */
+const KEEPUI_TRANSLATION_KEYS = {
+    IMAGE_PREVIEW: {
+        SELECT_IMAGE: 'imagePreview.selectImage',
+        LOADING: 'imagePreview.loading',
+        PREVIEW_ALT: 'imagePreview.previewAlt',
+        ERROR_UNEXPECTED: 'imagePreview.errorUnexpected',
+    },
+};
+/** Ordered list of languages available in KeepUI. */
+const KEEPUI_AVAILABLE_LANGUAGES = [
+    'en',
+    'es',
+    'de',
+];
+
+/**
+ * Standalone component that allows the user to pick and preview an image.
+ *
+ * This component is fully platform-agnostic. It delegates file picking to
+ * whatever `FilePort` implementation is provided via `FILE_PORT`.
+ *
+ * UI strings are fully internationalised via Transloco (scope `'keepui'`).
+ * Call `provideKeepUiI18n()` in your `app.config.ts` and use
+ * `KeepUiLanguageService.setLanguage(lang)` to change locale at runtime.
+ *
+ * Usage:
+ * ```html
+ * <keepui-image-preview />
+ * ```
+ *
+ * Prerequisites — register providers in `app.config.ts`:
+ * - Web:      `provideKeepUi()` + `provideKeepUiI18n()`
+ * - Capacitor: `provideKeepUiCapacitor()` + `provideKeepUiI18n()`
+ */
+class ImagePreviewComponent {
+    constructor() {
+        this.filePort = inject(FILE_PORT);
+        /** Translation key references (typed via KEEPUI_TRANSLATION_KEYS). */
+        this.keys = KEEPUI_TRANSLATION_KEYS.IMAGE_PREVIEW;
+        /** URL of the selected image, ready to bind to `[src]`. */
+        this.imageUrl = signal(null);
+        /** Error message if the last pick operation failed. */
+        this.error = signal(null);
+        /** True while the pick operation is in progress. */
+        this.loading = signal(false);
+    }
+    async pickImage() {
+        this.error.set(null);
+        this.loading.set(true);
+        try {
+            const result = await this.filePort.pickImage();
+            this.imageUrl.set(result.dataUrl);
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : KEEPUI_TRANSLATION_KEYS.IMAGE_PREVIEW.ERROR_UNEXPECTED);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ImagePreviewComponent, isStandalone: true, selector: "keepui-image-preview", host: { classAttribute: "block" }, providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'keepui' }], ngImport: i0, template: `
+    <div class="flex flex-col gap-4">
+
+      <keepui-button
+        type="button"
+        variant="secondary"
+        size="auto"
+        shape="rounded"
+        [loading]="loading()"
+        (clicked)="pickImage()"
+      >
+        {{ (loading() ? keys.LOADING : keys.SELECT_IMAGE) | transloco }}
+      </keepui-button>
+
+      <span role="status" class="sr-only">
+        @if (imageUrl()) {
+          {{ keys.PREVIEW_ALT | transloco }}
+        }
+      </span>
+
+      @if (imageUrl()) {
+        <div class="max-w-full">
+          <img
+            class="max-w-full h-auto rounded border border-keepui-border"
+            [src]="imageUrl()"
+            [attr.alt]="keys.PREVIEW_ALT | transloco"
+          />
+        </div>
+      }
+
+      @if (error()) {
+        <p class="text-keepui-error text-sm m-0" role="alert">{{ error() }}</p>
+      }
+
+    </div>
+  `, isInline: true, dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: ButtonComponent, selector: "keepui-button", inputs: ["variant", "size", "shape", "type", "disabled", "loading", "fullWidth", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ImagePreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'keepui-image-preview',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [TranslocoPipe, ButtonComponent],
+                    providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'keepui' }],
+                    host: { class: 'block' },
+                    template: `
+    <div class="flex flex-col gap-4">
+
+      <keepui-button
+        type="button"
+        variant="secondary"
+        size="auto"
+        shape="rounded"
+        [loading]="loading()"
+        (clicked)="pickImage()"
+      >
+        {{ (loading() ? keys.LOADING : keys.SELECT_IMAGE) | transloco }}
+      </keepui-button>
+
+      <span role="status" class="sr-only">
+        @if (imageUrl()) {
+          {{ keys.PREVIEW_ALT | transloco }}
+        }
+      </span>
+
+      @if (imageUrl()) {
+        <div class="max-w-full">
+          <img
+            class="max-w-full h-auto rounded border border-keepui-border"
+            [src]="imageUrl()"
+            [attr.alt]="keys.PREVIEW_ALT | transloco"
+          />
+        </div>
+      }
+
+      @if (error()) {
+        <p class="text-keepui-error text-sm m-0" role="alert">{{ error() }}</p>
+      }
+
+    </div>
+  `,
+                }]
+        }] });
+
+/**
+ * Registers KeepUI core providers for a **web** Angular application.
+ *
+ * Registers `WebFileService` as the implementation of `FILE_PORT`, enabling
+ * all KeepUI components to use the browser's native file picker.
+ *
+ * Add to `app.config.ts`:
+ * ```ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [provideKeepUi()],
+ * };
+ * ```
+ */
+function provideKeepUi() {
+    return makeEnvironmentProviders([
+        { provide: FILE_PORT, useClass: WebFileService },
+    ]);
+}
+
+/**
+ * Inline translation objects for KeepUI.
+ *
+ * These mirror `en.json`, `es.json` and `de.json` and are bundled directly
+ * into the library so that no HTTP request is needed at runtime.
+ *
+ * > **Do not edit this file manually.**
+ * > Keep it in sync with the JSON files inside `/i18n/`.
+ */
+const EN = {
+    imagePreview: {
+        selectImage: 'Select image',
+        loading: 'Loading…',
+        previewAlt: 'Selected image preview',
+        errorUnexpected: 'An unexpected error occurred',
+    },
+};
+const ES = {
+    imagePreview: {
+        selectImage: 'Seleccionar imagen',
+        loading: 'Cargando…',
+        previewAlt: 'Vista previa de imagen seleccionada',
+        errorUnexpected: 'Ha ocurrido un error inesperado',
+    },
+};
+const DE = {
+    imagePreview: {
+        selectImage: 'Bild auswählen',
+        loading: 'Laden…',
+        previewAlt: 'Vorschau des ausgewählten Bildes',
+        errorUnexpected: 'Ein unerwarteter Fehler ist aufgetreten',
+    },
+};
+/** Map from locale code to its translation object. */
+const KEEPUI_TRANSLATIONS = {
+    en: EN,
+    es: ES,
+    de: DE,
+};
+
+/**
+ * Transloco loader for KeepUI.
+ *
+ * Serves translations **inline** (bundled in the library JS) so that no HTTP
+ * request is required. It handles both plain lang paths (`'en'`, `'es'`, …)
+ * and scope-prefixed paths (`'keepui/en'`, `'keepui/es'`, …).
+ *
+ * @internal
+ */
+class KeepUiTranslocoLoader {
+    getTranslation(langPath) {
+        // Transloco calls this with 'keepui/en', 'keepui/es', etc.
+        // when a component has TRANSLOCO_SCOPE = 'keepui'.
+        const lang = langPath.includes('/') ? langPath.split('/')[1] : langPath;
+        const isValid = (l) => l === 'en' || l === 'es' || l === 'de';
+        const translations = isValid(lang)
+            ? KEEPUI_TRANSLATIONS[lang]
+            : KEEPUI_TRANSLATIONS['en'];
+        return of(translations);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KeepUiTranslocoLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KeepUiTranslocoLoader }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KeepUiTranslocoLoader, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Service that exposes a public API for changing the active language of all
+ * KeepUI components at runtime.
+ *
+ * ### Usage
+ * ```ts
+ * // Inject anywhere in the host application
+ * const lang = inject(KeepUiLanguageService);
+ *
+ * // Switch to Spanish
+ * lang.setLanguage('es');
+ *
+ * // Read the active language
+ * console.log(lang.activeLanguage()); // 'es'
+ * ```
+ *
+ * Register via `provideKeepUiI18n()` in `app.config.ts`.
+ */
+class KeepUiLanguageService {
+    constructor() {
+        this.transloco = inject(TranslocoService);
+        /** Signal that reflects the currently active KeepUI locale. */
+        this.activeLanguage = signal(this.transloco.getActiveLang());
+        /** Ordered list of all supported locales. */
+        this.availableLanguages = KEEPUI_AVAILABLE_LANGUAGES;
+    }
+    /**
+     * Changes the active language for all KeepUI components.
+     *
+     * @param lang - One of `'en'`, `'es'` or `'de'`.
+     */
+    setLanguage(lang) {
+        this.transloco.setActiveLang(lang);
+        this.activeLanguage.set(lang);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KeepUiLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KeepUiLanguageService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KeepUiLanguageService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Registers all providers required for KeepUI internationalisation.
+ *
+ * - Configures a self-contained Transloco instance scoped to `'keepui'`.
+ * - Bundles all translations **inline** — no HTTP assets required.
+ * - Provides {@link KeepUiLanguageService} so the host app can switch locale.
+ *
+ * ### Usage in `app.config.ts`
+ * ```ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideKeepUi(),
+ *     provideKeepUiI18n(),                // default language: 'en'
+ *     provideKeepUiI18n({ defaultLang: 'es' }), // or start in Spanish
+ *   ],
+ * };
+ * ```
+ *
+ * ### Changing language at runtime
+ * ```ts
+ * const lang = inject(KeepUiLanguageService);
+ * lang.setLanguage('de');
+ * ```
+ *
+ * > **Note:** If your application already calls `provideTransloco()`, do NOT
+ * > call `provideKeepUiI18n()` — instead configure your Transloco loader to
+ * > handle the `'keepui/{lang}'` scope paths, and provide `KeepUiLanguageService`
+ * > manually.
+ */
+function provideKeepUiI18n(options = {}) {
+    const defaultLang = options.defaultLang ?? 'en';
+    return makeEnvironmentProviders([
+        provideTransloco({
+            config: {
+                defaultLang,
+                availableLangs: [...KEEPUI_AVAILABLE_LANGUAGES],
+                reRenderOnLangChange: true,
+                failedRetries: 0,
+                missingHandler: { useFallbackTranslation: true },
+                fallbackLang: 'en',
+            },
+            loader: KeepUiTranslocoLoader,
+        }),
+        KeepUiLanguageService,
+    ]);
+}
+
+/**
+ * A controllable mock implementation of `FilePort` for use in unit tests.
+ *
+ * By default, `pickImage()` resolves successfully. Set `nextError` to make the
+ * next call reject with that error.
+ *
+ * ```ts
+ * providers: [{ provide: FILE_PORT, useClass: MockFileService }]
+ * ```
+ */
+class MockFileService {
+    constructor() {
+        /** Set this to make the next `pickImage()` call reject with this error. */
+        this.nextError = null;
+    }
+    pickImage() {
+        if (this.nextError) {
+            const err = this.nextError;
+            this.nextError = null;
+            return Promise.reject(err);
+        }
+        return Promise.resolve({
+            dataUrl: 'data:image/jpeg;base64,mockImageData==',
+            mimeType: 'image/jpeg',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MockFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MockFileService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MockFileService, decorators: [{
+            type: Injectable
+        }] });
+
+// Public API Surface of @keepui/ui
+// Models
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent, CardComponent, FILE_PORT, ImagePreviewComponent, KEEPUI_AVAILABLE_LANGUAGES, KEEPUI_TRANSLATIONS, KEEPUI_TRANSLATION_KEYS, KeepUiLanguageService, MockFileService, WebFileService, provideKeepUi, provideKeepUiI18n };
+//# sourceMappingURL=keepui-ui.mjs.map