@makigamestudio/ui-core 0.1.7 → 0.2.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,411 @@ 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" }] : []));
+    /**
+     * 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);
+    }
+    /**
+     * 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 (button.loading || 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]="button.loading || button.config?.disabled"
+          [detail]="button.type === dropdownType"
+          (click)="onButtonClick(button)"
+        >
+          @if (button.loading) {
+            <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}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:fit-content}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]="button.loading || button.config?.disabled"
+          [detail]="button.type === dropdownType"
+          (click)="onButtonClick(button)"
+        >
+          @if (button.loading) {
+            <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}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:fit-content}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" }] : []));
+    /**
+     * 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();
+    /**
+     * Combined loading state from external prop and internal async state.
+     */
+    isLoading = computed(() => this._isLoading() || (this.button().loading ?? false), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /**
+     * Whether the button is disabled (from config or loading state).
+     */
+    isDisabled = computed(() => this.isLoading() || (this.button().config?.disabled ?? false), ...(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
+            },
+            event,
+            translucent: true,
+            dismissOnSelect: true,
+            side: 'bottom',
+            alignment: 'end',
+            arrow: false
+        });
+        await popover.present();
+        const { data, role } = await popover.onDidDismiss();
+        if (role === 'select' && data) {
+            await this.executeHandler(data);
+            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 (isLoading()) {
+        <ion-spinner name="crescent" />
+      } @else {
+        @if (button().icon) {
+          <ion-icon [name]="button().icon" [slot]="iconSlot()" />
+        }
+        @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, 20px);height:var(--maki-button-spinner-size, 20px)}.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 (isLoading()) {
+        <ion-spinner name="crescent" />
+      } @else {
+        @if (button().icon) {
+          <ion-icon [name]="button().icon" [slot]="iconSlot()" />
+        }
+        @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, 20px);height:var(--maki-button-spinner-size, 20px)}.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 +748,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

package/fesm2022/makigamestudio-ui-core.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"makigamestudio-ui-core.mjs","sources":["../../../projects/ui-core/src/lib/models/test.class.ts","../../../projects/ui-core/src/lib/services/test.service.ts","../../../projects/ui-core/src/lib/components/test-card/test-card.component.ts","../../../projects/ui-core/src/public-api.ts","../../../projects/ui-core/src/makigamestudio-ui-core.ts"],"sourcesContent":["import { TestInterface } from './test.interface';\n\n/**\n * TestClass - Example class implementing TestInterface.\n * Demonstrates the pattern for creating model classes with validation and factory methods.\n */\nexport class TestClass implements TestInterface {\n  readonly id: string;\n  readonly title: string;\n  readonly description?: string;\n  readonly createdAt: Date;\n  readonly isActive: boolean;\n  readonly metadata?: Record<string, unknown>;\n\n  constructor(data: TestInterface) {\n    this.id = data.id;\n    this.title = data.title;\n    this.description = data.description;\n    this.createdAt = data.createdAt instanceof Date ? data.createdAt : new Date(data.createdAt);\n    this.isActive = data.isActive;\n    this.metadata = data.metadata;\n  }\n\n  /**\n   * Factory method to create a new TestClass instance with a generated ID.\n   */\n  static create(title: string, description?: string): TestClass {\n    return new TestClass({\n      id: crypto.randomUUID(),\n      title,\n      description,\n      createdAt: new Date(),\n      isActive: true,\n    });\n  }\n\n  /**\n   * Creates a new instance with updated properties (immutable pattern).\n   */\n  update(changes: Partial<Omit<TestInterface, 'id' | 'createdAt'>>): TestClass {\n    return new TestClass({\n      ...this,\n      ...changes,\n    });\n  }\n\n  /**\n   * Returns a deactivated copy of this instance.\n   */\n  deactivate(): TestClass {\n    return this.update({ isActive: false });\n  }\n\n  /**\n   * Converts the instance to a plain JSON object.\n   */\n  toJSON(): TestInterface {\n    return {\n      id: this.id,\n      title: this.title,\n      description: this.description,\n      createdAt: this.createdAt,\n      isActive: this.isActive,\n      metadata: this.metadata,\n    };\n  }\n}\n","import { Injectable, computed, signal } from '@angular/core';\nimport { TestClass } from '../models/test.class';\nimport { TestInterface } from '../models/test.interface';\n\n/**\n * TestService - Example service using Angular Signals for reactive state management.\n * Provided in root, demonstrating singleton service pattern with signal-based state.\n */\n@Injectable({\n  providedIn: 'root',\n})\nexport class TestService {\n  // Private writable signal for internal state\n  private readonly _items = signal<readonly TestClass[]>([]);\n  private readonly _loading = signal<boolean>(false);\n  private readonly _error = signal<string | null>(null);\n\n  // Public readonly computed signals for consumers\n  /** All items in the store */\n  readonly items = this._items.asReadonly();\n\n  /** Loading state indicator */\n  readonly loading = this._loading.asReadonly();\n\n  /** Current error message, if any */\n  readonly error = this._error.asReadonly();\n\n  /** Count of all items */\n  readonly count = computed(() => this._items().length);\n\n  /** Only active items */\n  readonly activeItems = computed(() => this._items().filter((item) => item.isActive));\n\n  /** Count of active items */\n  readonly activeCount = computed(() => this.activeItems().length);\n\n  /**\n   * Adds a new item to the store.\n   */\n  addItem(title: string, description?: string): TestClass {\n    const newItem = TestClass.create(title, description);\n    this._items.update((items) => [...items, newItem]);\n    this._error.set(null);\n    return newItem;\n  }\n\n  /**\n   * Removes an item by ID.\n   */\n  removeItem(id: string): boolean {\n    const currentItems = this._items();\n    const filteredItems = currentItems.filter((item) => item.id !== id);\n\n    if (filteredItems.length === currentItems.length) {\n      return false;\n    }\n\n    this._items.set(filteredItems);\n    return true;\n  }\n\n  /**\n   * Updates an existing item by ID.\n   */\n  updateItem(id: string, changes: Partial<Omit<TestInterface, 'id' | 'createdAt'>>): TestClass | null {\n    let updatedItem: TestClass | null = null;\n\n    this._items.update((items) =>\n      items.map((item) => {\n        if (item.id === id) {\n          updatedItem = item.update(changes);\n          return updatedItem;\n        }\n        return item;\n      })\n    );\n\n    return updatedItem;\n  }\n\n  /**\n   * Deactivates an item by ID.\n   */\n  deactivateItem(id: string): TestClass | null {\n    return this.updateItem(id, { isActive: false });\n  }\n\n  /**\n   * Gets an item by ID using computed lookup.\n   */\n  getItemById(id: string): TestClass | undefined {\n    return this._items().find((item) => item.id === id);\n  }\n\n  /**\n   * Clears all items from the store.\n   */\n  clearAll(): void {\n    this._items.set([]);\n    this._error.set(null);\n  }\n\n  /**\n   * Sets the loading state.\n   */\n  setLoading(loading: boolean): void {\n    this._loading.set(loading);\n  }\n\n  /**\n   * Sets an error message.\n   */\n  setError(error: string | null): void {\n    this._error.set(error);\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  input,\n  output,\n  viewChild,\n} from '@angular/core';\nimport { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonIcon } from '@ionic/angular/standalone';\nimport { addIcons } from 'ionicons';\nimport { createOutline, trashOutline } from 'ionicons/icons';\nimport { TestInterface } from '../../models/test.interface';\n\n/**\n * TestCardComponent - Standalone Ionic Card component demonstrating\n * Angular 21 best practices: OnPush, Signal inputs/outputs/queries.\n *\n * @example\n * ```html\n * <maki-test-card\n *   [item]=\"myItem\"\n *   [showActions]=\"true\"\n *   (itemClick)=\"onItemClick($event)\"\n *   (deleteClick)=\"onDelete($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'maki-test-card',\n  standalone: true,\n  imports: [\n    IonCard,\n    IonCardHeader,\n    IonCardTitle,\n    IonCardSubtitle,\n    IonCardContent,\n    IonButton,\n    IonIcon,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ion-card\n      #cardElement\n      [class.inactive]=\"!item().isActive\"\n      (click)=\"onCardClick()\"\n    >\n      <ion-card-header>\n        <ion-card-title>{{ item().title }}</ion-card-title>\n        @if (formattedDate()) {\n          <ion-card-subtitle>\n            {{ formattedDate() }}\n            @if (!item().isActive) {\n              <span class=\"status-badge inactive\">Inactive</span>\n            }\n          </ion-card-subtitle>\n        }\n      </ion-card-header>\n\n      @if (item().description) {\n        <ion-card-content>\n          <p>{{ item().description }}</p>\n        </ion-card-content>\n      }\n\n      @if (showActions()) {\n        <ion-card-content class=\"card-actions\">\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            (click)=\"onEditClick($event)\"\n          >\n            <ion-icon slot=\"start\" name=\"create-outline\"></ion-icon>\n            Edit\n          </ion-button>\n          <ion-button\n            fill=\"outline\"\n            size=\"small\"\n            color=\"danger\"\n            (click)=\"onDeleteClick($event)\"\n          >\n            <ion-icon slot=\"start\" name=\"trash-outline\"></ion-icon>\n            Delete\n          </ion-button>\n        </ion-card-content>\n      }\n    </ion-card>\n  `,\n  styles: [`\n    :host {\n      display: block;\n    }\n\n    ion-card {\n      --background: var(--maki-card-background, var(--ion-card-background, #fff));\n      --color: var(--maki-card-color, var(--ion-text-color));\n      margin: var(--maki-card-margin, 16px);\n      border-radius: var(--maki-card-border-radius, 12px);\n      transition: opacity 0.2s ease, transform 0.2s ease;\n      cursor: pointer;\n\n      &:hover {\n        transform: translateY(-2px);\n      }\n\n      &.inactive {\n        opacity: 0.6;\n      }\n    }\n\n    ion-card-title {\n      color: var(--maki-primary, var(--ion-color-primary));\n      font-weight: 600;\n    }\n\n    ion-card-subtitle {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .status-badge {\n      font-size: 0.75rem;\n      padding: 2px 8px;\n      border-radius: 4px;\n      font-weight: 500;\n\n      &.inactive {\n        background-color: var(--ion-color-medium-tint);\n        color: var(--ion-color-medium-contrast);\n      }\n    }\n\n    .card-actions {\n      display: flex;\n      gap: 8px;\n      padding-top: 0;\n\n      ion-button {\n        --border-color: var(--maki-primary, var(--ion-color-primary));\n        --color: var(--maki-primary, var(--ion-color-primary));\n      }\n    }\n  `],\n})\nexport class TestCardComponent {\n  // Signal inputs\n  readonly item = input.required<TestInterface>();\n  readonly showActions = input<boolean>(false);\n\n  // Signal outputs\n  readonly itemClick = output<TestInterface>();\n  readonly editClick = output<TestInterface>();\n  readonly deleteClick = output<TestInterface>();\n\n  // Signal queries\n  readonly cardElement = viewChild<ElementRef<HTMLIonCardElement>>('cardElement');\n\n  // Computed signals\n  readonly formattedDate = computed(() => {\n    const date = this.item().createdAt;\n    if (!date) return '';\n\n    const dateObj = date instanceof Date ? date : new Date(date);\n    return dateObj.toLocaleDateString(undefined, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n  });\n\n  constructor() {\n    addIcons({ createOutline, trashOutline });\n  }\n\n  protected onCardClick(): void {\n    this.itemClick.emit(this.item());\n  }\n\n  protected onEditClick(event: Event): void {\n    event.stopPropagation();\n    this.editClick.emit(this.item());\n  }\n\n  protected onDeleteClick(event: Event): void {\n    event.stopPropagation();\n    this.deleteClick.emit(this.item());\n  }\n\n  /**\n   * Public method to focus the card element programmatically.\n   */\n  focus(): void {\n    this.cardElement()?.nativeElement?.focus();\n  }\n}\n","/*\n * Public API Surface of @makigamestudio/ui-core\n */\n\n// Models\nexport { TestClass } from './lib/models/test.class';\nexport type { TestInterface } from './lib/models/test.interface';\n\n// Services\nexport { TestService } from './lib/services/test.service';\n\n// Components\nexport { TestCardComponent } from './lib/components/test-card/test-card.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"makigamestudio-ui-core.mjs","sources":["../../../projects/ui-core/src/lib/models/test.class.ts","../../../projects/ui-core/src/lib/models/action-button-type.enum.ts","../../../projects/ui-core/src/lib/services/test.service.ts","../../../projects/ui-core/src/lib/components/test-card/test-card.component.ts","../../../projects/ui-core/src/lib/components/action-button-list/action-button-list.component.ts","../../../projects/ui-core/src/lib/components/button/button.component.ts","../../../projects/ui-core/src/public-api.ts","../../../projects/ui-core/src/makigamestudio-ui-core.ts"],"sourcesContent":["import { TestInterface } from './test.interface';\n\n/**\n * TestClass - Example class implementing TestInterface.\n * Demonstrates the pattern for creating model classes with validation and factory methods.\n */\nexport class TestClass implements TestInterface {\n  readonly id: string;\n  readonly title: string;\n  readonly description?: string;\n  readonly createdAt: Date;\n  readonly isActive: boolean;\n  readonly metadata?: Record<string, unknown>;\n\n  constructor(data: TestInterface) {\n    this.id = data.id;\n    this.title = data.title;\n    this.description = data.description;\n    this.createdAt = data.createdAt instanceof Date ? data.createdAt : new Date(data.createdAt);\n    this.isActive = data.isActive;\n    this.metadata = data.metadata;\n  }\n\n  /**\n   * Factory method to create a new TestClass instance with a generated ID.\n   */\n  static create(title: string, description?: string): TestClass {\n    return new TestClass({\n      id: crypto.randomUUID(),\n      title,\n      description,\n      createdAt: new Date(),\n      isActive: true\n    });\n  }\n\n  /**\n   * Creates a new instance with updated properties (immutable pattern).\n   */\n  update(changes: Partial<Omit<TestInterface, 'id' | 'createdAt'>>): TestClass {\n    return new TestClass({\n      ...this,\n      ...changes\n    });\n  }\n\n  /**\n   * Returns a deactivated copy of this instance.\n   */\n  deactivate(): TestClass {\n    return this.update({ isActive: false });\n  }\n\n  /**\n   * Converts the instance to a plain JSON object.\n   */\n  toJSON(): TestInterface {\n    return {\n      id: this.id,\n      title: this.title,\n      description: this.description,\n      createdAt: this.createdAt,\n      isActive: this.isActive,\n      metadata: this.metadata\n    };\n  }\n}\n","/**\n * @file Action button type enumeration\n * @description Defines the display types for action buttons\n */\n\n/**\n * Enumeration of action button display types.\n *\n * @example\n * ```typescript\n * const button: ActionButton = {\n *   id: 'save-btn',\n *   label: 'Save',\n *   type: ActionButtonType.Default,\n *   handler: () => console.log('Saved!')\n * };\n * ```\n */\nexport enum ActionButtonType {\n  /**\n   * Standard button with label and optional icon.\n   */\n  Default = 'default',\n\n  /**\n   * Button displaying only an icon, no label.\n   */\n  IconOnly = 'icon-only',\n\n  /**\n   * Button that opens a dropdown popover with child actions.\n   */\n  Dropdown = 'dropdown'\n}\n","import { Injectable, computed, signal } from '@angular/core';\nimport { TestClass } from '../models/test.class';\nimport { TestInterface } from '../models/test.interface';\n\n/**\n * TestService - Example service using Angular Signals for reactive state management.\n * Provided in root, demonstrating singleton service pattern with signal-based state.\n */\n@Injectable({\n  providedIn: 'root'\n})\nexport class TestService {\n  // Private writable signal for internal state\n  private readonly _items = signal<readonly TestClass[]>([]);\n  private readonly _loading = signal<boolean>(false);\n  private readonly _error = signal<string | null>(null);\n\n  // Public readonly computed signals for consumers\n  /** All items in the store */\n  readonly items = this._items.asReadonly();\n\n  /** Loading state indicator */\n  readonly loading = this._loading.asReadonly();\n\n  /** Current error message, if any */\n  readonly error = this._error.asReadonly();\n\n  /** Count of all items */\n  readonly count = computed(() => this._items().length);\n\n  /** Only active items */\n  readonly activeItems = computed(() => this._items().filter(item => item.isActive));\n\n  /** Count of active items */\n  readonly activeCount = computed(() => this.activeItems().length);\n\n  /**\n   * Adds a new item to the store.\n   */\n  addItem(title: string, description?: string): TestClass {\n    const newItem = TestClass.create(title, description);\n    this._items.update(items => [...items, newItem]);\n    this._error.set(null);\n    return newItem;\n  }\n\n  /**\n   * Removes an item by ID.\n   */\n  removeItem(id: string): boolean {\n    const currentItems = this._items();\n    const filteredItems = currentItems.filter(item => item.id !== id);\n\n    if (filteredItems.length === currentItems.length) {\n      return false;\n    }\n\n    this._items.set(filteredItems);\n    return true;\n  }\n\n  /**\n   * Updates an existing item by ID.\n   */\n  updateItem(\n    id: string,\n    changes: Partial<Omit<TestInterface, 'id' | 'createdAt'>>\n  ): TestClass | null {\n    let updatedItem: TestClass | null = null;\n\n    this._items.update(items =>\n      items.map(item => {\n        if (item.id === id) {\n          updatedItem = item.update(changes);\n          return updatedItem;\n        }\n        return item;\n      })\n    );\n\n    return updatedItem;\n  }\n\n  /**\n   * Deactivates an item by ID.\n   */\n  deactivateItem(id: string): TestClass | null {\n    return this.updateItem(id, { isActive: false });\n  }\n\n  /**\n   * Gets an item by ID using computed lookup.\n   */\n  getItemById(id: string): TestClass | undefined {\n    return this._items().find(item => item.id === id);\n  }\n\n  /**\n   * Clears all items from the store.\n   */\n  clearAll(): void {\n    this._items.set([]);\n    this._error.set(null);\n  }\n\n  /**\n   * Sets the loading state.\n   */\n  setLoading(loading: boolean): void {\n    this._loading.set(loading);\n  }\n\n  /**\n   * Sets an error message.\n   */\n  setError(error: string | null): void {\n    this._error.set(error);\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  input,\n  output,\n  viewChild\n} from '@angular/core';\nimport {\n  IonButton,\n  IonCard,\n  IonCardContent,\n  IonCardHeader,\n  IonCardSubtitle,\n  IonCardTitle,\n  IonIcon\n} from '@ionic/angular/standalone';\nimport { addIcons } from 'ionicons';\nimport { createOutline, trashOutline } from 'ionicons/icons';\nimport { TestInterface } from '../../models/test.interface';\n\n/**\n * TestCardComponent - Standalone Ionic Card component demonstrating\n * Angular 21 best practices: OnPush, Signal inputs/outputs/queries.\n *\n * @example\n * ```html\n * <maki-test-card\n *   [item]=\"myItem\"\n *   [showActions]=\"true\"\n *   (itemClick)=\"onItemClick($event)\"\n *   (deleteClick)=\"onDelete($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'maki-test-card',\n  standalone: true,\n  imports: [\n    IonCard,\n    IonCardHeader,\n    IonCardTitle,\n    IonCardSubtitle,\n    IonCardContent,\n    IonButton,\n    IonIcon\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ion-card #cardElement [class.inactive]=\"!item().isActive\" (click)=\"onCardClick()\">\n      <ion-card-header>\n        <ion-card-title>{{ item().title }}</ion-card-title>\n        @if (formattedDate()) {\n          <ion-card-subtitle>\n            {{ formattedDate() }}\n            @if (!item().isActive) {\n              <span class=\"status-badge inactive\">Inactive</span>\n            }\n          </ion-card-subtitle>\n        }\n      </ion-card-header>\n\n      @if (item().description) {\n        <ion-card-content>\n          <p>{{ item().description }}</p>\n        </ion-card-content>\n      }\n\n      @if (showActions()) {\n        <ion-card-content class=\"card-actions\">\n          <ion-button fill=\"outline\" size=\"small\" (click)=\"onEditClick($event)\">\n            <ion-icon slot=\"start\" name=\"create-outline\"></ion-icon>\n            Edit\n          </ion-button>\n          <ion-button fill=\"outline\" size=\"small\" color=\"danger\" (click)=\"onDeleteClick($event)\">\n            <ion-icon slot=\"start\" name=\"trash-outline\"></ion-icon>\n            Delete\n          </ion-button>\n        </ion-card-content>\n      }\n    </ion-card>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n\n      ion-card {\n        --background: var(--maki-card-background, var(--ion-card-background, #fff));\n        --color: var(--maki-card-color, var(--ion-text-color));\n        margin: var(--maki-card-margin, 16px);\n        border-radius: var(--maki-card-border-radius, 12px);\n        transition:\n          opacity 0.2s ease,\n          transform 0.2s ease;\n        cursor: pointer;\n\n        &:hover {\n          transform: translateY(-2px);\n        }\n\n        &.inactive {\n          opacity: 0.6;\n        }\n      }\n\n      ion-card-title {\n        color: var(--maki-primary, var(--ion-color-primary));\n        font-weight: 600;\n      }\n\n      ion-card-subtitle {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .status-badge {\n        font-size: 0.75rem;\n        padding: 2px 8px;\n        border-radius: 4px;\n        font-weight: 500;\n\n        &.inactive {\n          background-color: var(--ion-color-medium-tint);\n          color: var(--ion-color-medium-contrast);\n        }\n      }\n\n      .card-actions {\n        display: flex;\n        gap: 8px;\n        padding-top: 0;\n\n        ion-button {\n          --border-color: var(--maki-primary, var(--ion-color-primary));\n          --color: var(--maki-primary, var(--ion-color-primary));\n        }\n      }\n    `\n  ]\n})\nexport class TestCardComponent {\n  // Signal inputs\n  readonly item = input.required<TestInterface>();\n  readonly showActions = input<boolean>(false);\n\n  // Signal outputs\n  readonly itemClick = output<TestInterface>();\n  readonly editClick = output<TestInterface>();\n  readonly deleteClick = output<TestInterface>();\n\n  // Signal queries\n  readonly cardElement = viewChild<ElementRef<HTMLIonCardElement>>('cardElement');\n\n  // Computed signals\n  readonly formattedDate = computed(() => {\n    const date = this.item().createdAt;\n    if (!date) return '';\n\n    const dateObj = date instanceof Date ? date : new Date(date);\n    return dateObj.toLocaleDateString(undefined, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric'\n    });\n  });\n\n  constructor() {\n    addIcons({ createOutline, trashOutline });\n  }\n\n  protected onCardClick(): void {\n    this.itemClick.emit(this.item());\n  }\n\n  protected onEditClick(event: Event): void {\n    event.stopPropagation();\n    this.editClick.emit(this.item());\n  }\n\n  protected onDeleteClick(event: Event): void {\n    event.stopPropagation();\n    this.deleteClick.emit(this.item());\n  }\n\n  /**\n   * Public method to focus the card element programmatically.\n   */\n  focus(): void {\n    this.cardElement()?.nativeElement?.focus();\n  }\n}\n","/**\n * @file Action Button List Component\n * @description Component for rendering a list of action buttons inside a popover\n */\n\nimport { ChangeDetectionStrategy, Component, inject, input, output, signal } from '@angular/core';\nimport { IonIcon, IonItem, IonLabel, IonList, IonSpinner, PopoverController } from '@ionic/angular/standalone';\nimport { addIcons } from 'ionicons';\n\nimport { ActionButtonType } from '../../models/action-button-type.enum';\nimport { ActionButton } from '../../models/action-button.interface';\n\n/**\n * Component that renders a list of action buttons for use in popovers/dropdowns.\n *\n * This component is designed to be used as the content of an `ion-popover`\n * created via `PopoverController`. When a button is selected, it dismisses\n * the popover and returns the selected button.\n *\n * @example\n * ```typescript\n * // Used internally by maki-button for dropdowns\n * // Can also be used standalone:\n * const popover = await popoverCtrl.create({\n *   component: ActionButtonListComponent,\n *   componentProps: { buttons: myButtons },\n *   event: clickEvent\n * });\n * await popover.present();\n *\n * const { data } = await popover.onDidDismiss();\n * if (data) {\n *   data.handler();\n * }\n * ```\n *\n * @usageNotes\n * ### Inputs\n * - `buttons` (required): Array of `ActionButton` objects to display\n *\n * ### Outputs\n * - `buttonSelect`: Emits the selected `ActionButton` when clicked\n */\n@Component({\n  selector: 'maki-action-button-list',\n  standalone: true,\n  imports: [IonList, IonItem, IonIcon, IonLabel, IonSpinner],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ion-list lines=\"none\">\n      @for (button of buttonList(); track button.id) {\n        <ion-item\n          [button]=\"true\"\n          [disabled]=\"button.loading || button.config?.disabled\"\n          [detail]=\"button.type === dropdownType\"\n          (click)=\"onButtonClick(button)\"\n        >\n          @if (button.loading) {\n            <ion-spinner slot=\"start\" name=\"crescent\" />\n          } @else if (button.icon) {\n            <ion-icon slot=\"start\" [name]=\"button.icon\" />\n          }\n          @if (button.label) {\n            <ion-label>{{ button.label }}</ion-label>\n          }\n        </ion-item>\n      } @empty {\n        <ion-item>\n          <ion-label color=\"medium\">No actions available</ion-label>\n        </ion-item>\n      }\n    </ion-list>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n\n      ion-list {\n        padding: 0;\n      }\n\n      ion-item {\n        --padding-start: var(--maki-action-button-list-padding, 16px);\n        --padding-end: var(--maki-action-button-list-padding, 16px);\n        --min-height: var(--maki-action-button-list-item-height, 44px);\n        cursor: pointer;\n        width: fit-content;\n      }\n\n      ion-label {\n        white-space: nowrap;\n      }\n\n      ion-icon {\n        font-size: var(--maki-action-button-list-icon-size, 20px);\n        margin-inline-end: var(--maki-action-button-list-icon-gap, 12px);\n      }\n\n      ion-spinner {\n        width: var(--maki-action-button-list-icon-size, 20px);\n        height: var(--maki-action-button-list-icon-size, 20px);\n        margin-inline-end: var(--maki-action-button-list-icon-gap, 12px);\n      }\n    `,\n  ],\n})\nexport class ActionButtonListComponent {\n  /**\n   * Reference to ActionButtonType.Dropdown for template comparison.\n   * @internal\n   */\n  protected readonly dropdownType = ActionButtonType.Dropdown;\n\n  /**\n   * Popover controller for dismissing the popover when an item is selected.\n   */\n  private readonly popoverCtrl = inject(PopoverController, { optional: true });\n\n  /**\n   * Internal signal to store buttons passed via componentProps.\n   * PopoverController.create() sets properties directly, bypassing signal inputs.\n   */\n  private readonly _buttonsFromProps = signal<readonly ActionButton[]>([]);\n\n  /**\n   * The list of action buttons to display (when used via template binding).\n   */\n  readonly buttons = input<readonly ActionButton[]>([]);\n\n  /**\n   * Computed button list that works with both signal input and componentProps.\n   * PopoverController passes buttons as a direct property, not through Angular's input system.\n   */\n  protected readonly buttonList = (): readonly ActionButton[] => {\n    const fromProps = this._buttonsFromProps();\n    const fromInput = this.buttons();\n    return fromProps.length > 0 ? fromProps : fromInput;\n  };\n\n  /**\n   * Setter to capture buttons passed via PopoverController.create({ componentProps }).\n   * This is called when Ionic sets the property directly on the component instance.\n   */\n  set buttonsFromPopover(value: readonly ActionButton[]) {\n    this._buttonsFromProps.set(value);\n  }\n\n  /**\n   * Emits when a button is selected from the list.\n   */\n  readonly buttonSelect = output<ActionButton>();\n\n  constructor() {\n    // Register any icons that might be used\n    addIcons({});\n  }\n\n  /**\n   * Handles click on a button item.\n   * Emits the selected button and dismisses the popover.\n   *\n   * @param button - The clicked action button\n   */\n  protected onButtonClick(button: ActionButton): void {\n    if (button.loading || button.config?.disabled) {\n      return;\n    }\n\n    this.buttonSelect.emit(button);\n    this.popoverCtrl?.dismiss(button, 'select');\n  }\n}\n","/**\n * @file Button Component\n * @description Configurable button component that renders ion-button based on ActionButton configuration\n */\n\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  output,\n  signal\n} from '@angular/core';\nimport { IonButton, IonIcon, IonSpinner, PopoverController } from '@ionic/angular/standalone';\nimport { addIcons } from 'ionicons';\nimport { chevronDownOutline } from 'ionicons/icons';\n\nimport { ActionButtonType } from '../../models/action-button-type.enum';\nimport { ActionButton } from '../../models/action-button.interface';\nimport { ActionButtonListComponent } from '../action-button-list/action-button-list.component';\n\n/**\n * A configurable button component that renders an `ion-button` based on\n * an `ActionButton` configuration object.\n *\n * Features:\n * - Three display types: Default (label + icon), IconOnly, and Dropdown\n * - Automatic loading state management for async handlers\n * - Dropdown support via PopoverController with child actions\n * - Full Ionic button styling configuration (fill, size, color, shape, expand)\n * - Automatic chevron icon for dropdown buttons\n *\n * @example\n * ```html\n * <!-- Simple button -->\n * <maki-button [button]=\"saveButton\" />\n *\n * <!-- Icon-only button -->\n * <maki-button [button]=\"iconButton\" />\n *\n * <!-- Dropdown button -->\n * <maki-button [button]=\"menuButton\" />\n * ```\n *\n * @example\n * ```typescript\n * // In your component\n * saveButton: ActionButton = {\n *   id: 'save',\n *   label: 'Save',\n *   icon: 'saveOutline',\n *   type: ActionButtonType.Default,\n *   config: { fill: 'solid', color: 'primary' },\n *   handler: async () => {\n *     await this.saveData();\n *   }\n * };\n *\n * menuButton: ActionButton = {\n *   id: 'menu',\n *   label: 'Actions',\n *   type: ActionButtonType.Dropdown,\n *   handler: () => {},\n *   children: [\n *     { id: 'edit', label: 'Edit', icon: 'createOutline', type: ActionButtonType.Default, handler: () => this.edit() },\n *     { id: 'delete', label: 'Delete', icon: 'trashOutline', type: ActionButtonType.Default, handler: () => this.delete() }\n *   ]\n * };\n * ```\n *\n * @usageNotes\n * ### Inputs\n * - `button` (required): The `ActionButton` configuration object\n *\n * ### Outputs\n * - `buttonClick`: Emits the button configuration when clicked (for non-dropdown buttons)\n * - `childSelect`: Emits the selected child button (for dropdown buttons)\n *\n * ### Loading State\n * The component automatically manages loading state for async handlers.\n * When a handler returns a Promise, the button shows a spinner until it resolves/rejects.\n * You can also manually control loading via the `button.loading` property.\n *\n * ### Dropdown Behavior\n * For `ActionButtonType.Dropdown`, clicking the button opens an `ion-popover`\n * containing an `ActionButtonListComponent` with the child buttons.\n * When a child is selected, its handler is executed and `childSelect` is emitted.\n */\n@Component({\n  selector: 'maki-button',\n  standalone: true,\n  imports: [IonButton, IonIcon, IonSpinner],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ion-button\n      [fill]=\"button().config?.fill\"\n      [size]=\"button().config?.size\"\n      [color]=\"button().config?.color\"\n      [shape]=\"button().config?.shape\"\n      [expand]=\"button().config?.expand\"\n      [strong]=\"button().config?.strong\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-label]=\"button().ariaLabel\"\n      [title]=\"button().tooltip ?? ''\"\n      (click)=\"onClick($event)\"\n    >\n      @if (isLoading()) {\n        <ion-spinner name=\"crescent\" />\n      } @else {\n        @if (button().icon) {\n          <ion-icon [name]=\"button().icon\" [slot]=\"iconSlot()\" />\n        }\n        @if (showLabel()) {\n          {{ button().label }}\n        }\n        @if (showDropdownIcon()) {\n          <ion-icon name=\"chevron-down-outline\" slot=\"end\" class=\"dropdown-icon\" />\n        }\n      }\n    </ion-button>\n  `,\n  styles: [\n    `\n      :host {\n        display: inline-block;\n      }\n\n      ion-button {\n        --padding-start: var(--maki-button-padding-start);\n        --padding-end: var(--maki-button-padding-end);\n      }\n\n      ion-spinner {\n        width: var(--maki-button-spinner-size, 20px);\n        height: var(--maki-button-spinner-size, 20px);\n      }\n\n      .dropdown-icon {\n        font-size: var(--maki-button-dropdown-icon-size, 16px);\n        margin-inline-start: var(--maki-button-dropdown-icon-gap, 4px);\n      }\n    `\n  ]\n})\nexport class ButtonComponent {\n  /**\n   * Popover controller for creating dropdown popovers.\n   */\n  private readonly popoverCtrl = inject(PopoverController);\n\n  /**\n   * Internal loading state for async handler execution.\n   */\n  private readonly _isLoading = signal<boolean>(false);\n\n  /**\n   * The action button configuration.\n   */\n  readonly button = input.required<ActionButton>();\n\n  /**\n   * Emits when the button is clicked (for non-dropdown buttons).\n   * Emits the button configuration that was clicked.\n   */\n  readonly buttonClick = output<ActionButton>();\n\n  /**\n   * Emits when a child button is selected from a dropdown.\n   * Only emits for `ActionButtonType.Dropdown` buttons.\n   */\n  readonly childSelect = output<ActionButton>();\n\n  /**\n   * Combined loading state from external prop and internal async state.\n   */\n  readonly isLoading = computed(() => this._isLoading() || (this.button().loading ?? false));\n\n  /**\n   * Whether the button is disabled (from config or loading state).\n   */\n  readonly isDisabled = computed(\n    () => this.isLoading() || (this.button().config?.disabled ?? false)\n  );\n\n  /**\n   * Determines the slot for the icon based on button type and label presence.\n   */\n  readonly iconSlot = computed(() => {\n    const btn = this.button();\n    if (btn.type === ActionButtonType.IconOnly) {\n      return 'icon-only';\n    }\n    return btn.label ? 'start' : 'icon-only';\n  });\n\n  /**\n   * Whether to show the label text.\n   */\n  readonly showLabel = computed(() => {\n    const btn = this.button();\n    return btn.type !== ActionButtonType.IconOnly && btn.label;\n  });\n\n  /**\n   * Whether to show the dropdown chevron icon.\n   */\n  readonly showDropdownIcon = computed(() => {\n    const btn = this.button();\n    return btn.type === ActionButtonType.Dropdown && !btn.config?.hideDropdownIcon;\n  });\n\n  constructor() {\n    addIcons({ chevronDownOutline });\n  }\n\n  /**\n   * Handles button click events.\n   * For dropdown buttons, opens a popover with child actions.\n   * For other buttons, executes the handler with auto-loading management.\n   *\n   * @param event - The click event\n   */\n  protected async onClick(event: Event): Promise<void> {\n    const btn = this.button();\n\n    if (this.isDisabled()) {\n      return;\n    }\n\n    if (btn.type === ActionButtonType.Dropdown) {\n      await this.openDropdown(event);\n    } else {\n      await this.executeHandler(btn);\n      this.buttonClick.emit(btn);\n    }\n  }\n\n  /**\n   * Opens a dropdown popover with child action buttons.\n   *\n   * @param event - The triggering click event for popover positioning\n   */\n  private async openDropdown(event: Event): Promise<void> {\n    const btn = this.button();\n    const children = btn.children ?? [];\n\n    if (children.length === 0) {\n      return;\n    }\n\n    const popover = await this.popoverCtrl.create({\n      component: ActionButtonListComponent,\n      componentProps: {\n        buttonsFromPopover: children\n      },\n      event,\n      translucent: true,\n      dismissOnSelect: true,\n      side: 'bottom',\n      alignment: 'end',\n      arrow: false\n    });\n\n    await popover.present();\n\n    const { data, role } = await popover.onDidDismiss<ActionButton>();\n\n    if (role === 'select' && data) {\n      await this.executeHandler(data);\n      this.childSelect.emit(data);\n    }\n  }\n\n  /**\n   * Executes a button's handler with automatic loading state management.\n   *\n   * @param btn - The button whose handler to execute\n   */\n  private async executeHandler(btn: ActionButton): Promise<void> {\n    const result = btn.handler();\n\n    if (result instanceof Promise) {\n      this._isLoading.set(true);\n      try {\n        await result;\n      } finally {\n        this._isLoading.set(false);\n      }\n    }\n  }\n}\n","/*\n * Public API Surface of @makigamestudio/ui-core\n */\n\n// Models\nexport { TestClass } from './lib/models/test.class';\nexport type { TestInterface } from './lib/models/test.interface';\n\n// Action Button Models\nexport type { ActionButtonConfig } from './lib/models/action-button-config.interface';\nexport { ActionButtonType } from './lib/models/action-button-type.enum';\nexport type { ActionButton } from './lib/models/action-button.interface';\n\n// Services\nexport { TestService } from './lib/services/test.service';\n\n// Components\nexport { TestCardComponent } from './lib/components/test-card/test-card.component';\n\n// Action Button Components\nexport { ActionButtonListComponent } from './lib/components/action-button-list/action-button-list.component';\nexport { ButtonComponent } from './lib/components/button/button.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAEA;;;AAGG;MACU,SAAS,CAAA;AACX,IAAA,EAAE;AACF,IAAA,KAAK;AACL,IAAA,WAAW;AACX,IAAA,SAAS;AACT,IAAA,QAAQ;AACR,IAAA,QAAQ;AAEjB,IAAA,WAAA,CAAY,IAAmB,EAAA;AAC7B,QAAA,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE;AACjB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;AACvB,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW;QACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,YAAY,IAAI,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AAC3F,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;AAC7B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;IAC/B;AAEA;;AAEG;AACH,IAAA,OAAO,MAAM,CAAC,KAAa,EAAE,WAAoB,EAAA;QAC/C,OAAO,IAAI,SAAS,CAAC;AACnB,YAAA,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE;YACvB,KAAK;YACL,WAAW;YACX,SAAS,EAAE,IAAI,IAAI,EAAE;AACrB,YAAA,QAAQ,EAAE;AACX,SAAA,CAAC;IACJ;AAEA;;AAEG;AACH,IAAA,MAAM,CAAC,OAAyD,EAAA;QAC9D,OAAO,IAAI,SAAS,CAAC;AACnB,YAAA,GAAG,IAAI;AACP,YAAA,GAAG;AACJ,SAAA,CAAC;IACJ;AAEA;;AAEG;IACH,UAAU,GAAA;QACR,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IACzC;AAEA;;AAEG;IACH,MAAM,GAAA;QACJ,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC;SAChB;IACH;AACD;;AClED;;;AAGG;AAEH;;;;;;;;;;;;AAYG;IACS;AAAZ,CAAA,UAAY,gBAAgB,EAAA;AAC1B;;AAEG;AACH,IAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AAEnB;;AAEG;AACH,IAAA,gBAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAEtB;;AAEG;AACH,IAAA,gBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAfW,gBAAgB,KAAhB,gBAAgB,GAAA,EAAA,CAAA,CAAA;;ACd5B;;;AAGG;MAIU,WAAW,CAAA;;AAEL,IAAA,MAAM,GAAG,MAAM,CAAuB,EAAE,kDAAC;AACzC,IAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,oDAAC;AACjC,IAAA,MAAM,GAAG,MAAM,CAAgB,IAAI,kDAAC;;;AAI5C,IAAA,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;;AAGhC,IAAA,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;AAGpC,IAAA,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;;AAGhC,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,iDAAC;;IAG5C,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;;AAGzE,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,uDAAC;AAEhE;;AAEG;IACH,OAAO,CAAC,KAAa,EAAE,WAAoB,EAAA;QACzC,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC;AACpD,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,OAAO,CAAC,CAAC;AAChD,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,QAAA,OAAO,OAAO;IAChB;AAEA;;AAEG;AACH,IAAA,UAAU,CAAC,EAAU,EAAA;AACnB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE;AAClC,QAAA,MAAM,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;QAEjE,IAAI,aAAa,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,EAAE;AAChD,YAAA,OAAO,KAAK;QACd;AAEA,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC;AAC9B,QAAA,OAAO,IAAI;IACb;AAEA;;AAEG;IACH,UAAU,CACR,EAAU,EACV,OAAyD,EAAA;QAEzD,IAAI,WAAW,GAAqB,IAAI;AAExC,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IACtB,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;AACf,YAAA,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;AAClB,gBAAA,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;AAClC,gBAAA,OAAO,WAAW;YACpB;AACA,YAAA,OAAO,IAAI;QACb,CAAC,CAAC,CACH;AAED,QAAA,OAAO,WAAW;IACpB;AAEA;;AAEG;AACH,IAAA,cAAc,CAAC,EAAU,EAAA;AACvB,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IACjD;AAEA;;AAEG;AACH,IAAA,WAAW,CAAC,EAAU,EAAA;AACpB,QAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACnD;AAEA;;AAEG;IACH,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;IACvB;AAEA;;AAEG;AACH,IAAA,UAAU,CAAC,OAAgB,EAAA;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5B;AAEA;;AAEG;AACH,IAAA,QAAQ,CAAC,KAAoB,EAAA;AAC3B,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;IACxB;uGA1GW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAX,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,cAFV,MAAM,EAAA,CAAA;;2FAEP,WAAW,EAAA,UAAA,EAAA,CAAA;kBAHvB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;ACYD;;;;;;;;;;;;;AAaG;MA6GU,iBAAiB,CAAA;;AAEnB,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAiB;AACtC,IAAA,WAAW,GAAG,KAAK,CAAU,KAAK,uDAAC;;IAGnC,SAAS,GAAG,MAAM,EAAiB;IACnC,SAAS,GAAG,MAAM,EAAiB;IACnC,WAAW,GAAG,MAAM,EAAiB;;AAGrC,IAAA,WAAW,GAAG,SAAS,CAAiC,aAAa,uDAAC;;AAGtE,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;QACrC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,SAAS;AAClC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE;AAEpB,QAAA,MAAM,OAAO,GAAG,IAAI,YAAY,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC;AAC5D,QAAA,OAAO,OAAO,CAAC,kBAAkB,CAAC,SAAS,EAAE;AAC3C,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,GAAG,EAAE;AACN,SAAA,CAAC;AACJ,IAAA,CAAC,yDAAC;AAEF,IAAA,WAAA,GAAA;AACE,QAAA,QAAQ,CAAC,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;IAC3C;IAEU,WAAW,GAAA;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAClC;AAEU,IAAA,WAAW,CAAC,KAAY,EAAA;QAChC,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAClC;AAEU,IAAA,aAAa,CAAC,KAAY,EAAA;QAClC,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACpC;AAEA;;AAEG;IACH,KAAK,GAAA;QACH,IAAI,CAAC,WAAW,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE;IAC5C;uGAjDW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA/FlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,04BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA1CC,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,UAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,aAAa,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,YAAY,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,eAAe,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,OAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACT,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,KAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAkGE,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBA5G7B,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,OAAA,EACP;wBACP,OAAO;wBACP,aAAa;wBACb,YAAY;wBACZ,eAAe;wBACf,cAAc;wBACd,SAAS;wBACT;qBACD,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,04BAAA,CAAA,EAAA;ycAyEgE,aAAa,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AC3JhF;;;AAGG;AASH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;MAkEU,yBAAyB,CAAA;AACpC;;;AAGG;AACgB,IAAA,YAAY,GAAG,gBAAgB,CAAC,QAAQ;AAE3D;;AAEG;IACc,WAAW,GAAG,MAAM,CAAC,iBAAiB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE5E;;;AAGG;AACc,IAAA,iBAAiB,GAAG,MAAM,CAA0B,EAAE,6DAAC;AAExE;;AAEG;AACM,IAAA,OAAO,GAAG,KAAK,CAA0B,EAAE,mDAAC;AAErD;;;AAGG;IACgB,UAAU,GAAG,MAA8B;AAC5D,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,EAAE;AAC1C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,EAAE;AAChC,QAAA,OAAO,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS,GAAG,SAAS;AACrD,IAAA,CAAC;AAED;;;AAGG;IACH,IAAI,kBAAkB,CAAC,KAA8B,EAAA;AACnD,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC;IACnC;AAEA;;AAEG;IACM,YAAY,GAAG,MAAM,EAAgB;AAE9C,IAAA,WAAA,GAAA;;QAEE,QAAQ,CAAC,EAAE,CAAC;IACd;AAEA;;;;;AAKG;AACO,IAAA,aAAa,CAAC,MAAoB,EAAA;QAC1C,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,EAAE,QAAQ,EAAE;YAC7C;QACF;AAEA,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;QAC9B,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC;IAC7C;uGAhEW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA5D1B;;;;;;;;;;;;;;;;;;;;;;;;GAwBT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,omBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA1BS,OAAO,yFAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,YAAA,EAAA,UAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,QAAQ,6FAAE,UAAU,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FA8D9C,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAjErC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yBAAyB,cACvB,IAAI,EAAA,OAAA,EACP,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,mBACzC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC;;;;;;;;;;;;;;;;;;;;;;;;AAwBT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,omBAAA,CAAA,EAAA;;;ACxEH;;;AAGG;AAmBH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEG;MAyDU,eAAe,CAAA;AAC1B;;AAEG;AACc,IAAA,WAAW,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAExD;;AAEG;AACc,IAAA,UAAU,GAAG,MAAM,CAAU,KAAK,sDAAC;AAEpD;;AAEG;AACM,IAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,iDAAgB;AAEhD;;;AAGG;IACM,WAAW,GAAG,MAAM,EAAgB;AAE7C;;;AAGG;IACM,WAAW,GAAG,MAAM,EAAgB;AAE7C;;AAEG;IACM,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,IAAI,KAAK,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAE1F;;AAEG;IACM,UAAU,GAAG,QAAQ,CAC5B,MAAM,IAAI,CAAC,SAAS,EAAE,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,IAAI,KAAK,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CACpE;AAED;;AAEG;AACM,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;QACzB,IAAI,GAAG,CAAC,IAAI,KAAK,gBAAgB,CAAC,QAAQ,EAAE;AAC1C,YAAA,OAAO,WAAW;QACpB;QACA,OAAO,GAAG,CAAC,KAAK,GAAG,OAAO,GAAG,WAAW;AAC1C,IAAA,CAAC,oDAAC;AAEF;;AAEG;AACM,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AACjC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;QACzB,OAAO,GAAG,CAAC,IAAI,KAAK,gBAAgB,CAAC,QAAQ,IAAI,GAAG,CAAC,KAAK;AAC5D,IAAA,CAAC,qDAAC;AAEF;;AAEG;AACM,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AACxC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;AACzB,QAAA,OAAO,GAAG,CAAC,IAAI,KAAK,gBAAgB,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,gBAAgB;AAChF,IAAA,CAAC,4DAAC;AAEF,IAAA,WAAA,GAAA;AACE,QAAA,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAClC;AAEA;;;;;;AAMG;IACO,MAAM,OAAO,CAAC,KAAY,EAAA;AAClC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;AAEzB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;YACrB;QACF;QAEA,IAAI,GAAG,CAAC,IAAI,KAAK,gBAAgB,CAAC,QAAQ,EAAE;AAC1C,YAAA,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;QAChC;aAAO;AACL,YAAA,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC;AAC9B,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC;QAC5B;IACF;AAEA;;;;AAIG;IACK,MAAM,YAAY,CAAC,KAAY,EAAA;AACrC,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;AACzB,QAAA,MAAM,QAAQ,GAAG,GAAG,CAAC,QAAQ,IAAI,EAAE;AAEnC,QAAA,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YACzB;QACF;QAEA,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;AAC5C,YAAA,SAAS,EAAE,yBAAyB;AACpC,YAAA,cAAc,EAAE;AACd,gBAAA,kBAAkB,EAAE;AACrB,aAAA;YACD,KAAK;AACL,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,SAAS,EAAE,KAAK;AAChB,YAAA,KAAK,EAAE;AACR,SAAA,CAAC;AAEF,QAAA,MAAM,OAAO,CAAC,OAAO,EAAE;QAEvB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,YAAY,EAAgB;AAEjE,QAAA,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,EAAE;AAC7B,YAAA,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;AAC/B,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B;IACF;AAEA;;;;AAIG;IACK,MAAM,cAAc,CAAC,GAAiB,EAAA;AAC5C,QAAA,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,EAAE;AAE5B,QAAA,IAAI,MAAM,YAAY,OAAO,EAAE;AAC7B,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,YAAA,IAAI;AACF,gBAAA,MAAM,MAAM;YACd;oBAAU;AACR,gBAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;YAC5B;QACF;IACF;uGAjJW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnDhB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,kXAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EA7BS,SAAS,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,OAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAqD7B,eAAe,EAAA,UAAA,EAAA,CAAA;kBAxD3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACP,CAAC,SAAS,EAAE,OAAO,EAAE,UAAU,CAAC,EAAA,eAAA,EACxB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,kXAAA,CAAA,EAAA;;;ACzHH;;AAEG;AAEH;;ACJA;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makigamestudio/ui-core",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Angular 21 + Ionic 8 component library with zoneless architecture and signal-based state management",
   "keywords": [
     "angular",

package/theme.css

@@ -66,7 +66,8 @@
   --maki-radius-full: 9999px;
 
   /* Typography */
-  --maki-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  --maki-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   --maki-font-size-xs: 0.75rem;
   --maki-font-size-sm: 0.875rem;
   --maki-font-size-md: 1rem;
@@ -78,6 +79,19 @@
   --maki-transition-fast: 150ms ease;
   --maki-transition-normal: 250ms ease;
   --maki-transition-slow: 350ms ease;
+
+  /* Button Component (maki-button) */
+  --maki-button-padding-start: 8px;
+  --maki-button-padding-end: 8px;
+  --maki-button-spinner-size: 20px;
+  --maki-button-dropdown-icon-size: 16px;
+  --maki-button-dropdown-icon-gap: 4px;
+
+  /* Action Button List Component (maki-action-button-list) */
+  --maki-action-button-list-padding: 16px;
+  --maki-action-button-list-item-height: 44px;
+  --maki-action-button-list-icon-size: 20px;
+  --maki-action-button-list-icon-gap: 12px;
 }
 
 /* Dark Mode Overrides */

package/theme.scss

@@ -84,7 +84,8 @@
   // ==============================================
   // Typography
   // ==============================================
-  --maki-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  --maki-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   --maki-font-size-xs: 0.75rem;
   --maki-font-size-sm: 0.875rem;
   --maki-font-size-md: 1rem;
@@ -98,6 +99,23 @@
   --maki-transition-fast: 150ms ease;
   --maki-transition-normal: 250ms ease;
   --maki-transition-slow: 350ms ease;
+
+  // ==============================================
+  // Button Component (maki-button)
+  // ==============================================
+  --maki-button-padding-start: 8px;
+  --maki-button-padding-end: 8px;
+  --maki-button-spinner-size: 20px;
+  --maki-button-dropdown-icon-size: 16px;
+  --maki-button-dropdown-icon-gap: 4px;
+
+  // ==============================================
+  // Action Button List Component (maki-action-button-list)
+  // ==============================================
+  --maki-action-button-list-padding: 16px;
+  --maki-action-button-list-item-height: 44px;
+  --maki-action-button-list-icon-size: 20px;
+  --maki-action-button-list-icon-gap: 12px;
 }
 
 // ==============================================
@@ -120,40 +138,3 @@
     --maki-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   }
 }
-
-// ==============================================
-// Utility Mixins (for SCSS consumers)
-// ==============================================
-@mixin maki-flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin maki-flex-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-@mixin maki-card-hover {
-  transition: transform var(--maki-transition-fast), box-shadow var(--maki-transition-fast);
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  }
-}
-
-@mixin maki-truncate($lines: 1) {
-  @if $lines == 1 {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  } @else {
-    display: -webkit-box;
-    -webkit-line-clamp: $lines;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-}

package/types/makigamestudio-ui-core.d.ts

@@ -50,6 +50,210 @@ declare class TestClass implements TestInterface {
     toJSON(): TestInterface;
 }
 
+/**
+ * @file Action button configuration interface
+ * @description Configuration options for styling and behavior of action buttons
+ */
+/**
+ * Configuration interface for action button styling and behavior.
+ *
+ * @example
+ * ```typescript
+ * const config: ActionButtonConfig = {
+ *   fill: 'outline',
+ *   size: 'small',
+ *   color: 'primary',
+ *   shape: 'round'
+ * };
+ * ```
+ */
+interface ActionButtonConfig {
+    /**
+     * The fill style of the button.
+     * - `'clear'`: Transparent background
+     * - `'outline'`: Transparent background with border
+     * - `'solid'`: Filled background (default Ionic behavior)
+     * - `'default'`: Uses Ionic default
+     */
+    readonly fill?: 'clear' | 'outline' | 'solid' | 'default';
+    /**
+     * The size of the button.
+     * - `'small'`: Smaller button
+     * - `'default'`: Standard size
+     * - `'large'`: Larger button
+     */
+    readonly size?: 'small' | 'default' | 'large';
+    /**
+     * The color of the button. Can be an Ionic color name
+     * (primary, secondary, tertiary, success, warning, danger, light, medium, dark)
+     * or a custom color defined in your theme.
+     */
+    readonly color?: string;
+    /**
+     * The shape of the button.
+     * - `'round'`: Fully rounded corners
+     */
+    readonly shape?: 'round';
+    /**
+     * How the button should expand to fill its container.
+     * - `'block'`: Full width with rounded corners
+     * - `'full'`: Full width with square corners
+     */
+    readonly expand?: 'block' | 'full';
+    /**
+     * Whether the button is disabled.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Whether to use a stronger font weight.
+     */
+    readonly strong?: boolean;
+    /**
+     * Whether to hide the dropdown chevron icon for dropdown type buttons.
+     * Only applies when `type` is `ActionButtonType.Dropdown`.
+     * @default false
+     */
+    readonly hideDropdownIcon?: boolean;
+}
+
+/**
+ * @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!')
+ * };
+ * ```
+ */
+declare enum ActionButtonType {
+    /**
+     * Standard button with label and optional icon.
+     */
+    Default = "default",
+    /**
+     * Button displaying only an icon, no label.
+     */
+    IconOnly = "icon-only",
+    /**
+     * Button that opens a dropdown popover with child actions.
+     */
+    Dropdown = "dropdown"
+}
+
+/**
+ * @file Action button interface
+ * @description Main interface for configuring action buttons
+ */
+
+/**
+ * Interface representing an action button configuration.
+ *
+ * @typeParam T - The type of data passed to the handler function. Defaults to `void`.
+ *
+ * @example
+ * ```typescript
+ * // Simple button
+ * const saveButton: ActionButton = {
+ *   id: 'save',
+ *   label: 'Save',
+ *   icon: 'saveOutline',
+ *   type: ActionButtonType.Default,
+ *   handler: () => console.log('Saved!')
+ * };
+ *
+ * // Async button with auto-loading
+ * const submitButton: ActionButton = {
+ *   id: 'submit',
+ *   label: 'Submit',
+ *   type: ActionButtonType.Default,
+ *   handler: async () => {
+ *     await api.submit();
+ *   }
+ * };
+ *
+ * // Dropdown button with children
+ * const menuButton: ActionButton = {
+ *   id: 'menu',
+ *   label: 'Actions',
+ *   type: ActionButtonType.Dropdown,
+ *   handler: () => {}, // Not called for dropdowns
+ *   children: [
+ *     { id: 'edit', label: 'Edit', type: ActionButtonType.Default, handler: () => edit() },
+ *     { id: 'delete', label: 'Delete', type: ActionButtonType.Default, handler: () => delete() }
+ *   ]
+ * };
+ *
+ * // Button with generic data parameter
+ * const itemButton: ActionButton<Item> = {
+ *   id: 'select',
+ *   label: 'Select',
+ *   type: ActionButtonType.Default,
+ *   handler: (item) => selectItem(item)
+ * };
+ * ```
+ */
+interface ActionButton<T = void> {
+    /**
+     * Unique identifier for the button.
+     */
+    readonly id: string;
+    /**
+     * Icon name to display in the button.
+     * Should be an Ionicon name registered with `addIcons()`.
+     */
+    readonly icon?: string;
+    /**
+     * Text label to display in the button.
+     * Required for `Default` type, optional for `IconOnly` and `Dropdown`.
+     */
+    readonly label?: string;
+    /**
+     * Handler function called when the button is clicked.
+     * Can be synchronous or asynchronous. For async handlers,
+     * the component will automatically manage the loading state.
+     *
+     * @param data - Optional data parameter of type T
+     * @returns void or Promise<void>
+     */
+    readonly handler: (data?: T) => void | Promise<void>;
+    /**
+     * External loading state. When true, the button shows a loading spinner.
+     * The component also manages an internal loading state for async handlers.
+     * The button shows loading if either this or the internal state is true.
+     */
+    readonly loading?: boolean;
+    /**
+     * Child action buttons for dropdown menus.
+     * Only used when `type` is `ActionButtonType.Dropdown`.
+     */
+    readonly children?: readonly ActionButton<T>[];
+    /**
+     * The display type of the button.
+     */
+    readonly type: ActionButtonType;
+    /**
+     * Optional configuration for button styling.
+     */
+    readonly config?: ActionButtonConfig;
+    /**
+     * Accessible label for screen readers.
+     * Recommended for `IconOnly` buttons.
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Tooltip text shown on hover.
+     */
+    readonly tooltip?: string;
+}
+
 /**
  * TestService - Example service using Angular Signals for reactive state management.
  * Provided in root, demonstrating singleton service pattern with signal-based state.
@@ -140,5 +344,216 @@ declare class TestCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TestCardComponent, "maki-test-card", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "editClick": "editClick"; "deleteClick": "deleteClick"; }, never, never, true, never>;
 }
 
-export { TestCardComponent, TestClass, TestService };
-export type { TestInterface };
+/**
+ * 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
+ */
+declare class ActionButtonListComponent {
+    /**
+     * Reference to ActionButtonType.Dropdown for template comparison.
+     * @internal
+     */
+    protected readonly dropdownType = ActionButtonType.Dropdown;
+    /**
+     * Popover controller for dismissing the popover when an item is selected.
+     */
+    private readonly popoverCtrl;
+    /**
+     * Internal signal to store buttons passed via componentProps.
+     * PopoverController.create() sets properties directly, bypassing signal inputs.
+     */
+    private readonly _buttonsFromProps;
+    /**
+     * The list of action buttons to display (when used via template binding).
+     */
+    readonly buttons: _angular_core.InputSignal<readonly ActionButton<void>[]>;
+    /**
+     * Computed button list that works with both signal input and componentProps.
+     * PopoverController passes buttons as a direct property, not through Angular's input system.
+     */
+    protected readonly buttonList: () => readonly ActionButton[];
+    /**
+     * 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: readonly ActionButton[]);
+    /**
+     * Emits when a button is selected from the list.
+     */
+    readonly buttonSelect: _angular_core.OutputEmitterRef<ActionButton<void>>;
+    constructor();
+    /**
+     * Handles click on a button item.
+     * Emits the selected button and dismisses the popover.
+     *
+     * @param button - The clicked action button
+     */
+    protected onButtonClick(button: ActionButton): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActionButtonListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionButtonListComponent, "maki-action-button-list", never, { "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; }, { "buttonSelect": "buttonSelect"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class ButtonComponent {
+    /**
+     * Popover controller for creating dropdown popovers.
+     */
+    private readonly popoverCtrl;
+    /**
+     * Internal loading state for async handler execution.
+     */
+    private readonly _isLoading;
+    /**
+     * The action button configuration.
+     */
+    readonly button: _angular_core.InputSignal<ActionButton<void>>;
+    /**
+     * Emits when the button is clicked (for non-dropdown buttons).
+     * Emits the button configuration that was clicked.
+     */
+    readonly buttonClick: _angular_core.OutputEmitterRef<ActionButton<void>>;
+    /**
+     * Emits when a child button is selected from a dropdown.
+     * Only emits for `ActionButtonType.Dropdown` buttons.
+     */
+    readonly childSelect: _angular_core.OutputEmitterRef<ActionButton<void>>;
+    /**
+     * Combined loading state from external prop and internal async state.
+     */
+    readonly isLoading: _angular_core.Signal<boolean>;
+    /**
+     * Whether the button is disabled (from config or loading state).
+     */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    /**
+     * Determines the slot for the icon based on button type and label presence.
+     */
+    readonly iconSlot: _angular_core.Signal<"icon-only" | "start">;
+    /**
+     * Whether to show the label text.
+     */
+    readonly showLabel: _angular_core.Signal<string | false | undefined>;
+    /**
+     * Whether to show the dropdown chevron icon.
+     */
+    readonly showDropdownIcon: _angular_core.Signal<boolean>;
+    constructor();
+    /**
+     * 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
+     */
+    protected onClick(event: Event): Promise<void>;
+    /**
+     * Opens a dropdown popover with child action buttons.
+     *
+     * @param event - The triggering click event for popover positioning
+     */
+    private openDropdown;
+    /**
+     * Executes a button's handler with automatic loading state management.
+     *
+     * @param btn - The button whose handler to execute
+     */
+    private executeHandler;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "maki-button", never, { "button": { "alias": "button"; "required": true; "isSignal": true; }; }, { "buttonClick": "buttonClick"; "childSelect": "childSelect"; }, never, never, true, never>;
+}
+
+export { ActionButtonListComponent, ActionButtonType, ButtonComponent, TestCardComponent, TestClass, TestService };
+export type { ActionButton, ActionButtonConfig, TestInterface };