@makigamestudio/ui-core 0.4.2 → 0.5.0

package/fesm2022/makigamestudio-ui-core.mjs

@@ -1,342 +1,682 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, input, output, viewChild, ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonButton, IonIcon, PopoverController, IonList, IonItem, IonLabel, IonSpinner } from '@ionic/angular/standalone';
+import { Injectable, signal, inject, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { PopoverController, IonList, IonItem, IonIcon, IonLabel, IonSpinner, IonButton } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { trashOutline, createOutline, chevronDownOutline } from 'ionicons/icons';
-
-/**
- * TestClass - Example class implementing TestInterface.
- * Demonstrates the pattern for creating model classes with validation and factory methods.
- */
-class TestClass {
-    id;
-    title;
-    description;
-    createdAt;
-    isActive;
-    metadata;
-    constructor(data) {
-        this.id = data.id;
-        this.title = data.title;
-        this.description = data.description;
-        this.createdAt = data.createdAt instanceof Date ? data.createdAt : new Date(data.createdAt);
-        this.isActive = data.isActive;
-        this.metadata = data.metadata;
-    }
-    /**
-     * Factory method to create a new TestClass instance with a generated ID.
-     */
-    static create(title, description) {
-        return new TestClass({
-            id: crypto.randomUUID(),
-            title,
-            description,
-            createdAt: new Date(),
-            isActive: true
-        });
-    }
-    /**
-     * Creates a new instance with updated properties (immutable pattern).
-     */
-    update(changes) {
-        return new TestClass({
-            ...this,
-            ...changes
-        });
-    }
-    /**
-     * Returns a deactivated copy of this instance.
-     */
-    deactivate() {
-        return this.update({ isActive: false });
-    }
-    /**
-     * Converts the instance to a plain JSON object.
-     */
-    toJSON() {
-        return {
-            id: this.id,
-            title: this.title,
-            description: this.description,
-            createdAt: this.createdAt,
-            isActive: this.isActive,
-            metadata: this.metadata
-        };
-    }
-}
+import { chevronDownOutline } from 'ionicons/icons';
 
 /**
  * @file Action button type enumeration
  * @description Defines the display types for action buttons
  */
 /**
- * Enumeration of action button display types.
+ * Enumeration of action button types.
+ *
+ * Both types support flexible display formats:
+ * - Icon + Label: Provide both `icon` and `label` properties
+ * - Icon only: Provide `icon` without `label`
+ * - Label only: Provide `label` without `icon`
  *
  * @example
  * ```typescript
- * const button: ActionButton = {
+ * // Default button with label and icon
+ * const saveButton: ActionButton = {
  *   id: 'save-btn',
  *   label: 'Save',
+ *   icon: 'save-outline',
  *   type: ActionButtonType.Default,
  *   handler: () => console.log('Saved!')
  * };
+ *
+ * // Icon-only button (no label)
+ * const iconButton: ActionButton = {
+ *   id: 'settings-btn',
+ *   icon: 'settings-outline',
+ *   type: ActionButtonType.Default,
+ *   ariaLabel: 'Settings',
+ *   handler: () => console.log('Settings')
+ * };
+ *
+ * // Label-only button (no icon)
+ * const textButton: ActionButton = {
+ *   id: 'cancel-btn',
+ *   label: 'Cancel',
+ *   type: ActionButtonType.Default,
+ *   handler: () => console.log('Cancelled')
+ * };
  * ```
  */
 var ActionButtonType;
 (function (ActionButtonType) {
     /**
-     * Standard button with label and optional icon.
+     * Standard action button.
+     * Display format (icon-only, label-only, or icon+label) is determined by which properties are provided.
      */
     ActionButtonType["Default"] = "default";
-    /**
-     * Button displaying only an icon, no label.
-     */
-    ActionButtonType["IconOnly"] = "icon-only";
     /**
      * Button that opens a dropdown popover with child actions.
+     * Like Default, supports icon-only, label-only, or icon+label display.
      */
     ActionButtonType["Dropdown"] = "dropdown";
 })(ActionButtonType || (ActionButtonType = {}));
 
 /**
- * TestService - Example service using Angular Signals for reactive state management.
- * Provided in root, demonstrating singleton service pattern with signal-based state.
+ * @file Action Button List Service
+ * @description Provides logic for managing lists of action buttons in dropdowns/popovers.
+ *
+ * This service encapsulates all list-related logic for action buttons, making it
+ * reusable across different UI library implementations (Ionic popover, Material menu,
+ * PrimeNG overlay, etc.).
+ *
+ * @example
+ * ```typescript
+ * // Ionic implementation (ActionButtonListComponent)
+ * @Component({
+ *   providers: [ActionButtonListService],
+ *   template: `
+ *     <ion-list>
+ *       @for (button of buttonList(); track button.id) {
+ *         <ion-item
+ *           [disabled]="!canSelectButton(button)"
+ *           (click)="onSelect(button)"
+ *         >
+ *           @if (isButtonLoading(button)) {
+ *             <ion-spinner slot="start" />
+ *           }
+ *           <ion-label>{{ button.label }}</ion-label>
+ *         </ion-item>
+ *       }
+ *     </ion-list>
+ *   `
+ * })
+ * export class ActionButtonListComponent {
+ *   private readonly listService = inject(ActionButtonListService);
+ *
+ *   readonly buttonList = computed(() =>
+ *     this.listService.resolveButtonList(this._propsButtons(), this.buttons())
+ *   );
+ *
+ *   protected isButtonLoading(button: ActionButton): boolean {
+ *     return this.listService.isButtonLoading(button, this.loadingChildIds());
+ *   }
+ * }
+ *
+ * // Material Menu implementation example
+ * @Component({
+ *   selector: 'mat-action-menu',
+ *   providers: [ActionButtonListService],
+ *   template: `
+ *     <mat-menu #menu="matMenu">
+ *       @for (button of buttonList(); track button.id) {
+ *         <button mat-menu-item
+ *           [disabled]="!canSelectButton(button)"
+ *           (click)="onSelect(button)"
+ *         >
+ *           @if (isButtonLoading(button)) {
+ *             <mat-spinner diameter="16" />
+ *           } @else if (button.icon) {
+ *             <mat-icon>{{ button.icon }}</mat-icon>
+ *           }
+ *           <span>{{ button.label }}</span>
+ *         </button>
+ *       }
+ *     </mat-menu>
+ *   `
+ * })
+ * export class MatActionMenuComponent {
+ *   private readonly listService = inject(ActionButtonListService);
+ *   // ... similar implementation
+ * }
+ * ```
  */
-class TestService {
-    // Private writable signal for internal state
-    _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
-    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
-    _error = signal(null, ...(ngDevMode ? [{ debugName: "_error" }] : []));
-    // Public readonly computed signals for consumers
-    /** All items in the store */
-    items = this._items.asReadonly();
-    /** Loading state indicator */
-    loading = this._loading.asReadonly();
-    /** Current error message, if any */
-    error = this._error.asReadonly();
-    /** Count of all items */
-    count = computed(() => this._items().length, ...(ngDevMode ? [{ debugName: "count" }] : []));
-    /** Only active items */
-    activeItems = computed(() => this._items().filter(item => item.isActive), ...(ngDevMode ? [{ debugName: "activeItems" }] : []));
-    /** Count of active items */
-    activeCount = computed(() => this.activeItems().length, ...(ngDevMode ? [{ debugName: "activeCount" }] : []));
+/**
+ * Service that provides logic for managing lists of action buttons.
+ *
+ * This service is designed to be provided at the component level to maintain
+ * consistency with other button services.
+ *
+ * @usageNotes
+ * ### Button List Resolution
+ * The service handles two input sources for buttons:
+ * 1. Direct property assignment (via PopoverController.create componentProps)
+ * 2. Angular signal input binding
+ *
+ * Props take precedence over input when both are provided.
+ *
+ * ### Loading State
+ * Loading state can come from:
+ * 1. The button's own `loading` property
+ * 2. A set of loading child IDs passed from the parent button
+ *
+ * ### Selection Validation
+ * A button can be selected only if it's not loading and not disabled.
+ */
+class ActionButtonListService {
     /**
-     * Adds a new item to the store.
+     * Resolves the button list from either props or input.
+     * Props (from PopoverController) take precedence over input binding.
+     *
+     * @param propsButtons - Buttons passed via component props
+     * @param inputButtons - Buttons passed via signal input
+     * @returns The resolved button array
      */
-    addItem(title, description) {
-        const newItem = TestClass.create(title, description);
-        this._items.update(items => [...items, newItem]);
-        this._error.set(null);
-        return newItem;
+    resolveButtonList(propsButtons, inputButtons) {
+        return propsButtons.length > 0 ? propsButtons : inputButtons;
     }
     /**
-     * Removes an item by ID.
+     * Checks if a button is currently in a loading state.
+     *
+     * @param button - The button to check
+     * @param loadingChildIds - Set of child IDs currently loading (optional)
+     * @returns True if the button is loading
      */
-    removeItem(id) {
-        const currentItems = this._items();
-        const filteredItems = currentItems.filter(item => item.id !== id);
-        if (filteredItems.length === currentItems.length) {
-            return false;
-        }
-        this._items.set(filteredItems);
-        return true;
+    isButtonLoading(button, loadingChildIds) {
+        const ids = loadingChildIds ?? new Set();
+        return (button.loading ?? false) || ids.has(button.id);
     }
     /**
-     * Updates an existing item by ID.
+     * Checks if a button is currently in a loading state using a signal.
+     * Convenience method when loadingChildIds is provided as a signal.
+     *
+     * @param button - The button to check
+     * @param loadingChildIdsSignal - Signal containing loading child IDs (optional)
+     * @returns True if the button is loading
      */
-    updateItem(id, changes) {
-        let updatedItem = null;
-        this._items.update(items => items.map(item => {
-            if (item.id === id) {
-                updatedItem = item.update(changes);
-                return updatedItem;
-            }
-            return item;
-        }));
-        return updatedItem;
+    isButtonLoadingFromSignal(button, loadingChildIdsSignal) {
+        const loadingChildIds = loadingChildIdsSignal ? loadingChildIdsSignal() : new Set();
+        return this.isButtonLoading(button, loadingChildIds);
     }
     /**
-     * Deactivates an item by ID.
+     * Determines if a button can be selected (clicked).
+     *
+     * @param button - The button to check
+     * @param loadingChildIds - Set of child IDs currently loading (optional)
+     * @returns True if the button can be selected
      */
-    deactivateItem(id) {
-        return this.updateItem(id, { isActive: false });
+    canSelectButton(button, loadingChildIds) {
+        const isLoading = this.isButtonLoading(button, loadingChildIds);
+        const isDisabled = button.config?.disabled ?? false;
+        return !isLoading && !isDisabled;
     }
     /**
-     * Gets an item by ID using computed lookup.
+     * Determines whether to show a loading spinner for a button.
+     *
+     * @param button - The button to check
+     * @param loadingChildIds - Set of child IDs currently loading (optional)
+     * @returns True if spinner should be shown
      */
-    getItemById(id) {
-        return this._items().find(item => item.id === id);
+    shouldShowSpinner(button, loadingChildIds) {
+        const isLoading = this.isButtonLoading(button, loadingChildIds);
+        const showSpinner = button.showLoadingSpinner ?? true;
+        return isLoading && showSpinner;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionButtonListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionButtonListService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionButtonListService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @file Button Display Service
+ * @description Provides display logic for action buttons (icon slots, label visibility, etc.).
+ *
+ * This service encapsulates all display-related logic for buttons, making it
+ * reusable across different UI library implementations.
+ *
+ * @example
+ * ```typescript
+ * // Ionic implementation
+ * @Component({
+ *   providers: [ButtonDisplayService],
+ *   template: `
+ *     <ion-button
+        [fill]="button().config?.fill"
+        [size]="button().config?.size"
+        [color]="button().config?.color"
+        [shape]="button().config?.shape"
+        [expand]="button().config?.expand"
+        [strong]="button().config?.strong"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="button().ariaLabel"
+        [title]="button().tooltip ?? ''"
+        (click)="onClick($event)"
+      >
+        @if (showLoadingSpinner()) {
+          <ion-spinner [slot]="iconSlot()" name="crescent" />
+        } @else if (button().icon) {
+          <ion-icon [name]="button().icon" [slot]="iconSlot()" class="button-icon" />
+        }
+        @if (showLabel()) {
+          {{ button().label }}
+        }
+        @if (showDropdownIcon()) {
+          <ion-icon name="chevron-down-outline" slot="end" class="dropdown-icon" />
+        }
+      </ion-button>
+ *   `
+ * })
+ * export class ButtonComponent {
+ *   private readonly displayService = inject(ButtonDisplayService);
+ *   readonly button = input.required<ActionButton>();
+ *
+ *   readonly showLabel = computed(() =>
+ *     this.displayService.shouldShowLabel(this.button())
+ *   );
+ * }
+ *
+ * // PrimeNG implementation example
+ * @Component({
+ *   selector: 'p-action-button',
+ *   providers: [ButtonDisplayService],
+ *   template: `
+ *     <p-button
+ *       [icon]="button().icon"
+ *       [iconPos]="showLabel() ? 'left' : undefined"
+ *       [label]="showLabel() ? button().label : null"
+ *     />
+ *   `
+ * })
+ * export class PrimeActionButtonComponent {
+ *   private readonly displayService = inject(ButtonDisplayService);
+ *   readonly button = input.required<ActionButton>();
+ *
+ *   readonly showLabel = computed(() =>
+ *     this.displayService.shouldShowLabel(this.button())
+ *   );
+ * }
+ * ```
+ */
+/**
+ * Service that provides display logic for action buttons.
+ *
+ * This service is designed to be provided at the component level to maintain
+ * consistency with other button services, though it contains only pure functions.
+ *
+ * @usageNotes
+ * ### Pure Functions
+ * All methods in this service are pure functions that take a button configuration
+ * and return display values. They can be safely used in Angular's `computed()`.
+ *
+ * ### Dropdown Icon
+ * Dropdown buttons show a chevron icon unless `config.hideDropdownIcon` is true.
+ */
+class ButtonDisplayService {
     /**
-     * Clears all items from the store.
+     * Determines whether to show the label text.
+     *
+     * @param button - The button configuration
+     * @returns True when a label is provided
      */
-    clearAll() {
-        this._items.set([]);
-        this._error.set(null);
+    shouldShowLabel(button) {
+        return !!button.label;
     }
     /**
-     * Sets the loading state.
+     * Determines whether to show the dropdown chevron icon.
+     *
+     * @param button - The button configuration
+     * @returns True for dropdown buttons without hideDropdownIcon
      */
-    setLoading(loading) {
-        this._loading.set(loading);
+    shouldShowDropdownIcon(button) {
+        return button.type === ActionButtonType.Dropdown && !button.config?.hideDropdownIcon;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonDisplayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonDisplayService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonDisplayService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @file Button Handler Service
+ * @description Executes button handlers with automatic loading state management.
+ *
+ * This service encapsulates handler execution logic, providing automatic
+ * loading state management for async handlers across different UI implementations.
+ *
+ * @example
+ * ```typescript
+ * // Ionic implementation
+ * @Component({
+ *   providers: [ButtonStateService, ButtonHandlerService]
+ * })
+ * export class ButtonComponent {
+ *   private readonly stateService = inject(ButtonStateService);
+ *   private readonly handlerService = inject(ButtonHandlerService);
+ *
+ *   protected async onClick(): Promise<void> {
+ *     await this.handlerService.executeHandler(
+ *       this.button(),
+ *       loading => this.stateService.setLoading(loading)
+ *     );
+ *     this.buttonClick.emit(this.button());
+ *   }
+ * }
+ *
+ * // Generic web component example
+ * class ActionButtonElement extends HTMLElement {
+ *   private handlerService = new ButtonHandlerService();
+ *   private loading = false;
+ *
+ *   async handleClick() {
+ *     await this.handlerService.executeHandler(
+ *       this.buttonConfig,
+ *       loading => {
+ *         this.loading = loading;
+ *         this.render();
+ *       }
+ *     );
+ *   }
+ * }
+ * ```
+ */
+/**
+ * Service that executes button handlers with automatic loading state management.
+ *
+ * This service is designed to be provided at the component level to ensure
+ * proper isolation of handler execution context.
+ *
+ * @usageNotes
+ * ### Async Handler Support
+ * When a handler returns a Promise, the service automatically:
+ * 1. Calls `onLoadingChange(true)` before execution
+ * 2. Awaits the Promise
+ * 3. Calls `onLoadingChange(false)` after completion (success or failure)
+ *
+ * ### Sync Handler Support
+ * For synchronous handlers, no loading state changes are triggered.
+ *
+ * ### Error Handling
+ * The service uses try/finally to ensure loading state is always reset,
+ * even if the handler throws an error. The error is not caught, allowing
+ * it to propagate to the calling code.
+ */
+class ButtonHandlerService {
+    /**
+     * Executes a button's handler with automatic loading state management.
+     *
+     * @param button - The button whose handler to execute
+     * @param onLoadingChange - Callback invoked when loading state changes
+     * @returns Promise that resolves when handler completes
+     *
+     * @example
+     * ```typescript
+     * await handlerService.executeHandler(
+     *   myButton,
+     *   loading => this.isLoading.set(loading)
+     * );
+     * ```
+     */
+    async executeHandler(button, onLoadingChange) {
+        const result = button.handler();
+        if (result instanceof Promise) {
+            onLoadingChange(true);
+            try {
+                await result;
+            }
+            finally {
+                onLoadingChange(false);
+            }
+        }
     }
     /**
-     * Sets an error message.
+     * Executes a child button's handler with loading state tracking by ID.
+     *
+     * This method is designed for dropdown children where multiple buttons
+     * might be loading simultaneously and need individual tracking.
+     *
+     * @param child - The child button whose handler to execute
+     * @param onChildLoadingChange - Callback with child ID and loading state
+     * @returns Promise that resolves when handler completes
+     *
+     * @example
+     * ```typescript
+     * await handlerService.executeChildHandler(
+     *   selectedChild,
+     *   (childId, loading) => {
+     *     if (loading) {
+     *       this.stateService.addLoadingChild(childId);
+     *     } else {
+     *       this.stateService.removeLoadingChild(childId);
+     *     }
+     *   }
+     * );
+     * ```
      */
-    setError(error) {
-        this._error.set(error);
+    async executeChildHandler(child, onChildLoadingChange) {
+        onChildLoadingChange(child.id, true);
+        try {
+            const result = child.handler();
+            if (result instanceof Promise) {
+                await result;
+            }
+        }
+        finally {
+            onChildLoadingChange(child.id, false);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TestService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonHandlerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TestService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonHandlerService, decorators: [{
+            type: Injectable
         }] });
 
 /**
- * TestCardComponent - Standalone Ionic Card component demonstrating
- * Angular 21 best practices: OnPush, Signal inputs/outputs/queries.
+ * @file Button State Service
+ * @description Manages loading states and computed state values for action buttons.
+ *
+ * This service encapsulates all state management logic for buttons, making it
+ * reusable across different UI library implementations (Ionic, Material, PrimeNG, etc.).
  *
  * @example
- * ```html
- * <maki-test-card
- *   [item]="myItem"
- *   [showActions]="true"
- *   (itemClick)="onItemClick($event)"
- *   (deleteClick)="onDelete($event)"
- * />
+ * ```typescript
+ * // Ionic implementation (ButtonComponent)
+ * @Component({
+ *   providers: [ButtonStateService]
+ * })
+ * export class ButtonComponent {
+ *   private readonly stateService = inject(ButtonStateService);
+ *   readonly button = input.required<ActionButton>();
+ *
+ *   readonly isLoading = computed(() =>
+ *     this.stateService.isLoading(this.button())
+ *   );
+ * }
+ *
+ * // Material implementation example
+ * @Component({
+ *   selector: 'mat-action-button',
+ *   providers: [ButtonStateService],
+ *   template: `
+ *     <button mat-button [disabled]="isDisabled()">
+ *       @if (showLoadingSpinner()) {
+ *         <mat-spinner diameter="16" />
+ *       }
+ *       {{ button().label }}
+ *     </button>
+ *   `
+ * })
+ * export class MatActionButtonComponent {
+ *   private readonly stateService = inject(ButtonStateService);
+ *   readonly button = input.required<ActionButton>();
+ *
+ *   readonly isDisabled = computed(() =>
+ *     this.stateService.isDisabled(this.button())
+ *   );
+ *   readonly showLoadingSpinner = computed(() =>
+ *     this.stateService.showLoadingSpinner(this.button())
+ *   );
+ * }
  * ```
  */
-class TestCardComponent {
-    // Signal inputs
-    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
-    showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
-    // Signal outputs
-    itemClick = output();
-    editClick = output();
-    deleteClick = output();
-    // Signal queries
-    cardElement = viewChild('cardElement', ...(ngDevMode ? [{ debugName: "cardElement" }] : []));
-    // Computed signals
-    formattedDate = computed(() => {
-        const date = this.item().createdAt;
-        if (!date)
-            return '';
-        const dateObj = date instanceof Date ? date : new Date(date);
-        return dateObj.toLocaleDateString(undefined, {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric'
-        });
-    }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : []));
-    constructor() {
-        addIcons({ createOutline, trashOutline });
+/**
+ * Service that manages button loading states and computes derived state values.
+ *
+ * This service is designed to be provided at the component level (not root)
+ * to ensure each button instance has isolated state management.
+ *
+ * @usageNotes
+ * ### Providing the Service
+ * Always provide this service at the component level to isolate state:
+ * ```typescript
+ * @Component({
+ *   providers: [ButtonStateService]
+ * })
+ * ```
+ *
+ * ### State Management
+ * The service manages two types of loading state:
+ * 1. **Internal loading** - Set when executing async handlers via `setLoading()`
+ * 2. **Child loading** - Tracks which dropdown children are loading via `setChildLoading()`
+ *
+ * ### Computed States
+ * All computed methods are pure functions that can be used in Angular's `computed()`:
+ * - `isLoading(button)` - Combined loading state
+ * - `isDisabled(button)` - Whether button should be disabled
+ * - `showLoadingSpinner(button)` - Whether to show spinner
+ * - `hasLoadingChild(button)` - Whether any child is loading
+ */
+class ButtonStateService {
+    /**
+     * Internal loading state for async handler execution.
+     */
+    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
+    /**
+     * Set of child button IDs that are currently loading (for dropdowns).
+     */
+    _loadingChildIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "_loadingChildIds" }] : []));
+    /**
+     * Read-only access to internal loading state.
+     */
+    internalLoading = this._isLoading.asReadonly();
+    /**
+     * Read-only access to loading child IDs.
+     */
+    loadingChildIds = this._loadingChildIds.asReadonly();
+    /**
+     * Sets the internal loading state.
+     *
+     * @param loading - Whether the button is loading
+     */
+    setLoading(loading) {
+        this._isLoading.set(loading);
     }
-    onCardClick() {
-        this.itemClick.emit(this.item());
+    /**
+     * Adds a child ID to the loading set.
+     *
+     * @param childId - The ID of the child button that started loading
+     */
+    addLoadingChild(childId) {
+        this._loadingChildIds.update(ids => new Set([...ids, childId]));
     }
-    onEditClick(event) {
-        event.stopPropagation();
-        this.editClick.emit(this.item());
+    /**
+     * Removes a child ID from the loading set.
+     *
+     * @param childId - The ID of the child button that finished loading
+     */
+    removeLoadingChild(childId) {
+        this._loadingChildIds.update(ids => {
+            const newIds = new Set(ids);
+            newIds.delete(childId);
+            return newIds;
+        });
     }
-    onDeleteClick(event) {
-        event.stopPropagation();
-        this.deleteClick.emit(this.item());
+    /**
+     * Checks if any child button is in a loading state with spinner enabled.
+     *
+     * @param button - The parent button configuration
+     * @returns True if any child is loading and should show spinner
+     */
+    hasLoadingChild(button) {
+        if (button.type !== ActionButtonType.Dropdown || !button.children) {
+            return false;
+        }
+        const loadingChildIds = this._loadingChildIds();
+        return button.children.some(child => {
+            const showSpinner = child.showLoadingSpinner ?? true;
+            const isLoadingFromProp = child.loading && showSpinner;
+            const isLoadingFromExecution = loadingChildIds.has(child.id) && showSpinner;
+            return isLoadingFromProp || isLoadingFromExecution;
+        });
     }
     /**
-     * Public method to focus the card element programmatically.
+     * Computes the combined loading state for a button.
+     *
+     * @param button - The button configuration
+     * @returns True if the button is in any loading state
      */
-    focus() {
-        this.cardElement()?.nativeElement?.focus();
+    isLoading(button) {
+        const parentLoading = this._isLoading() || (button.loading ?? false);
+        const childLoading = this.hasLoadingChild(button) && (button.showLoadingSpinner ?? true);
+        return parentLoading || childLoading;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TestCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TestCardComponent, isStandalone: true, selector: "maki-test-card", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", editClick: "editClick", deleteClick: "deleteClick" }, viewQueries: [{ propertyName: "cardElement", first: true, predicate: ["cardElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ion-card #cardElement [class.inactive]="!item().isActive" (click)="onCardClick()">
-      <ion-card-header>
-        <ion-card-title>{{ item().title }}</ion-card-title>
-        @if (formattedDate()) {
-          <ion-card-subtitle>
-            {{ formattedDate() }}
-            @if (!item().isActive) {
-              <span class="status-badge inactive">Inactive</span>
-            }
-          </ion-card-subtitle>
+    /**
+     * Determines whether to display the loading spinner.
+     *
+     * @param button - The button configuration
+     * @returns True if spinner should be shown
+     */
+    showLoadingSpinner(button) {
+        return this.isLoading(button) && (button.showLoadingSpinner ?? true);
+    }
+    /**
+     * Computes whether the button should be disabled.
+     *
+     * For dropdown buttons: Only disabled if config says so or if parent itself is loading
+     * (not disabled by inherited child loading - user can still open dropdown).
+     *
+     * For non-dropdown buttons: Disabled when loading or explicitly disabled in config.
+     *
+     * @param button - The button configuration
+     * @returns True if the button should be disabled
+     */
+    isDisabled(button) {
+        const configDisabled = button.config?.disabled ?? false;
+        if (button.type === ActionButtonType.Dropdown) {
+            const parentSelfLoading = this._isLoading() || (button.loading ?? false);
+            return configDisabled || parentSelfLoading;
         }
-      </ion-card-header>
-
-      @if (item().description) {
-        <ion-card-content>
-          <p>{{ item().description }}</p>
-        </ion-card-content>
-      }
-
-      @if (showActions()) {
-        <ion-card-content class="card-actions">
-          <ion-button fill="outline" size="small" (click)="onEditClick($event)">
-            <ion-icon slot="start" name="create-outline"></ion-icon>
-            Edit
-          </ion-button>
-          <ion-button fill="outline" size="small" color="danger" (click)="onDeleteClick($event)">
-            <ion-icon slot="start" name="trash-outline"></ion-icon>
-            Delete
-          </ion-button>
-        </ion-card-content>
-      }
-    </ion-card>
-  `, isInline: true, styles: [":host{display:block}ion-card{--background: var(--maki-card-background, var(--ion-card-background, #fff));--color: var(--maki-card-color, var(--ion-text-color));margin:var(--maki-card-margin, 16px);border-radius:var(--maki-card-border-radius, 12px);transition:opacity .2s ease,transform .2s ease;cursor:pointer}ion-card:hover{transform:translateY(-2px)}ion-card.inactive{opacity:.6}ion-card-title{color:var(--maki-primary, var(--ion-color-primary));font-weight:600}ion-card-subtitle{display:flex;align-items:center;gap:8px}.status-badge{font-size:.75rem;padding:2px 8px;border-radius:4px;font-weight:500}.status-badge.inactive{background-color:var(--ion-color-medium-tint);color:var(--ion-color-medium-contrast)}.card-actions{display:flex;gap:8px;padding-top:0}.card-actions ion-button{--border-color: var(--maki-primary, var(--ion-color-primary));--color: var(--maki-primary, var(--ion-color-primary))}\n"], dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        return this.isLoading(button) || configDisabled;
+    }
+    /**
+     * Checks if a specific button is currently loading.
+     * Used primarily for checking child button loading state.
+     *
+     * @param button - The button to check
+     * @returns True if the button is loading
+     */
+    isButtonLoading(button) {
+        const loadingChildIds = this._loadingChildIds();
+        return (button.loading ?? false) || loadingChildIds.has(button.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonStateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TestCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'maki-test-card', standalone: true, imports: [
-                        IonCard,
-                        IonCardHeader,
-                        IonCardTitle,
-                        IonCardSubtitle,
-                        IonCardContent,
-                        IonButton,
-                        IonIcon
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <ion-card #cardElement [class.inactive]="!item().isActive" (click)="onCardClick()">
-      <ion-card-header>
-        <ion-card-title>{{ item().title }}</ion-card-title>
-        @if (formattedDate()) {
-          <ion-card-subtitle>
-            {{ formattedDate() }}
-            @if (!item().isActive) {
-              <span class="status-badge inactive">Inactive</span>
-            }
-          </ion-card-subtitle>
-        }
-      </ion-card-header>
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonStateService, decorators: [{
+            type: Injectable
+        }] });
 
-      @if (item().description) {
-        <ion-card-content>
-          <p>{{ item().description }}</p>
-        </ion-card-content>
-      }
+/**
+ * @file Button Services Barrel Export
+ * @description Exports all button-related services for use across different UI implementations.
+ */
 
-      @if (showActions()) {
-        <ion-card-content class="card-actions">
-          <ion-button fill="outline" size="small" (click)="onEditClick($event)">
-            <ion-icon slot="start" name="create-outline"></ion-icon>
-            Edit
-          </ion-button>
-          <ion-button fill="outline" size="small" color="danger" (click)="onDeleteClick($event)">
-            <ion-icon slot="start" name="trash-outline"></ion-icon>
-            Delete
-          </ion-button>
-        </ion-card-content>
-      }
-    </ion-card>
-  `, styles: [":host{display:block}ion-card{--background: var(--maki-card-background, var(--ion-card-background, #fff));--color: var(--maki-card-color, var(--ion-text-color));margin:var(--maki-card-margin, 16px);border-radius:var(--maki-card-border-radius, 12px);transition:opacity .2s ease,transform .2s ease;cursor:pointer}ion-card:hover{transform:translateY(-2px)}ion-card.inactive{opacity:.6}ion-card-title{color:var(--maki-primary, var(--ion-color-primary));font-weight:600}ion-card-subtitle{display:flex;align-items:center;gap:8px}.status-badge{font-size:.75rem;padding:2px 8px;border-radius:4px;font-weight:500}.status-badge.inactive{background-color:var(--ion-color-medium-tint);color:var(--ion-color-medium-contrast)}.card-actions{display:flex;gap:8px;padding-top:0}.card-actions ion-button{--border-color: var(--maki-primary, var(--ion-color-primary));--color: var(--maki-primary, var(--ion-color-primary))}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], editClick: [{ type: i0.Output, args: ["editClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], cardElement: [{ type: i0.ViewChild, args: ['cardElement', { isSignal: true }] }] } });
+/**
+ * @file Services Barrel Export
+ * @description Exports all services from the ui-core library.
+ */
 
 /**
  * @file Action Button List Component
- * @description Component for rendering a list of action buttons inside a popover
+ * @description Ionic implementation levantando lista de action buttons en un popover.
+ *
+ * This component is the Ionic-specific implementation that uses the shared
+ * ActionButtonListService for all business logic. The component only handles:
+ * - Ionic template rendering (ion-list, ion-item, ion-icon, ion-spinner)
+ * - Ionic-specific popover dismissal via PopoverController
+ *
+ * All list logic, loading state checks, and button resolution is delegated
+ * to the injected service, making the logic reusable for other UI libraries.
  */
 /**
  * Component that renders a list of action buttons for use in popovers/dropdowns.
@@ -370,37 +710,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * - `buttonSelect`: Emits the selected `ActionButton` when clicked
  */
 class ActionButtonListComponent {
-    /**
-     * Reference to ActionButtonType.Dropdown for template comparison.
-     * @internal
-     */
-    dropdownType = ActionButtonType.Dropdown;
-    /**
-     * Popover controller for dismissing the popover when an item is selected.
-     */
+    /** Reference to ActionButtonType.Dropdown for template comparison. */
+    ActionButtonType = ActionButtonType;
+    /** Ionic PopoverController for dismissing the popover when an item is selected. */
     popoverCtrl = inject(PopoverController, { optional: true });
-    /**
-     * Internal signal to store buttons passed via componentProps.
-     * PopoverController.create() sets properties directly, bypassing signal inputs.
-     */
+    /** Service for list logic. */
+    listService = inject(ActionButtonListService);
+    /** Internal signal to store buttons passed via componentProps. */
     _buttonsFromProps = signal([], ...(ngDevMode ? [{ debugName: "_buttonsFromProps" }] : []));
-    /**
-     * Internal signal to store the Set of currently loading child button IDs.
-     */
+    /** Internal signal to store the Set of currently loading child button IDs. */
     _loadingChildIdsFromProps = signal(null, ...(ngDevMode ? [{ debugName: "_loadingChildIdsFromProps" }] : []));
-    /**
-     * The list of action buttons to display (when used via template binding).
-     */
+    /** The list of action buttons to display (when used via template binding). */
     buttons = input([], ...(ngDevMode ? [{ debugName: "buttons" }] : []));
-    /**
-     * Computed button list that works with both signal input and componentProps.
-     * PopoverController passes buttons as a direct property, not through Angular's input system.
-     */
-    buttonList = () => {
-        const fromProps = this._buttonsFromProps();
-        const fromInput = this.buttons();
-        return fromProps.length > 0 ? fromProps : fromInput;
-    };
+    /** Emits when a button is selected from the list. */
+    buttonSelect = output();
+    /** Computed button list that works with both signal input and componentProps. */
+    buttonList = computed(() => this.listService.resolveButtonList(this._buttonsFromProps(), this.buttons()), ...(ngDevMode ? [{ debugName: "buttonList" }] : []));
     /**
      * Setter to capture buttons passed via PopoverController.create({ componentProps }).
      * This is called when Ionic sets the property directly on the component instance.
@@ -414,21 +739,15 @@ class ActionButtonListComponent {
     set loadingChildIds(value) {
         this._loadingChildIdsFromProps.set(value);
     }
-    /**
-     * Checks if a specific button is currently loading.
-     */
-    isButtonLoading(button) {
-        const loadingChildIdsSignal = this._loadingChildIdsFromProps();
-        const loadingChildIds = loadingChildIdsSignal ? loadingChildIdsSignal() : new Set();
-        return button.loading || loadingChildIds.has(button.id);
+    /** Checks if a button can be selected. */
+    canSelectButton(button) {
+        const loadingChildIds = this._loadingChildIdsFromProps()?.() ?? new Set();
+        return this.listService.canSelectButton(button, loadingChildIds);
     }
-    /**
-     * Emits when a button is selected from the list.
-     */
-    buttonSelect = output();
-    constructor() {
-        // Register any icons that might be used
-        addIcons({});
+    /** Checks if a button should show its loading spinner. */
+    shouldShowSpinner(button) {
+        const loadingChildIds = this._loadingChildIdsFromProps()?.() ?? new Set();
+        return this.listService.shouldShowSpinner(button, loadingChildIds);
     }
     /**
      * Handles click on a button item.
@@ -437,23 +756,24 @@ class ActionButtonListComponent {
      * @param button - The clicked action button
      */
     onButtonClick(button) {
-        if (this.isButtonLoading(button) || button.config?.disabled) {
+        const loadingChildIds = this._loadingChildIdsFromProps()?.() ?? new Set();
+        if (!this.listService.canSelectButton(button, loadingChildIds)) {
             return;
         }
         this.buttonSelect.emit(button);
         this.popoverCtrl?.dismiss(button, 'select');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionButtonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ActionButtonListComponent, isStandalone: true, selector: "maki-action-button-list", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonSelect: "buttonSelect" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ActionButtonListComponent, isStandalone: true, selector: "maki-action-button-list", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonSelect: "buttonSelect" }, providers: [ActionButtonListService], ngImport: i0, template: `
     <ion-list lines="none">
       @for (button of buttonList(); track button.id) {
         <ion-item
           [button]="true"
-          [disabled]="isButtonLoading(button) || button.config?.disabled"
-          [detail]="button.type === dropdownType"
+          [disabled]="!canSelectButton(button)"
+          [detail]="button.type === ActionButtonType.Dropdown"
           (click)="onButtonClick(button)"
         >
-          @if (isButtonLoading(button) && (button.showLoadingSpinner ?? true)) {
+          @if (shouldShowSpinner(button)) {
             <ion-spinner slot="start" name="crescent" />
           } @else if (button.icon) {
             <ion-icon slot="start" [color]="button.config?.color" [name]="button.icon" />
@@ -472,16 +792,16 @@ class ActionButtonListComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionButtonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'maki-action-button-list', standalone: true, imports: [IonList, IonItem, IonIcon, IonLabel, IonSpinner], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'maki-action-button-list', standalone: true, imports: [IonList, IonItem, IonIcon, IonLabel, IonSpinner], providers: [ActionButtonListService], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ion-list lines="none">
       @for (button of buttonList(); track button.id) {
         <ion-item
           [button]="true"
-          [disabled]="isButtonLoading(button) || button.config?.disabled"
-          [detail]="button.type === dropdownType"
+          [disabled]="!canSelectButton(button)"
+          [detail]="button.type === ActionButtonType.Dropdown"
           (click)="onButtonClick(button)"
         >
-          @if (isButtonLoading(button) && (button.showLoadingSpinner ?? true)) {
+          @if (shouldShowSpinner(button)) {
             <ion-spinner slot="start" name="crescent" />
           } @else if (button.icon) {
             <ion-icon slot="start" [color]="button.config?.color" [name]="button.icon" />
@@ -497,18 +817,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
       }
     </ion-list>
   `, styles: [":host{display:block}::ng-deep ion-popover::part(content){width:fit-content}ion-list{padding:0}ion-item{--padding-start: var(--maki-action-button-list-padding, 16px);--padding-end: var(--maki-action-button-list-padding, 16px);--min-height: var(--maki-action-button-list-item-height, 44px);cursor:pointer;width:100%}ion-item[disabled]{cursor:not-allowed}ion-label{white-space:nowrap}ion-icon{font-size:var(--maki-action-button-list-icon-size, 20px);margin-inline-end:var(--maki-action-button-list-icon-gap, 12px)}ion-spinner{width:var(--maki-action-button-list-icon-size, 20px);height:var(--maki-action-button-list-icon-size, 20px);margin-inline-end:var(--maki-action-button-list-icon-gap, 12px)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], buttonSelect: [{ type: i0.Output, args: ["buttonSelect"] }] } });
+        }], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], buttonSelect: [{ type: i0.Output, args: ["buttonSelect"] }] } });
 
 /**
  * @file Button Component
- * @description Configurable button component that renders ion-button based on ActionButton configuration
+ * @description Ionic implementation of a configurable button component.
+ *
+ * This component is the Ionic-specific implementation that uses the shared
+ * button services for all business logic. The component only handles:
+ * - Ionic template rendering (ion-button, ion-icon, ion-spinner)
+ * - Ionic-specific popover creation via PopoverController
+ *
+ * All state management, display logic, and handler execution is delegated
+ * to the injected services, making the logic reusable for other UI libraries.
  */
 /**
  * A configurable button component that renders an `ion-button` based on
  * an `ActionButton` configuration object.
  *
  * Features:
- * - Three display types: Default (label + icon), IconOnly, and Dropdown
+ * - Two button types: Default and Dropdown
+ * - Flexible display: icon-only, label-only, or icon+label (determined by properties)
  * - Automatic loading state management for async handlers
  * - Dropdown support via PopoverController with child actions
  * - Full Ionic button styling configuration (fill, size, color, shape, expand)
@@ -516,12 +845,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  *
  * @example
  * ```html
- * <!-- Simple button -->
+ * <!-- Button with label and icon -->
  * <maki-button [button]="saveButton" />
  *
- * <!-- Icon-only button -->
+ * <!-- Icon-only button (no label) -->
  * <maki-button [button]="iconButton" />
  *
+ * <!-- Label-only button (no icon) -->
+ * <maki-button [button]="textButton" />
+ *
  * <!-- Dropdown button -->
  * <maki-button [button]="menuButton" />
  * ```
@@ -532,7 +864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * saveButton: ActionButton = {
  *   id: 'save',
  *   label: 'Save',
- *   icon: 'saveOutline',
+ *   icon: 'save-outline',
  *   type: ActionButtonType.Default,
  *   config: { fill: 'solid', color: 'primary' },
  *   handler: async () => {
@@ -546,8 +878,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  *   type: ActionButtonType.Dropdown,
  *   handler: () => {},
  *   children: [
- *     { id: 'edit', label: 'Edit', icon: 'createOutline', type: ActionButtonType.Default, handler: () => this.edit() },
- *     { id: 'delete', label: 'Delete', icon: 'trashOutline', type: ActionButtonType.Default, handler: () => this.delete() }
+ *     { id: 'edit', label: 'Edit', icon: 'create-outline', type: ActionButtonType.Default, handler: () => this.edit() },
+ *     { id: 'delete', label: 'Delete', icon: 'trash-outline', type: ActionButtonType.Default, handler: () => this.delete() }
  *   ]
  * };
  * ```
@@ -571,110 +903,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * When a child is selected, its handler is executed and `childSelect` is emitted.
  */
 class ButtonComponent {
-    /**
-     * Popover controller for creating dropdown popovers.
-     */
+    /** Ionic PopoverController for dropdown popovers. */
     popoverCtrl = inject(PopoverController);
-    /**
-     * Internal loading state for async handler execution.
-     */
-    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
-    /**
-     * Set of child button IDs that are currently loading (for dropdowns).
-     * Tracks multiple concurrent loading operations.
-     */
-    _loadingChildIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "_loadingChildIds" }] : []));
-    /**
-     * The action button configuration.
-     */
+    /** Service for button state management. */
+    stateService = inject(ButtonStateService);
+    /** Service for button display logic. */
+    displayService = inject(ButtonDisplayService);
+    /** Service for handler execution. */
+    handlerService = inject(ButtonHandlerService);
+    /** The action button configuration. */
     button = input.required(...(ngDevMode ? [{ debugName: "button" }] : []));
-    /**
-     * Emits when the button is clicked (for non-dropdown buttons).
-     * Emits the button configuration that was clicked.
-     */
+    /** Emits when the button is clicked (for non-dropdown buttons). */
     buttonClick = output();
-    /**
-     * Emits when a child button is selected from a dropdown.
-     * Only emits for `ActionButtonType.Dropdown` buttons.
-     */
+    /** Emits when a child button is selected from a dropdown. */
     childSelect = output();
-    /**
-     * Checks if any child button is in a loading state and has showLoadingSpinner enabled.
-     */
-    hasLoadingChild = computed(() => {
-        const btn = this.button();
-        if (btn.type !== ActionButtonType.Dropdown || !btn.children) {
-            return false;
-        }
-        const loadingChildIds = this._loadingChildIds();
-        return btn.children.some(child => {
-            const isLoadingFromProp = child.loading && (child.showLoadingSpinner ?? true);
-            const isLoadingFromExecution = loadingChildIds.has(child.id) && (child.showLoadingSpinner ?? true);
-            return isLoadingFromProp || isLoadingFromExecution;
-        });
-    }, ...(ngDevMode ? [{ debugName: "hasLoadingChild" }] : []));
-    /**
-     * Combined loading state from external prop, internal async state, and child loading.
-     * Returns true if:
-     * - Internal loading state is active, OR
-     * - External loading prop is true, OR
-     * - Any child is loading AND parent has showLoadingSpinner !== false
-     */
-    isLoading = computed(() => {
-        const btn = this.button();
-        const parentLoading = this._isLoading() || (btn.loading ?? false);
-        const childLoading = this.hasLoadingChild() && (btn.showLoadingSpinner ?? true);
-        return parentLoading || childLoading;
-    }, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    /**
-     * Whether to display the loading spinner.
-     * Shows spinner only if button is loading AND showLoadingSpinner is not false.
-     */
-    showLoadingSpinner = computed(() => {
-        return this.isLoading() && (this.button().showLoadingSpinner ?? true);
-    }, ...(ngDevMode ? [{ debugName: "showLoadingSpinner" }] : []));
-    /**
-     * Whether the button is disabled.
-     * - Non-dropdown buttons: Disabled when loading or explicitly disabled in config
-     * - Dropdown buttons: Only disabled when explicitly disabled in config or when parent itself is loading
-     *   (not disabled by inherited child loading - user can still open dropdown to see loading children)
-     */
-    isDisabled = computed(() => {
-        const btn = this.button();
-        const configDisabled = btn.config?.disabled ?? false;
-        // For dropdown buttons, only disable if config says so or if parent itself is loading
-        // Don't disable for inherited child loading (user should be able to open dropdown)
-        if (btn.type === ActionButtonType.Dropdown) {
-            const parentSelfLoading = this._isLoading() || (btn.loading ?? false);
-            return configDisabled || parentSelfLoading;
-        }
-        // For non-dropdown buttons, disable when loading
-        return this.isLoading() || configDisabled;
-    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    /**
-     * Determines the slot for the icon based on button type and label presence.
-     */
-    iconSlot = computed(() => {
-        const btn = this.button();
-        if (btn.type === ActionButtonType.IconOnly) {
-            return 'icon-only';
-        }
-        return btn.label ? 'start' : 'icon-only';
-    }, ...(ngDevMode ? [{ debugName: "iconSlot" }] : []));
-    /**
-     * Whether to show the label text.
-     */
-    showLabel = computed(() => {
-        const btn = this.button();
-        return btn.type !== ActionButtonType.IconOnly && btn.label;
-    }, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
-    /**
-     * Whether to show the dropdown chevron icon.
-     */
-    showDropdownIcon = computed(() => {
-        const btn = this.button();
-        return btn.type === ActionButtonType.Dropdown && !btn.config?.hideDropdownIcon;
-    }, ...(ngDevMode ? [{ debugName: "showDropdownIcon" }] : []));
+    /** Whether the button is in a loading state. */
+    isLoading = computed(() => this.stateService.isLoading(this.button()), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /** Whether to display the loading spinner. */
+    showLoadingSpinner = computed(() => this.stateService.showLoadingSpinner(this.button()), ...(ngDevMode ? [{ debugName: "showLoadingSpinner" }] : []));
+    /** Whether the button is disabled. */
+    isDisabled = computed(() => this.stateService.isDisabled(this.button()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** The slot for the icon based on label presence (Ionic-specific). */
+    iconSlot = computed(() => (this.button().label ? 'start' : 'icon-only'), ...(ngDevMode ? [{ debugName: "iconSlot" }] : []));
+    /** Whether to show the label text. */
+    showLabel = computed(() => this.displayService.shouldShowLabel(this.button()), ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    /** Whether to show the dropdown chevron icon. */
+    showDropdownIcon = computed(() => this.displayService.shouldShowDropdownIcon(this.button()), ...(ngDevMode ? [{ debugName: "showDropdownIcon" }] : []));
     constructor() {
         addIcons({ chevronDownOutline });
     }
@@ -695,7 +949,7 @@ class ButtonComponent {
             await this.openDropdown(event);
         }
         else {
-            await this.executeHandler(btn);
+            await this.handlerService.executeHandler(btn, loading => this.stateService.setLoading(loading));
             this.buttonClick.emit(btn);
         }
     }
@@ -715,7 +969,7 @@ class ButtonComponent {
             component: ActionButtonListComponent,
             componentProps: {
                 buttonsFromPopover: children,
-                loadingChildIds: this._loadingChildIds
+                loadingChildIds: this.stateService.loadingChildIds
             },
             event,
             translucent: true,
@@ -727,44 +981,19 @@ class ButtonComponent {
         await popover.present();
         const { data, role } = await popover.onDidDismiss();
         if (role === 'select' && data) {
-            // Add child to loading set and execute its handler
-            this._loadingChildIds.update(ids => new Set([...ids, data.id]));
-            try {
-                const result = data.handler();
-                if (result instanceof Promise) {
-                    await result;
+            await this.handlerService.executeChildHandler(data, (childId, loading) => {
+                if (loading) {
+                    this.stateService.addLoadingChild(childId);
                 }
-            }
-            finally {
-                // Remove child from loading set
-                this._loadingChildIds.update(ids => {
-                    const newIds = new Set(ids);
-                    newIds.delete(data.id);
-                    return newIds;
-                });
-            }
+                else {
+                    this.stateService.removeLoadingChild(childId);
+                }
+            });
             this.childSelect.emit(data);
         }
     }
-    /**
-     * Executes a button's handler with automatic loading state management.
-     *
-     * @param btn - The button whose handler to execute
-     */
-    async executeHandler(btn) {
-        const result = btn.handler();
-        if (result instanceof Promise) {
-            this._isLoading.set(true);
-            try {
-                await result;
-            }
-            finally {
-                this._isLoading.set(false);
-            }
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ButtonComponent, isStandalone: true, selector: "maki-button", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonClick: "buttonClick", childSelect: "childSelect" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ButtonComponent, isStandalone: true, selector: "maki-button", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { buttonClick: "buttonClick", childSelect: "childSelect" }, providers: [ButtonStateService, ButtonDisplayService, ButtonHandlerService], ngImport: i0, template: `
     <ion-button
       [fill]="button().config?.fill"
       [size]="button().config?.size"
@@ -789,11 +1018,11 @@ class ButtonComponent {
         <ion-icon name="chevron-down-outline" slot="end" class="dropdown-icon" />
       }
     </ion-button>
-  `, isInline: true, styles: [":host{display:inline-block}ion-button{--padding-start: var(--maki-button-padding-start);--padding-end: var(--maki-button-padding-end);text-transform:none}ion-button.button-has-icon-only::part(native){padding:0}ion-spinner{width:var(--maki-button-spinner-size, 16px);height:var(--maki-button-spinner-size, 16px);margin:0 4px 0 0}.button-icon{font-size:var(--maki-button-icon-size, 16px);margin:0 4px 0 0}.button-icon[slot=icon-only]{margin:0}.dropdown-icon{font-size:var(--maki-button-dropdown-icon-size, 16px);margin-inline-start:var(--maki-button-dropdown-icon-gap, 4px)}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["ion-button{--padding-start: var(--maki-button-padding-start);--padding-end: var(--maki-button-padding-end);text-transform:none}ion-button.button-has-icon-only::part(native){padding:0}ion-spinner{width:var(--maki-button-spinner-size, 16px);height:var(--maki-button-spinner-size, 16px);margin:0 4px 0 0}.button-icon{font-size:var(--maki-button-icon-size, 16px);margin:0 4px 0 0}.button-icon[slot=icon-only]{margin:0}.dropdown-icon{font-size:var(--maki-button-dropdown-icon-size, 16px);margin-inline-start:var(--maki-button-dropdown-icon-gap, 4px)}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'maki-button', standalone: true, imports: [IonButton, IonIcon, IonSpinner], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'maki-button', standalone: true, imports: [IonButton, IonIcon, IonSpinner], providers: [ButtonStateService, ButtonDisplayService, ButtonHandlerService], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ion-button
       [fill]="button().config?.fill"
       [size]="button().config?.size"
@@ -818,17 +1047,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         <ion-icon name="chevron-down-outline" slot="end" class="dropdown-icon" />
       }
     </ion-button>
-  `, styles: [":host{display:inline-block}ion-button{--padding-start: var(--maki-button-padding-start);--padding-end: var(--maki-button-padding-end);text-transform:none}ion-button.button-has-icon-only::part(native){padding:0}ion-spinner{width:var(--maki-button-spinner-size, 16px);height:var(--maki-button-spinner-size, 16px);margin:0 4px 0 0}.button-icon{font-size:var(--maki-button-icon-size, 16px);margin:0 4px 0 0}.button-icon[slot=icon-only]{margin:0}.dropdown-icon{font-size:var(--maki-button-dropdown-icon-size, 16px);margin-inline-start:var(--maki-button-dropdown-icon-gap, 4px)}\n"] }]
+  `, styles: ["ion-button{--padding-start: var(--maki-button-padding-start);--padding-end: var(--maki-button-padding-end);text-transform:none}ion-button.button-has-icon-only::part(native){padding:0}ion-spinner{width:var(--maki-button-spinner-size, 16px);height:var(--maki-button-spinner-size, 16px);margin:0 4px 0 0}.button-icon{font-size:var(--maki-button-icon-size, 16px);margin:0 4px 0 0}.button-icon[slot=icon-only]{margin:0}.dropdown-icon{font-size:var(--maki-button-dropdown-icon-size, 16px);margin-inline-start:var(--maki-button-dropdown-icon-gap, 4px)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { button: [{ type: i0.Input, args: [{ isSignal: true, alias: "button", required: true }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], childSelect: [{ type: i0.Output, args: ["childSelect"] }] } });
 
 /*
  * Public API Surface of @makigamestudio/ui-core
  */
-// Models
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ActionButtonListComponent, ActionButtonType, ButtonComponent, TestCardComponent, TestClass, TestService };
+export { ActionButtonListComponent, ActionButtonListService, ActionButtonType, ButtonComponent, ButtonDisplayService, ButtonHandlerService, ButtonStateService };
 //# sourceMappingURL=makigamestudio-ui-core.mjs.map