@cocoar/ui-components 0.1.0-beta.75 → 0.1.0-beta.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocoar/ui-components",
-  "version": "0.1.0-beta.75",
+  "version": "0.1.0-beta.80",
   "description": "Angular UI components for the Cocoar Design System",
   "author": "Cocoar",
   "license": "Apache-2.0",

package/types/cocoar-ui-components.d.ts

@@ -4,6 +4,7 @@ import { ControlValueAccessor } from '@angular/forms';
 import { SafeHtml } from '@angular/platform-browser';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
 import { Temporal } from '@js-temporal/polyfill';
 
 declare function coarProvideValueAccessor(type: () => Type<ControlValueAccessor>): Provider;
@@ -80,77 +81,15 @@ declare class CoarTextInputComponent extends CoarControlValueAccessor<string> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTextInputComponent, "coar-text-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "clear": "clear"; }, never, ["[prefix]", "[suffix]", "[suffixAction]"], true, never>;
 }
 
-/**
- * Built-in icon registry.
- *
- * ⚠️  DO NOT EDIT THIS FILE MANUALLY
- *
- * This file is auto-generated from /assets/icons/*.svg files.
- * To add new icons:
- * 1. Add SVG files to /assets/icons/
- * 2. Run: npm run build:icons
- * 3. Commit the generated file
- *
- * Icons are inlined as strings for maximum portability.
- *
- * Generated: 2026-01-03T10:25:22.816Z
- * Source: C:\git\cocoar\cocoar-ui\assets\icons
- */
-declare const CORE_ICONS: {
-    'add-list': string;
-    'add-user': string;
-    add: string;
-    'arrow-right': string;
-    back: string;
-    bin: string;
-    calendar: string;
-    'caret-right': string;
-    chat: string;
-    check: string;
-    'chevron-down': string;
-    'chevron-left': string;
-    'chevron-right': string;
-    'chevrons-left': string;
-    'chevrons-right': string;
-    clipboard: string;
-    close: string;
-    comments: string;
-    copy: string;
-    customers: string;
-    employee: string;
-    'eye-closed': string;
-    'eye-off': string;
-    'eye-open': string;
-    eye: string;
-    'important-1': string;
-    important: string;
-    key: string;
-    list: string;
-    load: string;
-    lock: string;
-    minus: string;
-    padlock: string;
-    plus: string;
-    question: string;
-    settings: string;
-    'square-rounded-dashed': string;
-    trash: string;
-    user: string;
-    users: string;
-    x: string;
-};
-type CoreIconName = keyof typeof CORE_ICONS | (string & {});
-
 type CoarIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
 /**
  * COAR Icon Component
  *
- * Hybrid icon system supporting built-in icons and customer-uploaded SVGs.
+ * Icon component supporting DI-provided icon registries.
  *
  * Usage:
  * ```html
  * <coar-icon name="settings" size="md"></coar-icon>
- * <coar-icon name="customer:invoicePaid" size="lg"></coar-icon>
  * ```
  *
  * Size tokens:
@@ -164,11 +103,19 @@ type CoarIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
 declare class CoarIconComponent {
     private readonly iconService;
     private readonly sanitizer;
+    private iconLoadVersion;
     /**
      * Icon identifier.
-     * Examples: "settings", "user", "customer:invoicePaid"
+     * Examples: "settings", "user"
+     */
+    name: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional icon source key.
+     *
+     * - If omitted, the default source is used.
+     * - If multiple sources are registered, this can be used to target a specific one.
      */
-    name: _angular_core.InputSignal<CoreIconName | undefined>;
+    source: _angular_core.InputSignal<string | undefined>;
     /**
      * Icon size. Defaults to 'md' (20px).
      * Can be a preset token (xs, sm, md, lg, xl, auto) or a custom CSS value (e.g., '42px', '3rem').
@@ -199,11 +146,6 @@ declare class CoarIconComponent {
      * Optional text label to display next to the icon.
      */
     label: _angular_core.InputSignal<string | number | undefined>;
-    /**
-     * Optional fallback icon to show if the requested icon fails to load.
-     * If not specified and the icon fails, nothing will be rendered.
-     */
-    fallback?: string;
     /**
      * Signal holding the sanitized SVG HTML ready for rendering.
      */
@@ -222,15 +164,13 @@ declare class CoarIconComponent {
     protected getRotateTransitionValue(): string | null;
     constructor();
     /**
-     * Load an icon from the service and sanitize it.
-     */
-    private loadIcon;
-    /**
-     * Load fallback icon if available.
+     * Resolve an icon name to an SVG string.
+     *
+     * This is kept as a single observable chain so callers can cancel it.
      */
-    private loadFallback;
+    private resolveIcon$;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarIconComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarIconComponent, "coar-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; "rotateTransition": { "alias": "rotateTransition"; "required": false; "isSignal": true; }; "spin": { "alias": "spin"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fallback": { "alias": "fallback"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarIconComponent, "coar-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "source": { "alias": "source"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; "rotateTransition": { "alias": "rotateTransition"; "required": false; "isSignal": true; }; "spin": { "alias": "spin"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /** Configuration for number formatting */
@@ -1055,52 +995,86 @@ declare class CoarTagSelectComponent<T = string> extends CoarSelectBase<T[]> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTagSelectComponent<any>, "coar-tag-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "createPrefix": { "alias": "createPrefix"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "tagCreated": "tagCreated"; }, never, never, true, never>;
 }
 
-/**
- * Service for loading and caching icons from both built-in registry and customer uploads.
- *
- * Built-in icons are stored in memory and returned immediately.
- * Customer icons are fetched from the API and cached after first request.
- */
+type CoarIconRegisteredSource = Readonly<{
+    key: string;
+    isDefault: boolean;
+    canProvideIconKeys: boolean;
+}>;
 declare class CoarIconService {
-    private readonly http;
-    private customerIconCache;
+    private readonly builtInSource;
+    private readonly sourceEntries;
+    private readonly defaultSourceOverrides;
+    private readonly sourceByKey;
     /**
-     * Get an icon by name. Handles both built-in and customer icons.
+     * Get an icon by name from a specific icon source.
      *
-     * @param name - Icon identifier (e.g., "settings" or "customer:invoicePaid")
-     * @returns Observable of SVG string, or null if not found
+     * - If `sourceKey` is omitted, the default source is used.
+     * - If no source is configured, this throws to make misconfiguration obvious.
      */
-    getIcon(name: string): Observable<string | null>;
+    getIcon(name: string, sourceKey?: string): Observable<string | null>;
     /**
-     * Parse icon name into source type and key.
+     * List all registered icon sources.
      *
-     * Examples:
-     * - "settings" -> { source: "builtin", key: "settings" }
-     * - "customer:invoicePaid" -> { source: "customer", key: "invoicePaid" }
-     */
-    private parseIconName;
-    /**
-     * Get a built-in icon from the in-memory registry.
-     */
-    private getBuiltInIcon;
-    /**
-     * Get a customer icon from the API, with caching.
-     * Uses shareReplay(1) to ensure only one network request per icon.
+     * This is useful for UIs that allow users to browse icons grouped by source.
      */
-    private getCustomerIcon;
+    getRegisteredSources(): ReadonlyArray<CoarIconRegisteredSource>;
     /**
-     * Clear the customer icon cache.
-     * Useful when icons are updated on the server.
+     * Get the available icon keys from a specific source.
+     *
+     * Throws if the source does not support listing keys.
      */
+    getAvailableIconKeys(sourceKey?: string): Observable<readonly string[]>;
     clearCache(): void;
-    /**
-     * Clear a specific icon from the cache.
-     */
     clearIconCache(name: string): void;
+    private getSourceOrThrow;
+    private getSourceEntryOrThrow;
+    private getDefaultSourceKeyOrThrow;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarIconService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<CoarIconService>;
 }
 
+interface CoarIconSource {
+    getIcon(name: string): Observable<string | null>;
+    getAvailableIconKeys?(): Observable<readonly string[]>;
+    clearCache?(): void;
+    clearIconCache?(name: string): void;
+}
+type CoarIconSourceEntry = Readonly<{
+    key: string;
+    source: CoarIconSource;
+}>;
+declare const COAR_ICON_SOURCE_ENTRY: InjectionToken<Readonly<{
+    key: string;
+    source: CoarIconSource;
+}>>;
+declare const COAR_DEFAULT_ICON_SOURCE_KEY: InjectionToken<string>;
+type ProvideCoarIconSourceOptions = Readonly<{
+    key: string;
+    source: CoarIconSource;
+}>;
+declare function provideCoarIconSource(options: ProvideCoarIconSourceOptions): Provider;
+type ProvideCoarIconMapSourceOptions = Readonly<{
+    key: string;
+    icons: Readonly<Record<string, string>>;
+}>;
+declare function provideCoarIconMapSource(options: ProvideCoarIconMapSourceOptions): Provider;
+declare function provideCoarDefaultIconSource(key: string): Provider;
+type ProvideCoarHttpIconSourceOptions = Readonly<{
+    key: string;
+    getUrl: (iconName: string) => string;
+    getAvailableIconKeys?: (http: HttpClient) => Observable<readonly string[]>;
+}>;
+declare function provideCoarHttpIconSource(options: ProvideCoarHttpIconSourceOptions): Provider;
+
+declare const COAR_BUILTIN_ICON_SOURCE_KEY: "coar-builtin";
+/**
+ * Overrides (and/or adds) built-in icons while keeping the built-in set as a base.
+ *
+ * This registers a map source under the fixed key `coar-builtin`, so it replaces the
+ * built-in fallback source inside `CoarIconService`.
+ */
+declare function provideCoarIconBuiltInOverrides(overrides: Readonly<Record<string, string>>): Provider;
+
 /**
  * Loading strategy for tab content:
  * - 'lazy': Content is only rendered when tab is active (default)
@@ -1314,9 +1288,9 @@ declare class CoarButtonComponent {
     /** Button type attribute */
     type: _angular_core.InputSignal<"button" | "reset" | "submit">;
     /** Icon to display before the label */
-    iconStart: _angular_core.InputSignal<CoreIconName | undefined>;
+    iconStart: _angular_core.InputSignal<string | undefined>;
     /** Icon to display after the label */
-    iconEnd: _angular_core.InputSignal<CoreIconName | undefined>;
+    iconEnd: _angular_core.InputSignal<string | undefined>;
     /** Whether the button should take full width */
     fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Optional aria-label applied to the underlying <button> element */
@@ -1898,5 +1872,5 @@ interface CalendarDay {
     markerCssClass: string | null;
 }
 
-export { COAR_LOCALE_SERVICE, CORE_ICONS, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarLocaleService, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor };
-export type { BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardColor, CardPadding, CoarCheckboxSize, CoarCheckboxState, CoarDateMarker, CoarDatePickerSize, CoarIconSize, CoarLabelSize, CoarNumberInputSize, CoarNumberInputStepperButtons, CoarPasswordInputSize, CoarScrollbarAutoHide, CoarScrollbarOverflow, CoarScrollbarTheme, CoarSelectOption, CoarSelectSize, CoarTableVariant, CoarTextInputSize, CoreIconName, DateFormatConfig, DividerAlign, DividerVariant, ICoarLocaleService, LocaleConfig, NoteColor, NotePadding, NumberFormatConfig, TabContent, TabLoadingStrategy, TagColor, TagSize };
+export { COAR_BUILTIN_ICON_SOURCE_KEY, COAR_DEFAULT_ICON_SOURCE_KEY, COAR_ICON_SOURCE_ENTRY, COAR_LOCALE_SERVICE, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarLocaleService, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor, provideCoarDefaultIconSource, provideCoarHttpIconSource, provideCoarIconBuiltInOverrides, provideCoarIconMapSource, provideCoarIconSource };
+export type { BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardColor, CardPadding, CoarCheckboxSize, CoarCheckboxState, CoarDateMarker, CoarDatePickerSize, CoarIconRegisteredSource, CoarIconSize, CoarIconSource, CoarIconSourceEntry, CoarLabelSize, CoarNumberInputSize, CoarNumberInputStepperButtons, CoarPasswordInputSize, CoarScrollbarAutoHide, CoarScrollbarOverflow, CoarScrollbarTheme, CoarSelectOption, CoarSelectSize, CoarTableVariant, CoarTextInputSize, DateFormatConfig, DividerAlign, DividerVariant, ICoarLocaleService, LocaleConfig, NoteColor, NotePadding, NumberFormatConfig, ProvideCoarHttpIconSourceOptions, ProvideCoarIconMapSourceOptions, ProvideCoarIconSourceOptions, TabContent, TabLoadingStrategy, TagColor, TagSize };