// #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);
};
var FlowBoardColumnItemElement_1;
import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
import { DragController } from '../../../../DragDrop';
import { EID } from '../../../../Utilities/EId.js';
import { Appearanceable } from '../../../Behaviors/Appearanceable.js';
import { Disableable } from '../../../Behaviors/Disableable.js';
import { Focusable } from '../../../Behaviors/Focusable.js';
import { Rippleable } from '../../../Behaviors/Rippleable.js';
import { Slottable } from '../../../Behaviors/Slottable.js';
import { Themeable } from '../../../Behaviors/Themeable.js';
import { Valueable } from '../../../Behaviors/Valueable.js';
import { Variantable } from '../../../Behaviors/Variantable.js';
import { addInheritanceConsumerController } from '../../../Controllers/InheritanceConsumerController.js';
import { addSlotController } from '../../../Controllers/SlotController.js';
import { Attribute } from '../../../Decorators/AttributeDecorator.js';
import { Component } from '../../../Decorators/ComponentDecorator.js';
import { Watch } from '../../../Decorators/WatchDecorator.js';
import { CustomElement } from '../../Abstracts/CustomElement.js';
import { RippleElement } from '../../Effects/Ripple/RippleElement';
import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement.js';
import { FLOW_BOARD_COLUMN_INHERITANCE_CONTEXT } from './FlowBoardColumnInheritanceContext.js';
import { flowBoardColumnItemElementTemplate } from './FlowBoardColumnItemElementTemplate.js';
import { IFlowBoardColumnItemElementProps } from './IFlowBoardColumnItemElementProps.js';
import { flowBoardColumnItemElementCosmopolitanStyle } from './Themes/FlowBoardColumnItemElement.Cosmopolitan.js';
import { flowBoardColumnItemElementJoyStyle } from './Themes/FlowBoardColumnItemElement.Joy.js';
import { flowBoardColumnItemElementMemphisStyle } from './Themes/FlowBoardColumnItemElement.Memphis.js';
// #endregion
/**
 * FlowBoardColumnItem - An item within a FlowBoard column.
 *
 * Represents a draggable/reorderable item in a FlowBoard column.
 * Supports pinning, activation events, and custom slot content.
 *
 * @name FlowBoardColumnItemElement
 * @element mosaik-flow-board-column-item
 * @category Layouts
 *
 * @slot title - The title content of the item
 * @slot subtitle - The subtitle content of the item
 * @slot actions - Action buttons or links related to the item
 * @slot meta - Additional metadata like price or status
 * @slot footer - Footer content with actions or avatars
 *
 * @csspart container - The main container element
 * @csspart header - The header section containing title and subtitle
 * @csspart titleGroup - The wrapper around title and subtitle for layout purposes
 * @csspart title - The title section
 * @csspart subtitle - The subtitle section
 * @csspart meta - The meta information section
 * @csspart footer - The footer section
 *
 * @cssprop {Color} --flow-board-item-background-color - Background color of the item
 * @cssprop {String} --flow-board-item-border-radius - Border radius of the item
 * @cssprop {String} --flow-board-item-padding - Internal padding
 * @cssprop {String} --flow-board-item-gap - Gap between sections
 *
 * @fires flowBoardBeforeItemActivate {FlowBoardBeforeItemActivateEvent} - Fired before item activation
 * @fires flowBoardItemActivate {FlowBoardItemActivateEvent} - Fired when item is activated
 * @fires flowBoardBeforeItemPinChange {FlowBoardBeforeItemPinChangeEvent} - Fired before pin state changes
 * @fires flowBoardItemPinChange {FlowBoardItemPinChangeEvent} - Fired when pin state changes
 *
 * @dependency {FocusRingElement} - Keyboard focus indicator component
 * @dependency {RippleElement} - Click/tap ripple effect component
 *
 * @example
 * ```html
 * <mosaik-flow-board-column-item item-key="task-1" draggable reorderable>
 *   <div slot="title">Task Title</div>
 *   <div slot="subtitle">Project Name</div>
 *   <div slot="meta"><mark>High</mark></div>
 *   <div slot="footer"><mosaik-avatar size="xs"></mosaik-avatar></div>
 * </mosaik-flow-board-column-item>
 * ```
 *
 * @public
 */
let FlowBoardColumnItemElement = FlowBoardColumnItemElement_1 = class FlowBoardColumnItemElement extends Themeable(Rippleable(Slottable(Focusable(Disableable(Variantable(Valueable(Appearanceable(CustomElement)))))))) {
    // #region Fields
    _itemKey;
    _isDraggable;
    _reorderable;
    _pinned;
    _flowBoardBeforeItemActivate;
    _flowBoardItemActivate;
    _flowBoardBeforeItemPinChange;
    _flowBoardItemPinChange;
    _slotController;
    _inheritance;
    _dragCtrl;
    // #endregion
    // #region Ctor
    /**
     * Constructs a new instance of the `FlowBoardColumnItemElement` class.
     *
     * @public
     */
    constructor() {
        super();
        this._itemKey = IFlowBoardColumnItemElementProps.DEFAULTS.itemKey;
        this._isDraggable = IFlowBoardColumnItemElementProps.DEFAULTS.draggable;
        this._reorderable = IFlowBoardColumnItemElementProps.DEFAULTS.reorderable;
        this._pinned = IFlowBoardColumnItemElementProps.DEFAULTS.pinned;
        this._flowBoardBeforeItemActivate = new HTMLElementEventEmitter(this, 'flowBoardBeforeItemActivate');
        this._flowBoardItemActivate = new HTMLElementEventEmitter(this, 'flowBoardItemActivate');
        this._flowBoardBeforeItemPinChange = new HTMLElementEventEmitter(this, 'flowBoardBeforeItemPinChange');
        this._flowBoardItemPinChange = new HTMLElementEventEmitter(this, 'flowBoardItemPinChange');
        this._slotController = addSlotController(this);
        this._inheritance = addInheritanceConsumerController(this, {
            context: FLOW_BOARD_COLUMN_INHERITANCE_CONTEXT
        });
        this._dragCtrl = new DragController(this, {
            disabled: true
        });
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-flow-board-column-item';
    }
    /**
     * Gets or sets the unique key for the item.
     * If not provided, a key will be generated on connect.
     *
     * @public
     * @attr item-key
     */
    get itemKey() {
        return this._itemKey;
    }
    set itemKey(value) {
        if (this._itemKey !== value) {
            this._itemKey = value;
            this.requestUpdate('itemKey');
        }
    }
    /**
     * Gets or sets whether the item can be dragged.
     * This attribute must be present along with `reorderable` for the item to be movable.
     *
     * @public
     * @attr
     */
    get draggable() {
        return this._isDraggable;
    }
    set draggable(value) {
        if (this._isDraggable !== value) {
            this._isDraggable = value;
            this.requestUpdate('draggable');
        }
    }
    /**
     * Gets or sets whether the item can be reordered.
     *
     * @public
     * @attr
     */
    get reorderable() {
        return this._reorderable;
    }
    set reorderable(value) {
        if (this._reorderable !== value) {
            this._reorderable = value;
            this.requestUpdate('reorderable');
        }
    }
    /**
     * Gets or sets whether the item is pinned (fixed at top of column).
     * Pinned items cannot be dragged and always render before non-pinned items.
     *
     * @public
     * @attr
     */
    get pinned() {
        return this._pinned;
    }
    set pinned(value) {
        if (this._pinned !== value) {
            this._pinned = value;
            this.requestUpdate('pinned');
        }
    }
    /**
     * Gets the column key from the parent column.
     *
     * @public
     * @readonly
     */
    get columnKey() {
        return this._inheritance.get('columnKey', '');
    }
    /**
     * Whether the item can currently be dragged.
     * Returns true only if draggable, reorderable, and not pinned.
     *
     * @public
     * @readonly
     */
    get canDrag() {
        return this._isDraggable && this._reorderable && !this._pinned;
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        // Generate key if not provided
        if (!this._itemKey) {
            this._itemKey = EID.next(FlowBoardColumnItemElement_1.is);
        }
        // Update drag controller state
        this._dragCtrl.disabled = !this.canDrag;
        this.on('click', (e) => {
            const target = e.target;
            if (target.closest('button, a, input, [role="button"]')) {
                return;
            }
            this.activate('click');
        });
        this.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.activate('keyboard');
            }
        });
    }
    /**
     * Returns this item's DragRef for registration with a parent DropList.
     *
     * @public
     * @returns The DragRef or null.
     */
    getDragRef() {
        return this._dragCtrl.dragRef;
    }
    /**
     * Activates the item, triggering the appropriate events.
     *
     * @public
     * @param trigger The trigger for the activation.
     */
    activate(trigger) {
        const beforeDetail = {
            itemKey: this._itemKey,
            columnKey: this.columnKey,
            trigger,
            cancel: false
        };
        this._flowBoardBeforeItemActivate.emit(beforeDetail);
        if (beforeDetail.cancel) {
            return;
        }
        this._flowBoardItemActivate.emit({
            itemKey: this._itemKey,
            columnKey: this.columnKey,
            trigger
        });
    }
    /**
     * Pins the item, making it fixed at the top of the column.
     *
     * @public
     */
    pin() {
        if (this._pinned) {
            return;
        }
        const beforeDetail = {
            itemKey: this._itemKey,
            columnKey: this.columnKey,
            pinned: true,
            cancel: false
        };
        this._flowBoardBeforeItemPinChange.emit(beforeDetail);
        if (beforeDetail.cancel) {
            return;
        }
        this._pinned = true;
        this.requestUpdate('pinned');
        this._flowBoardItemPinChange.emit({
            itemKey: this._itemKey,
            columnKey: this.columnKey,
            pinned: true
        });
    }
    /**
     * Unpins the item, allowing it to be reordered with other items.
     *
     * @public
     */
    unpin() {
        if (!this._pinned) {
            return;
        }
        const beforeDetail = {
            itemKey: this._itemKey,
            columnKey: this.columnKey,
            pinned: false,
            cancel: false
        };
        this._flowBoardBeforeItemPinChange.emit(beforeDetail);
        if (beforeDetail.cancel) {
            return;
        }
        this._pinned = false;
        this.requestUpdate('pinned');
        this._flowBoardItemPinChange.emit({
            itemKey: this._itemKey,
            columnKey: this.columnKey,
            pinned: false
        });
    }
    onPinnedChanged(_prev, _next) {
        // Update host attributes for styling
        if (this._pinned) {
            this.setAttribute('pinned', '');
        }
        else {
            this.removeAttribute('pinned');
        }
    }
};
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], FlowBoardColumnItemElement.prototype, "itemKey", null);
__decorate([
    Attribute({ type: Boolean }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], FlowBoardColumnItemElement.prototype, "draggable", null);
__decorate([
    Attribute({ type: Boolean }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], FlowBoardColumnItemElement.prototype, "reorderable", null);
__decorate([
    Attribute({ type: Boolean }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], FlowBoardColumnItemElement.prototype, "pinned", null);
__decorate([
    Watch('pinned'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
], FlowBoardColumnItemElement.prototype, "onPinnedChanged", null);
FlowBoardColumnItemElement = FlowBoardColumnItemElement_1 = __decorate([
    Component({
        selector: 'mosaik-flow-board-column-item',
        template: flowBoardColumnItemElementTemplate,
        themes: {
            joy: flowBoardColumnItemElementJoyStyle,
            cosmopolitan: flowBoardColumnItemElementCosmopolitanStyle,
            memphis: flowBoardColumnItemElementMemphisStyle
        },
        host: {
            tabIndex: '0'
        },
        imports: [
            FocusRingElement,
            RippleElement
        ]
    }),
    __metadata("design:paramtypes", [])
], FlowBoardColumnItemElement);
export { FlowBoardColumnItemElement };
//# sourceMappingURL=FlowBoardColumnItemElement.js.map