// #region Imports
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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
import { Slottable } from '../../../Behaviors/Slottable';
import { Themeable } from '../../../Behaviors/Themeable';
import { addInheritanceConsumerController } from '../../../Controllers/InheritanceConsumerController';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { CustomElement } from '../../Abstracts/CustomElement';
import { FLOW_BOARD_COLUMN_INHERITANCE_CONTEXT } from './FlowBoardColumnInheritanceContext';
import { flowBoardColumnItemComposerElementTemplate } from './FlowBoardColumnItemComposerElementTemplate';
import { addFlowBoardComposerController } from './FlowBoardComposerController';
import { flowBoardColumnItemComposerElementCosmopolitanStyle } from './Themes/FlowBoardColumnItemComposerElement.Cosmopolitan';
import { flowBoardColumnItemComposerElementJoyStyle } from './Themes/FlowBoardColumnItemComposerElement.Joy';
import { flowBoardColumnItemComposerElementMemphisStyle } from './Themes/FlowBoardColumnItemComposerElement.Memphis';
// #endregion
/**
 * FlowBoardColumnItemComposer - A composer for creating new items in a FlowBoard column.
 *
 * @description
 * Provides a trigger+form pattern for adding new items to a column.
 * This component is completely data-agnostic - it accepts any data structure.
 * The user provides their own form fields via the `form` slot.
 *
 * @name FlowBoardColumnItemComposerElement
 * @element mosaik-flow-board-column-item-composer
 * @category Layouts
 *
 * @slot form - The form content for creating new items (completely user-defined)
 * @slot trigger - The trigger element that opens the form (e.g., "Add another item" button)
 *
 * @csspart container - The main container element
 * @csspart form - The form section wrapper
 * @csspart trigger - The trigger section wrapper
 *
 * @cssprop {String} --flow-board-column-item-composer-background-color - The board column item composer background color CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-border-radius - The board column item composer border radius CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-focus-ring-active-width - The board column item composer focus ring active width CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-focus-ring-color - The board column item composer focus ring color CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-focus-ring-inward-offset - The board column item composer focus ring inward offset CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-focus-ring-outward-offset - The board column item composer focus ring outward offset CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-font-family - The board column item composer font family CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-font-letter-spacing - The board column item composer font letter spacing CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-font-line-height - The board column item composer font line height CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-font-size - The board column item composer font size CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-font-text-decoration - The board column item composer font text decoration CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-font-text-transform - The board column item composer font text transform CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-font-weight - The board column item composer font weight CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-foreground-color - The board column item composer foreground color CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-gap - The board column item composer gap CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-padding - The board column item composer padding CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-padding-bottom - The board column item composer padding bottom CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-padding-left - The board column item composer padding left CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-padding-right - The board column item composer padding right CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-padding-top - The board column item composer padding top CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-shadow - The board column item composer shadow CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-shadow-blur - The board column item composer shadow blur CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-shadow-color - The board column item composer shadow color CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-shadow-offset-x - The board column item composer shadow offset x CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-shadow-offset-y - The board column item composer shadow offset y CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-shadow-spread - The board column item composer shadow spread CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-transition-duration - The board column item composer transition duration CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-transition-mode - The board column item composer transition mode CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-transition-property - The board column item composer transition property CSS custom property.
 * @cssprop {String} --flow-board-column-item-composer-translate - The board column item composer translate CSS custom property.
 *
 * @fires flowBoardBeforeItemCreate {FlowBoardBeforeItemCreateEvent} - Fired before item creation (cancelable)
 * @fires flowBoardItemCreate {FlowBoardItemCreateEvent} - Fired when item is created with user-defined data
 *
 * @example
 * Basic usage with simple form:
 * ```html
 * <mosaik-flow-board-column-item-composer id="composer" slot="footer">
 *   <mosaik-button slot="trigger" label="Add item"></mosaik-button>
 *   <div slot="form">
 *     <mosaik-textbox id="title" placeholder="Enter title…"></mosaik-textbox>
 *     <mosaik-button id="add" label="Add"></mosaik-button>
 *   </div>
 * </mosaik-flow-board-column-item-composer>
 *
 * <script>
 *   document.getElementById('add').addEventListener('click', () => {
 *     const composer = document.getElementById('composer');
 *     const title = document.getElementById('title').value;
 *     composer.create({ title });
 *   });
 * </script>
 * ```
 *
 * @public
 *
 * @remarks
 * The composer emits generic `create` events with user-defined data:
 * - Element properties (title, description, labels, etc.)
 * - Metadata (userId, tags, priority, appointments, custom fields, etc.)
 * - Any other data the application needs
 */
let FlowBoardColumnItemComposerElement = class FlowBoardColumnItemComposerElement extends Themeable(Slottable(CustomElement)) {
    // #region Fields
    _composerController;
    _flowBoardBeforeItemCreate;
    _flowBoardItemCreate;
    _inheritance;
    // #endregion
    // #region Ctor
    /**
     * Constructs a new instance of the `FlowBoardColumnItemComposerElement` class.
     *
     * @public
     */
    constructor() {
        super();
        this._composerController = addFlowBoardComposerController(this);
        this._flowBoardBeforeItemCreate = new HTMLElementEventEmitter(this, 'flowBoardBeforeItemCreate');
        this._flowBoardItemCreate = new HTMLElementEventEmitter(this, 'flowBoardItemCreate');
        this._inheritance = addInheritanceConsumerController(this, {
            context: FLOW_BOARD_COLUMN_INHERITANCE_CONTEXT
        });
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-flow-board-column-item-composer';
    }
    /**
     * Gets or sets whether the composer form is open.
     *
     * @public
     * @attr
     */
    get open() {
        return this._composerController.open;
    }
    set open(value) {
        this._composerController.open = value;
    }
    /**
     * Gets the column key from the parent column (via inheritance).
     * Useful for identifying which column the item is being added to.
     *
     * @public
     * @readonly
     */
    get columnKey() {
        return this._inheritance.get('columnKey', '');
    }
    // #endregion
    // #region Methods
    /**
     * Creates a new item with the provided data.
     * Emits flowBoardBeforeItemCreate (cancelable) and flowBoardItemCreate events.
     *
     * @param data The data for the new item (completely user-defined)
     * @returns True if created, false if canceled
     *
     * @public
     */
    create(data) {
        const beforeDetail = {
            columnKey: this.columnKey,
            data,
            cancel: false
        };
        this._flowBoardBeforeItemCreate.emit(beforeDetail);
        if (beforeDetail.cancel) {
            return false;
        }
        const detail = {
            columnKey: this.columnKey,
            data
        };
        this._flowBoardItemCreate.emit(detail);
        // Close the composer
        this._composerController.close();
        return true;
    }
    /**
     * Toggles the composer between open and closed state.
     *
     * @public
     */
    toggle() {
        this._composerController.toggle();
    }
    /**
     * Closes the composer form.
     *
     * @public
     */
    close() {
        this._composerController.close();
    }
    /**
     * Handles keyboard events in the form.
     * Pressing Escape closes the form.
     *
     * @param evt - The keyboard event.
     *
     * @internal
     */
    handleFormKeydown(evt) {
        this._composerController.handleFormKeydown(evt);
    }
};
__decorate([
    Attribute({ type: Boolean }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], FlowBoardColumnItemComposerElement.prototype, "open", null);
FlowBoardColumnItemComposerElement = __decorate([
    Component({
        selector: 'mosaik-flow-board-column-item-composer',
        template: flowBoardColumnItemComposerElementTemplate,
        themes: {
            joy: flowBoardColumnItemComposerElementJoyStyle,
            cosmopolitan: flowBoardColumnItemComposerElementCosmopolitanStyle,
            memphis: flowBoardColumnItemComposerElementMemphisStyle
        },
        host: {
            slot: 'footer'
        },
        options: {
            mode: 'open',
            delegatesFocus: true
        }
    }),
    __metadata("design:paramtypes", [])
], FlowBoardColumnItemComposerElement);
export { FlowBoardColumnItemComposerElement };
//# sourceMappingURL=FlowBoardColumnItemComposerElement.js.map