// #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 { DomServiceLocator } from '../../../../Dom/Dom';
import { Listen } from '../../../../events/Decorators/ListenDecorator';
import { Disableable } from '../../../Behaviors/Disableable';
import { Focusable } from '../../../Behaviors/Focusable';
import { Rippleable } from '../../../Behaviors/Rippleable';
import { Themeable } from '../../../Behaviors/Themeable';
import { Valueable } from '../../../Behaviors/Valueable';
import { Variantable } from '../../../Behaviors/Variantable';
import { addInheritanceConsumerController } from '../../../Controllers/InheritanceConsumerController';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { SelectionMode } from '../../../Types/SelectionMode';
import { RippleElement } from '../../Effects/Ripple/RippleElement';
import { CheckmarkElement } from '../../Primitives/Checkmark/CheckmarkElement';
import { TextElement } from '../../Primitives/Text/TextElement';
import { SelectorItemElement } from '../Abstracts/Selector/SelectorItemElement';
import { ListElement } from './ListElement';
import { LIST_INHERITANCE_CONTEXT } from './ListInheritanceContext';
import { listItemElementTemplate } from './ListItemElementTemplate';
import { listItemElementCosmopolitanStyle } from './Themes/ListItemElement.Cosmopolitan';
import { listItemElementJoyStyle } from './Themes/ListItemElement.Joy';
import { listItemElementMemphisStyle } from './Themes/ListItemElement.Memphis';
// #endregion
/**
 * List Item - An interactive item within a list component supporting selection and various content layouts.
 *
 * @description
 * The List Item component represents an individual selectable item within a List container.
 * It supports multiple selection modes (none, single, multiple), displays optional checkmarks
 * for multi-select scenarios, and includes interactive features like ripple effects and focus
 * indicators. List items can contain prefix and suffix content slots for icons, avatars, or
 * action buttons, making them highly versatile for different use cases such as contact lists,
 * settings menus, or navigation items.
 *
 * @name List Item
 * @element mosaik-list-item
 * @category Selectors
 *
 * @slot - The default slot for the main list item content
 * @slot prefix - Content displayed before the main content (e.g., avatar, icon)
 * @slot suffix - Content displayed after the main content (e.g., badge, action button)
 *
 * @csspart checkmark - The selection checkmark indicator (visible in multiple selection mode)
 * @csspart content - The main content container
 * @csspart focusRing - The focus indicator ring for keyboard navigation
 * @csspart inner - The inner content wrapper
 * @csspart prefix - The prefix content container
 * @csspart ripple - The ripple part.
 * @csspart suffix - The suffix content container
 *
 * @cssprop {String} --list-item-background-color - The background fill color
 * @cssprop {String} --list-item-border-color - The border color
 * @cssprop {String} --list-item-border-radius - The corner rounding radius
 * @cssprop {String} --list-item-border-style - The border line style
 * @cssprop {String} --list-item-border-width - The border thickness
 * @cssprop {String} --list-item-focus-ring-active-width - The item focus ring active width CSS custom property.
 * @cssprop {String} --list-item-focus-ring-color - The item focus ring color CSS custom property.
 * @cssprop {String} --list-item-focus-ring-inward-offset - The item focus ring inward offset CSS custom property.
 * @cssprop {String} --list-item-focus-ring-outward-offset - The item focus ring outward offset CSS custom property.
 * @cssprop {String} --list-item-font-family - The font family for list item text
 * @cssprop {String} --list-item-font-letter-spacing - The letter spacing for list item text
 * @cssprop {String} --list-item-font-line-height - The line height for list item text
 * @cssprop {String} --list-item-font-size - The font size for list item text
 * @cssprop {String} --list-item-font-text-decoration - The text decoration style
 * @cssprop {String} --list-item-font-text-transform - The text transformation style
 * @cssprop {String} --list-item-font-weight - The font weight for list item text
 * @cssprop {String} --list-item-foreground-color - The text and icon color
 * @cssprop {String} --list-item-gap - The spacing between prefix, content, and suffix
 * @cssprop {String} --list-item-padding-bottom - The bottom padding inside the list item
 * @cssprop {String} --list-item-padding-left - The left padding inside the list item
 * @cssprop {String} --list-item-padding-right - The right padding inside the list item
 * @cssprop {String} --list-item-padding-top - The top padding inside the list item
 * @cssprop {Color} --list-item-ripple-color - The item ripple color CSS custom property.
 * @cssprop {String} --list-item-ripple-duration - The item ripple duration CSS custom property.
 * @cssprop {String} --list-item-shadow - The drop shadow or elevation effect
 * @cssprop {String} --list-item-shadow-blur - The item shadow blur CSS custom property.
 * @cssprop {String} --list-item-shadow-color - The item shadow color CSS custom property.
 * @cssprop {String} --list-item-shadow-offset-x - The item shadow offset x CSS custom property.
 * @cssprop {String} --list-item-shadow-offset-y - The item shadow offset y CSS custom property.
 * @cssprop {String} --list-item-shadow-spread - The item shadow spread CSS custom property.
 * @cssprop {String} --list-item-transition-duration - The duration of hover/focus transitions
 * @cssprop {String} --list-item-transition-mode - The timing function for transitions
 * @cssprop {String} --list-item-transition-property - The CSS properties to transition
 * @cssprop {String} --list-item-translate - The item translate CSS custom property.
 *
 * @fires selected {SelectedEvent} - Fired when the list item is selected
 * @fires deselected {DeselectedEvent} - Fired when the list item is deselected
 * @fires connected {ConnectedEvent} - Fired when connected to the DOM
 * @fires changed {PropertyChangedEvent} - Fired when properties change
 *
 * @dependency mosaik-checkmark - The Checkmark element.
 * @dependency mosaik-focus-ring - The Focus Ring element.
 * @dependency mosaik-ripple - The Ripple element.
 *
 * @example
 * Basic list item with text:
 * ```html
 * <mosaik-list-item>Simple list item</mosaik-list-item>
 * ```
 *
 * @example
 * List item with prefix icon and suffix badge:
 * ```html
 * <mosaik-list-item>
 *   <mosaik-icon slot="prefix"></mosaik-icon>
 *   John Doe
 *   <mosaik-badge slot="suffix">5</mosaik-badge>
 * </mosaik-list-item>
 * ```
 *
 * @example
 * Selectable list item with prefix slot and value:
 * ```html
 * <mosaik-list-item value="user-123" variant="primary">
 *   <mosaik-icon slot="prefix"></mosaik-icon>
 *   <div>
 *     <div>John Doe</div>
 *     <small>john@example.com</small>
 *   </div>
 * </mosaik-list-item>
 * ```
 *
 * @public
 */
let ListItemElement = class ListItemElement extends Themeable(Rippleable(Disableable(Valueable(Variantable(Focusable(SelectorItemElement)))))) {
    // #region Fields
    _inheritance = addInheritanceConsumerController(this, {
        context: LIST_INHERITANCE_CONTEXT
    });
    _isChecked;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._isChecked = false;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @override
     * @readonly
     */
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    static get is() {
        return 'mosaik-list-item';
    }
    /**
     * Gets or sets the `isChecked` property.
     *
     * @public
     */
    get isChecked() {
        return this._isChecked;
    }
    set isChecked(value) {
        if (this._isChecked !== value) {
            this._isChecked = value;
            this.requestUpdate('isChecked');
        }
    }
    /**
     * Gets the `parent` list of this item.
     *
     * @protected
     * @readonly
     */
    get parent() {
        return DomServiceLocator.current.findAncestor(this, ListElement.is, { strict: true });
    }
    // #endregion
    // #region Methods
    /**
     * @protected
     */
    onClick(event) {
        if (this.disabled) {
            return;
        }
        if (this === event.currentTarget) {
            if (!(this.parent.selectionMode === SelectionMode.Single || this.parent.selectionMode === SelectionMode.None)) {
                this.isChecked = !this._isChecked;
            }
        }
    }
};
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ListItemElement.prototype, "isChecked", null);
__decorate([
    Listen('click'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Event]),
    __metadata("design:returntype", void 0)
], ListItemElement.prototype, "onClick", null);
ListItemElement = __decorate([
    Component({
        selector: 'mosaik-list-item',
        template: listItemElementTemplate,
        themes: {
            joy: listItemElementJoyStyle,
            memphis: listItemElementMemphisStyle,
            cosmopolitan: listItemElementCosmopolitanStyle
        },
        imports: [
            CheckmarkElement,
            TextElement,
            RippleElement
        ]
    }),
    __metadata("design:paramtypes", [])
], ListItemElement);
export { ListItemElement };
//# sourceMappingURL=ListItemElement.js.map