@makigamestudio/ui-core 0.1.7 → 0.3.0

package/fesm2022/makigamestudio-ui-core.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, input, output, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
-import { IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonButton, IonIcon } from '@ionic/angular/standalone';
+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 { addIcons } from 'ionicons';
-import { trashOutline, createOutline } from 'ionicons/icons';
+import { trashOutline, createOutline, chevronDownOutline } from 'ionicons/icons';
 
 /**
  * TestClass - Example class implementing TestInterface.
@@ -32,7 +32,7 @@ class TestClass {
             title,
             description,
             createdAt: new Date(),
-            isActive: true,
+            isActive: true
         });
     }
     /**
@@ -41,7 +41,7 @@ class TestClass {
     update(changes) {
         return new TestClass({
             ...this,
-            ...changes,
+            ...changes
         });
     }
     /**
@@ -60,11 +60,44 @@ class TestClass {
             description: this.description,
             createdAt: this.createdAt,
             isActive: this.isActive,
-            metadata: this.metadata,
+            metadata: this.metadata
         };
     }
 }
 
+/**
+ * @file Action button type enumeration
+ * @description Defines the display types for action buttons
+ */
+/**
+ * Enumeration of action button display types.
+ *
+ * @example
+ * ```typescript
+ * const button: ActionButton = {
+ *   id: 'save-btn',
+ *   label: 'Save',
+ *   type: ActionButtonType.Default,
+ *   handler: () => console.log('Saved!')
+ * };
+ * ```
+ */
+var ActionButtonType;
+(function (ActionButtonType) {
+    /**
+     * Standard button with label and optional icon.
+     */
+    ActionButtonType["Default"] = "default";
+    /**
+     * Button displaying only an icon, no label.
+     */
+    ActionButtonType["IconOnly"] = "icon-only";
+    /**
+     * Button that opens a dropdown popover with child actions.
+     */
+    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.
@@ -84,7 +117,7 @@ class TestService {
     /** 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" }] : []));
+    activeItems = computed(() => this._items().filter(item => item.isActive), ...(ngDevMode ? [{ debugName: "activeItems" }] : []));
     /** Count of active items */
     activeCount = computed(() => this.activeItems().length, ...(ngDevMode ? [{ debugName: "activeCount" }] : []));
     /**
@@ -92,7 +125,7 @@ class TestService {
      */
     addItem(title, description) {
         const newItem = TestClass.create(title, description);
-        this._items.update((items) => [...items, newItem]);
+        this._items.update(items => [...items, newItem]);
         this._error.set(null);
         return newItem;
     }
@@ -101,7 +134,7 @@ class TestService {
      */
     removeItem(id) {
         const currentItems = this._items();
-        const filteredItems = currentItems.filter((item) => item.id !== id);
+        const filteredItems = currentItems.filter(item => item.id !== id);
         if (filteredItems.length === currentItems.length) {
             return false;
         }
@@ -113,7 +146,7 @@ class TestService {
      */
     updateItem(id, changes) {
         let updatedItem = null;
-        this._items.update((items) => items.map((item) => {
+        this._items.update(items => items.map(item => {
             if (item.id === id) {
                 updatedItem = item.update(changes);
                 return updatedItem;
@@ -132,7 +165,7 @@ class TestService {
      * Gets an item by ID using computed lookup.
      */
     getItemById(id) {
-        return this._items().find((item) => item.id === id);
+        return this._items().find(item => item.id === id);
     }
     /**
      * Clears all items from the store.
@@ -159,7 +192,7 @@ class TestService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TestService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root',
+                    providedIn: 'root'
                 }]
         }] });
 
@@ -196,7 +229,7 @@ class TestCardComponent {
         return dateObj.toLocaleDateString(undefined, {
             year: 'numeric',
             month: 'short',
-            day: 'numeric',
+            day: 'numeric'
         });
     }, ...(ngDevMode ? [{ debugName: "formattedDate" }] : []));
     constructor() {
@@ -221,11 +254,7 @@ class TestCardComponent {
     }
     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 #cardElement [class.inactive]="!item().isActive" (click)="onCardClick()">
       <ion-card-header>
         <ion-card-title>{{ item().title }}</ion-card-title>
         @if (formattedDate()) {
@@ -246,20 +275,11 @@ class TestCardComponent {
 
       @if (showActions()) {
         <ion-card-content class="card-actions">
-          <ion-button
-            fill="outline"
-            size="small"
-            (click)="onEditClick($event)"
-          >
+          <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-button fill="outline" size="small" color="danger" (click)="onDeleteClick($event)">
             <ion-icon slot="start" name="trash-outline"></ion-icon>
             Delete
           </ion-button>
@@ -277,13 +297,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         IonCardSubtitle,
                         IonCardContent,
                         IonButton,
-                        IonIcon,
+                        IonIcon
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <ion-card
-      #cardElement
-      [class.inactive]="!item().isActive"
-      (click)="onCardClick()"
-    >
+    <ion-card #cardElement [class.inactive]="!item().isActive" (click)="onCardClick()">
       <ion-card-header>
         <ion-card-title>{{ item().title }}</ion-card-title>
         @if (formattedDate()) {
@@ -304,20 +320,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 
       @if (showActions()) {
         <ion-card-content class="card-actions">
-          <ion-button
-            fill="outline"
-            size="small"
-            (click)="onEditClick($event)"
-          >
+          <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-button fill="outline" size="small" color="danger" (click)="onDeleteClick($event)">
             <ion-icon slot="start" name="trash-outline"></ion-icon>
             Delete
           </ion-button>
@@ -327,6 +334,491 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
   `, 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 Action Button List Component
+ * @description Component for rendering a list of action buttons inside a popover
+ */
+/**
+ * Component that renders a list of action buttons for use in popovers/dropdowns.
+ *
+ * This component is designed to be used as the content of an `ion-popover`
+ * created via `PopoverController`. When a button is selected, it dismisses
+ * the popover and returns the selected button.
+ *
+ * @example
+ * ```typescript
+ * // Used internally by maki-button for dropdowns
+ * // Can also be used standalone:
+ * const popover = await popoverCtrl.create({
+ *   component: ActionButtonListComponent,
+ *   componentProps: { buttons: myButtons },
+ *   event: clickEvent
+ * });
+ * await popover.present();
+ *
+ * const { data } = await popover.onDidDismiss();
+ * if (data) {
+ *   data.handler();
+ * }
+ * ```
+ *
+ * @usageNotes
+ * ### Inputs
+ * - `buttons` (required): Array of `ActionButton` objects to display
+ *
+ * ### Outputs
+ * - `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.
+     */
+    popoverCtrl = inject(PopoverController, { optional: true });
+    /**
+     * Internal signal to store buttons passed via componentProps.
+     * PopoverController.create() sets properties directly, bypassing signal inputs.
+     */
+    _buttonsFromProps = signal([], ...(ngDevMode ? [{ debugName: "_buttonsFromProps" }] : []));
+    /**
+     * 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).
+     */
+    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;
+    };
+    /**
+     * Setter to capture buttons passed via PopoverController.create({ componentProps }).
+     * This is called when Ionic sets the property directly on the component instance.
+     */
+    set buttonsFromPopover(value) {
+        this._buttonsFromProps.set(value);
+    }
+    /**
+     * Setter to capture loading child IDs signal passed via PopoverController.create({ componentProps }).
+     */
+    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);
+    }
+    /**
+     * Emits when a button is selected from the list.
+     */
+    buttonSelect = output();
+    constructor() {
+        // Register any icons that might be used
+        addIcons({});
+    }
+    /**
+     * Handles click on a button item.
+     * Emits the selected button and dismisses the popover.
+     *
+     * @param button - The clicked action button
+     */
+    onButtonClick(button) {
+        if (this.isButtonLoading(button) || button.config?.disabled) {
+            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: `
+    <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"
+          (click)="onButtonClick(button)"
+        >
+          @if (isButtonLoading(button) && (button.showLoadingSpinner ?? true)) {
+            <ion-spinner slot="start" name="crescent" />
+          } @else if (button.icon) {
+            <ion-icon slot="start" [name]="button.icon" />
+          }
+          @if (button.label) {
+            <ion-label>{{ button.label }}</ion-label>
+          }
+        </ion-item>
+      } @empty {
+        <ion-item>
+          <ion-label color="medium">No actions available</ion-label>
+        </ion-item>
+      }
+    </ion-list>
+  `, isInline: true, 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"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: ActionButtonListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'maki-action-button-list', standalone: true, imports: [IonList, IonItem, IonIcon, IonLabel, IonSpinner], 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"
+          (click)="onButtonClick(button)"
+        >
+          @if (isButtonLoading(button) && (button.showLoadingSpinner ?? true)) {
+            <ion-spinner slot="start" name="crescent" />
+          } @else if (button.icon) {
+            <ion-icon slot="start" [name]="button.icon" />
+          }
+          @if (button.label) {
+            <ion-label>{{ button.label }}</ion-label>
+          }
+        </ion-item>
+      } @empty {
+        <ion-item>
+          <ion-label color="medium">No actions available</ion-label>
+        </ion-item>
+      }
+    </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"] }] } });
+
+/**
+ * @file Button Component
+ * @description Configurable button component that renders ion-button based on ActionButton configuration
+ */
+/**
+ * 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
+ * - Automatic loading state management for async handlers
+ * - Dropdown support via PopoverController with child actions
+ * - Full Ionic button styling configuration (fill, size, color, shape, expand)
+ * - Automatic chevron icon for dropdown buttons
+ *
+ * @example
+ * ```html
+ * <!-- Simple button -->
+ * <maki-button [button]="saveButton" />
+ *
+ * <!-- Icon-only button -->
+ * <maki-button [button]="iconButton" />
+ *
+ * <!-- Dropdown button -->
+ * <maki-button [button]="menuButton" />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // In your component
+ * saveButton: ActionButton = {
+ *   id: 'save',
+ *   label: 'Save',
+ *   icon: 'saveOutline',
+ *   type: ActionButtonType.Default,
+ *   config: { fill: 'solid', color: 'primary' },
+ *   handler: async () => {
+ *     await this.saveData();
+ *   }
+ * };
+ *
+ * menuButton: ActionButton = {
+ *   id: 'menu',
+ *   label: 'Actions',
+ *   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() }
+ *   ]
+ * };
+ * ```
+ *
+ * @usageNotes
+ * ### Inputs
+ * - `button` (required): The `ActionButton` configuration object
+ *
+ * ### Outputs
+ * - `buttonClick`: Emits the button configuration when clicked (for non-dropdown buttons)
+ * - `childSelect`: Emits the selected child button (for dropdown buttons)
+ *
+ * ### Loading State
+ * The component automatically manages loading state for async handlers.
+ * When a handler returns a Promise, the button shows a spinner until it resolves/rejects.
+ * You can also manually control loading via the `button.loading` property.
+ *
+ * ### Dropdown Behavior
+ * For `ActionButtonType.Dropdown`, clicking the button opens an `ion-popover`
+ * containing an `ActionButtonListComponent` with the child buttons.
+ * When a child is selected, its handler is executed and `childSelect` is emitted.
+ */
+class ButtonComponent {
+    /**
+     * Popover controller for creating 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.
+     */
+    button = input.required(...(ngDevMode ? [{ debugName: "button" }] : []));
+    /**
+     * Emits when the button is clicked (for non-dropdown buttons).
+     * Emits the button configuration that was clicked.
+     */
+    buttonClick = output();
+    /**
+     * Emits when a child button is selected from a dropdown.
+     * Only emits for `ActionButtonType.Dropdown` buttons.
+     */
+    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" }] : []));
+    constructor() {
+        addIcons({ chevronDownOutline });
+    }
+    /**
+     * Handles button click events.
+     * For dropdown buttons, opens a popover with child actions.
+     * For other buttons, executes the handler with auto-loading management.
+     *
+     * @param event - The click event
+     */
+    async onClick(event) {
+        const btn = this.button();
+        if (this.isDisabled()) {
+            return;
+        }
+        if (btn.type === ActionButtonType.Dropdown) {
+            await this.openDropdown(event);
+        }
+        else {
+            await this.executeHandler(btn);
+            this.buttonClick.emit(btn);
+        }
+    }
+    /**
+     * Opens a dropdown popover with child action buttons.
+     *
+     * @param event - The triggering click event for popover positioning
+     */
+    async openDropdown(event) {
+        const btn = this.button();
+        const children = btn.children ?? [];
+        if (children.length === 0) {
+            return;
+        }
+        const popover = await this.popoverCtrl.create({
+            component: ActionButtonListComponent,
+            componentProps: {
+                buttonsFromPopover: children,
+                loadingChildIds: this._loadingChildIds,
+            },
+            event,
+            translucent: true,
+            dismissOnSelect: true,
+            side: 'bottom',
+            alignment: 'end',
+            arrow: false,
+        });
+        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;
+                }
+            }
+            finally {
+                // Remove child from loading set
+                this._loadingChildIds.update((ids) => {
+                    const newIds = new Set(ids);
+                    newIds.delete(data.id);
+                    return newIds;
+                });
+            }
+            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: `
+    <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>
+  `, isInline: true, styles: [":host{display:inline-block}ion-button{--padding-start: var(--maki-button-padding-start);--padding-end: var(--maki-button-padding-end)}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}.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: `
+    <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>
+  `, styles: [":host{display:inline-block}ion-button{--padding-start: var(--maki-button-padding-start);--padding-end: var(--maki-button-padding-end)}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}.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
  */
@@ -336,5 +828,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TestCardComponent, TestClass, TestService };
+export { ActionButtonListComponent, ActionButtonType, ButtonComponent, TestCardComponent, TestClass, TestService };
 //# sourceMappingURL=makigamestudio-ui-core.mjs.map