var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { MelodicComponent } from '@melodicdev/core';
import { stackTemplate } from './stack.template.js';
import { stackStyles } from './stack.styles.js';
/**
 * ml-stack - Flexbox layout component for stacking elements
 *
 * @example
 * ```html
 * <ml-stack gap="4">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </ml-stack>
 *
 * <ml-stack direction="horizontal" gap="2" align="center">
 *   <ml-button>Save</ml-button>
 *   <ml-button variant="outline">Cancel</ml-button>
 * </ml-stack>
 * ```
 */
let StackComponent = class StackComponent {
    constructor() {
        /** Stack direction */
        this.direction = 'vertical';
        /** Gap between items (uses spacing scale: 1-12) */
        this.gap = '4';
        /** Cross-axis alignment */
        this.align = 'stretch';
        /** Main-axis justification */
        this.justify = 'start';
        /** Allow items to wrap */
        this.wrap = false;
    }
    getStyles() {
        const alignMap = {
            start: 'flex-start',
            center: 'center',
            end: 'flex-end',
            stretch: 'stretch',
            baseline: 'baseline'
        };
        const justifyMap = {
            start: 'flex-start',
            center: 'center',
            end: 'flex-end',
            between: 'space-between',
            around: 'space-around',
            evenly: 'space-evenly'
        };
        return {
            'flex-direction': this.direction === 'vertical' ? 'column' : 'row',
            gap: `var(--ml-space-${this.gap})`,
            'align-items': alignMap[this.align],
            'justify-content': justifyMap[this.justify],
            'flex-wrap': this.wrap ? 'wrap' : 'nowrap'
        };
    }
};
StackComponent = __decorate([
    MelodicComponent({
        selector: 'ml-stack',
        template: stackTemplate,
        styles: stackStyles,
        attributes: ['direction', 'gap', 'align', 'justify', 'wrap']
    })
], StackComponent);
export { StackComponent };
