import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property, state, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { UiElement } from '../../UiElement.js';
import { setDisabled } from '../../../lib/disabled.js';
import '../../focus-ring/ui-focus-ring.js';
import '../../ripple/ui-ripple.js';
export var ListItemLines;
(function (ListItemLines) {
    ListItemLines["one"] = "one";
    ListItemLines["two"] = "two";
    ListItemLines["three"] = "three";
    ListItemLines["auto"] = "auto";
})(ListItemLines || (ListItemLines = {}));
export var ListItemImage;
(function (ListItemImage) {
    ListItemImage["icon"] = "icon";
    ListItemImage["avatar"] = "avatar";
    ListItemImage["image"] = "image";
    ListItemImage["video"] = "video";
    ListItemImage["auto"] = "auto";
})(ListItemImage || (ListItemImage = {}));
let UiListItem = (() => {
    let _classSuper = UiElement;
    let _instanceExtraInitializers = [];
    let _ripple_decorators;
    let _ripple_initializers = [];
    let _ripple_extraInitializers = [];
    let _set_lines_decorators;
    let _disabled_decorators;
    let _disabled_initializers = [];
    let _disabled_extraInitializers = [];
    let _image_decorators;
    let _image_initializers = [];
    let _image_extraInitializers = [];
    let _static_decorators;
    let _static_initializers = [];
    let _static_extraInitializers = [];
    let _tabIndex_decorators;
    let _tabIndex_initializers = [];
    let _tabIndex_extraInitializers = [];
    let _hasStartItem_decorators;
    let _hasStartItem_initializers = [];
    let _hasStartItem_extraInitializers = [];
    let _hasEndItem_decorators;
    let _hasEndItem_initializers = [];
    let _hasEndItem_extraInitializers = [];
    let _hasEndTextItem_decorators;
    let _hasEndTextItem_initializers = [];
    let _hasEndTextItem_extraInitializers = [];
    let _hasOverline_decorators;
    let _hasOverline_initializers = [];
    let _hasOverline_extraInitializers = [];
    let _hasSupportingText_decorators;
    let _hasSupportingText_initializers = [];
    let _hasSupportingText_extraInitializers = [];
    return class UiListItem extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _ripple_decorators = [query('ui-ripple')];
            _set_lines_decorators = [property({ type: String, reflect: true })];
            _disabled_decorators = [property({ type: Boolean, reflect: true })];
            _image_decorators = [property({ type: String, reflect: true })];
            _static_decorators = [property({ type: Boolean, reflect: true })];
            _tabIndex_decorators = [property({ type: Number, reflect: true })];
            _hasStartItem_decorators = [state()];
            _hasEndItem_decorators = [state()];
            _hasEndTextItem_decorators = [state()];
            _hasOverline_decorators = [state()];
            _hasSupportingText_decorators = [state()];
            __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
            __esDecorate(this, null, _set_lines_decorators, { kind: "setter", name: "lines", static: false, private: false, access: { has: obj => "lines" in obj, set: (obj, value) => { obj.lines = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
            __esDecorate(this, null, _image_decorators, { kind: "accessor", name: "image", static: false, private: false, access: { has: obj => "image" in obj, get: obj => obj.image, set: (obj, value) => { obj.image = value; } }, metadata: _metadata }, _image_initializers, _image_extraInitializers);
            __esDecorate(this, null, _static_decorators, { kind: "accessor", name: "static", static: false, private: false, access: { has: obj => "static" in obj, get: obj => obj.static, set: (obj, value) => { obj.static = value; } }, metadata: _metadata }, _static_initializers, _static_extraInitializers);
            __esDecorate(this, null, _tabIndex_decorators, { kind: "accessor", name: "tabIndex", static: false, private: false, access: { has: obj => "tabIndex" in obj, get: obj => obj.tabIndex, set: (obj, value) => { obj.tabIndex = value; } }, metadata: _metadata }, _tabIndex_initializers, _tabIndex_extraInitializers);
            __esDecorate(this, null, _hasStartItem_decorators, { kind: "accessor", name: "hasStartItem", static: false, private: false, access: { has: obj => "hasStartItem" in obj, get: obj => obj.hasStartItem, set: (obj, value) => { obj.hasStartItem = value; } }, metadata: _metadata }, _hasStartItem_initializers, _hasStartItem_extraInitializers);
            __esDecorate(this, null, _hasEndItem_decorators, { kind: "accessor", name: "hasEndItem", static: false, private: false, access: { has: obj => "hasEndItem" in obj, get: obj => obj.hasEndItem, set: (obj, value) => { obj.hasEndItem = value; } }, metadata: _metadata }, _hasEndItem_initializers, _hasEndItem_extraInitializers);
            __esDecorate(this, null, _hasEndTextItem_decorators, { kind: "accessor", name: "hasEndTextItem", static: false, private: false, access: { has: obj => "hasEndTextItem" in obj, get: obj => obj.hasEndTextItem, set: (obj, value) => { obj.hasEndTextItem = value; } }, metadata: _metadata }, _hasEndTextItem_initializers, _hasEndTextItem_extraInitializers);
            __esDecorate(this, null, _hasOverline_decorators, { kind: "accessor", name: "hasOverline", static: false, private: false, access: { has: obj => "hasOverline" in obj, get: obj => obj.hasOverline, set: (obj, value) => { obj.hasOverline = value; } }, metadata: _metadata }, _hasOverline_initializers, _hasOverline_extraInitializers);
            __esDecorate(this, null, _hasSupportingText_decorators, { kind: "accessor", name: "hasSupportingText", static: false, private: false, access: { has: obj => "hasSupportingText" in obj, get: obj => obj.hasSupportingText, set: (obj, value) => { obj.hasSupportingText = value; } }, metadata: _metadata }, _hasSupportingText_initializers, _hasSupportingText_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #ripple_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _ripple_initializers, void 0));
        get ripple() { return this.#ripple_accessor_storage; }
        set ripple(value) { this.#ripple_accessor_storage = value; }
        #lines = (__runInitializers(this, _ripple_extraInitializers), ListItemLines.one);
        get lines() {
            if (this.#lines === ListItemLines.auto) {
                return this.hasOverline || this.hasSupportingText ? ListItemLines.two : ListItemLines.one;
            }
            return this.#lines;
        }
        /**
         * The number of lines to render the list template for.
         * @default ListItemLines.one
         * @attribute
         */
        set lines(value) {
            const oldValue = this.#lines;
            this.#lines = value;
            this.requestUpdate('lines', oldValue);
        }
        #disabled_accessor_storage = __runInitializers(this, _disabled_initializers, false
        /**
         * The type of the list image.
         * @default ListItemImage.icon
         * @attribute
         */
        );
        /**
         * Whether the list item is disabled. The user can't interact with the list item when `true`.
         * @attribute
         */
        get disabled() { return this.#disabled_accessor_storage; }
        set disabled(value) { this.#disabled_accessor_storage = value; }
        #image_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _image_initializers, void 0));
        /**
         * The type of the list image.
         * @default ListItemImage.icon
         * @attribute
         */
        get image() { return this.#image_accessor_storage; }
        set image(value) { this.#image_accessor_storage = value; }
        #static_accessor_storage = (__runInitializers(this, _image_extraInitializers), __runInitializers(this, _static_initializers, false));
        /**
         * Whether the list item is static and should not be focusable.
         * The ripple effect will not be applied when `true`.
         * @default false
         * @attribute
         */
        get static() { return this.#static_accessor_storage; }
        set static(value) { this.#static_accessor_storage = value; }
        #tabIndex_accessor_storage = (__runInitializers(this, _static_extraInitializers), __runInitializers(this, _tabIndex_initializers, -1));
        get tabIndex() { return this.#tabIndex_accessor_storage; }
        set tabIndex(value) { this.#tabIndex_accessor_storage = value; }
        #hasStartItem_accessor_storage = (__runInitializers(this, _tabIndex_extraInitializers), __runInitializers(this, _hasStartItem_initializers, false));
        get hasStartItem() { return this.#hasStartItem_accessor_storage; }
        set hasStartItem(value) { this.#hasStartItem_accessor_storage = value; }
        #hasEndItem_accessor_storage = (__runInitializers(this, _hasStartItem_extraInitializers), __runInitializers(this, _hasEndItem_initializers, false));
        get hasEndItem() { return this.#hasEndItem_accessor_storage; }
        set hasEndItem(value) { this.#hasEndItem_accessor_storage = value; }
        #hasEndTextItem_accessor_storage = (__runInitializers(this, _hasEndItem_extraInitializers), __runInitializers(this, _hasEndTextItem_initializers, false));
        get hasEndTextItem() { return this.#hasEndTextItem_accessor_storage; }
        set hasEndTextItem(value) { this.#hasEndTextItem_accessor_storage = value; }
        #hasOverline_accessor_storage = (__runInitializers(this, _hasEndTextItem_extraInitializers), __runInitializers(this, _hasOverline_initializers, false));
        get hasOverline() { return this.#hasOverline_accessor_storage; }
        set hasOverline(value) { this.#hasOverline_accessor_storage = value; }
        #hasSupportingText_accessor_storage = (__runInitializers(this, _hasOverline_extraInitializers), __runInitializers(this, _hasSupportingText_initializers, false));
        get hasSupportingText() { return this.#hasSupportingText_accessor_storage; }
        set hasSupportingText(value) { this.#hasSupportingText_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _hasSupportingText_extraInitializers);
            this.image = ListItemImage.icon;
            this.lines = ListItemLines.one;
            this.addEventListener('click', this.handleClick.bind(this));
            this.addEventListener('pointerdown', this.handlePointerDown.bind(this));
            this.addEventListener('pointerup', this.handlePointerUp.bind(this));
            this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
            this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
            this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
            this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
            this.addEventListener('keydown', this.handleKeyDown.bind(this));
            this.addEventListener('keyup', this.handleKeyUp.bind(this));
        }
        updated(changedProperties) {
            super.updated(changedProperties);
            if (changedProperties.has('tabIndex') && (this.tabIndex === -1 || this.tabIndex === null)) {
                this.ripple?.endPress();
            }
        }
        connectedCallback() {
            super.connectedCallback();
            if (!this.hasAttribute('role')) {
                this.setAttribute('role', 'listitem');
            }
        }
        willUpdate(cp) {
            if (cp.has('disabled')) {
                setDisabled(this, cp.get('disabled'));
            }
        }
        handleKeyDown(e) {
            if (this.disabled) {
                e.stopPropagation();
                e.preventDefault();
                return;
            }
            if (this.static)
                return;
            if (e.key !== ' ' && e.key !== 'Enter')
                return;
            // do not prevent default, so that parent elements can handle the key event
            this.beginPress({ positionEvent: e });
        }
        handleKeyUp(e) {
            if (this.disabled) {
                e.stopPropagation();
                e.preventDefault();
                return;
            }
            if (this.static)
                return;
            if (e.key !== ' ' && e.key !== 'Enter')
                return;
            // do not prevent default, so that parent elements can handle the key event
            this.endPress({ cancelled: false, actionData: { item: this } });
        }
        beginPress(options) {
            if (this.disabled || this.static) {
                return;
            }
            super.beginPress(options);
            this.ripple.beginPress(options.positionEvent);
        }
        endPress(options) {
            if (this.disabled || this.static) {
                return;
            }
            super.endPress(options);
            this.ripple.endPress();
        }
        handlePointerEnter(e) {
            if (this.disabled || this.static) {
                e.stopPropagation();
                e.preventDefault();
                return;
            }
            this.ripple.beginHover(e);
        }
        handlePointerLeave(e) {
            if (this.disabled || this.static) {
                e.stopPropagation();
                e.preventDefault();
                return;
            }
            super.handlePointerLeave(e);
            this.ripple.endHover();
        }
        /**
         * Focuses list item and makes list item focusable via keyboard.
         */
        activate() {
            if (this.disabled || this.static) {
                return;
            }
            this.setAttribute('tabindex', '0');
            this.focus();
        }
        /**
         * Returns true if list item is currently focused and is focusable.
         */
        isActive() {
            if (this.disabled || this.static) {
                return false;
            }
            return this.getAttribute('tabindex') === '0';
        }
        /**
         * Removes list item from sequential keyboard navigation.
         */
        deactivate() {
            if (this.disabled || this.static) {
                return;
            }
            this.removeAttribute('tabindex');
        }
        _handleSlotChange(event) {
            const slot = event.target;
            return slot.assignedNodes({ flatten: true }).length > 0;
        }
        handleOverlineSlotChange(event) {
            this.hasOverline = this._handleSlotChange(event);
            this.requestUpdate();
        }
        handleSupportingTextSlotChange(event) {
            this.hasSupportingText = this._handleSlotChange(event);
            this.requestUpdate();
        }
        handleStartSlotChange(event) {
            this.hasStartItem = this._handleSlotChange(event);
            this.requestUpdate();
        }
        handleEndSlotChange(event) {
            this.hasEndItem = this._handleSlotChange(event);
            this.requestUpdate();
        }
        handleEndTextSlotChange(event) {
            this.hasEndTextItem = this._handleSlotChange(event);
            this.requestUpdate();
        }
        getSurfaceClasses() {
            const result = {
                'surface': true,
                'one-line': this.lines === ListItemLines.one,
                'two-lines': this.lines === ListItemLines.two,
                'three-lines': this.lines === ListItemLines.three,
            };
            return result;
        }
        render() {
            return html `
      ${this.renderFocusRing()} ${this.renderRipple()}
      <div class="${classMap(this.getSurfaceClasses())}" part="surface">
        ${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}
      </div>
    `;
        }
        renderRipple() {
            return html `<ui-ripple part="ripple" class="ripple" ?disabled="${this.disabled || this.static}"></ui-ripple>`;
        }
        renderFocusRing() {
            return html `<ui-focus-ring
      part="focus-ring"
      class="focus-ring"
      .control="${this}"
      inward
    ></ui-focus-ring>`;
        }
        getStartClasses() {
            return {
                'start': true,
                'has-start': this.hasStartItem,
            };
        }
        renderStart() {
            return html `<div class="${classMap(this.getStartClasses())}">
      <slot name="start" @slotchange=${this.handleStartSlotChange}></slot>
    </div>`;
        }
        getEndClasses() {
            return {
                'end': true,
                'has-end': this.hasEndItem,
                'has-end-text': this.hasEndTextItem,
            };
        }
        renderEnd() {
            return html `<div class="${classMap(this.getEndClasses())}">
      <slot name="end-text" class="trailing-supporting-text" @slotchange=${this.handleEndTextSlotChange}></slot>
      <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
    </div>`;
        }
        renderBody() {
            return html `
      <div class="body">
        <slot name="overline" @slotchange=${this.handleOverlineSlotChange}></slot>
        <span class="headline"><slot></slot></span>
        <span class="supporting-text"
          ><slot name="supporting-text" @slotchange=${this.handleSupportingTextSlotChange}></slot
        ></span>
      </div>
    `;
        }
    };
})();
/**
 * @slot - The main content of the list item, typically a label or title.
 * @slot overline - The text displayed above the main content.
 * @slot start - The content displayed at the start of the list item.
 * @slot end - The content displayed at the end of the list item.
 * @slot end-text - The text displayed at the end of the list item.
 * @slot supporting-text - The supporting text displayed below the main content.
 */
export default UiListItem;
//# sourceMappingURL=ListItem.js.map