import { __esDecorate, __runInitializers } from "tslib";
import { cancelEvent } from '@api-client/core/lib/events/Utils.js';
import { html, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { UiElement } from '../../UiElement.js';
import { close, arrowDropDown, check } from '../../icons/Icons.js';
import { setDisabled } from '../../../lib/disabled.js';
import '../../ripple/ui-ripple.js';
export var ChipType;
(function (ChipType) {
    ChipType["assist"] = "assist";
    ChipType["filter"] = "filter";
    ChipType["input"] = "input";
    ChipType["suggestion"] = "suggestion";
})(ChipType || (ChipType = {}));
let UiChip = (() => {
    let _classSuper = UiElement;
    let _disabled_decorators;
    let _disabled_initializers = [];
    let _disabled_extraInitializers = [];
    let _type_decorators;
    let _type_initializers = [];
    let _type_extraInitializers = [];
    let _elevated_decorators;
    let _elevated_initializers = [];
    let _elevated_extraInitializers = [];
    let _removable_decorators;
    let _removable_initializers = [];
    let _removable_extraInitializers = [];
    let _checked_decorators;
    let _checked_initializers = [];
    let _checked_extraInitializers = [];
    let _list_decorators;
    let _list_initializers = [];
    let _list_extraInitializers = [];
    let _ripple_decorators;
    let _ripple_initializers = [];
    let _ripple_extraInitializers = [];
    let _hasIcon_decorators;
    let _hasIcon_initializers = [];
    let _hasIcon_extraInitializers = [];
    let _hasAvatar_decorators;
    let _hasAvatar_initializers = [];
    let _hasAvatar_extraInitializers = [];
    return class UiChip extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _disabled_decorators = [property({ type: Boolean, reflect: true })];
            _type_decorators = [property({ type: String })];
            _elevated_decorators = [property({ type: Boolean, reflect: true })];
            _removable_decorators = [property({ type: Boolean, reflect: true })];
            _checked_decorators = [property({ type: Boolean, reflect: true })];
            _list_decorators = [property({ type: Boolean, reflect: true })];
            _ripple_decorators = [query('ui-ripple')];
            _hasIcon_decorators = [state()];
            _hasAvatar_decorators = [state()];
            __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, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
            __esDecorate(this, null, _elevated_decorators, { kind: "accessor", name: "elevated", static: false, private: false, access: { has: obj => "elevated" in obj, get: obj => obj.elevated, set: (obj, value) => { obj.elevated = value; } }, metadata: _metadata }, _elevated_initializers, _elevated_extraInitializers);
            __esDecorate(this, null, _removable_decorators, { kind: "accessor", name: "removable", static: false, private: false, access: { has: obj => "removable" in obj, get: obj => obj.removable, set: (obj, value) => { obj.removable = value; } }, metadata: _metadata }, _removable_initializers, _removable_extraInitializers);
            __esDecorate(this, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
            __esDecorate(this, null, _list_decorators, { kind: "accessor", name: "list", static: false, private: false, access: { has: obj => "list" in obj, get: obj => obj.list, set: (obj, value) => { obj.list = value; } }, metadata: _metadata }, _list_initializers, _list_extraInitializers);
            __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, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
            __esDecorate(this, null, _hasAvatar_decorators, { kind: "accessor", name: "hasAvatar", static: false, private: false, access: { has: obj => "hasAvatar" in obj, get: obj => obj.hasAvatar, set: (obj, value) => { obj.hasAvatar = value; } }, metadata: _metadata }, _hasAvatar_initializers, _hasAvatar_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #disabled_accessor_storage = __runInitializers(this, _disabled_initializers, false
        /**
         * The type of the rendered chip.
         * @attribute
         *
         * @see https://m3.material.io/components/chips/guidelines
         */
        );
        /**
         * Whether the chip is disabled. The user can't interact with the chip when `true`.
         * @attribute
         */
        get disabled() { return this.#disabled_accessor_storage; }
        set disabled(value) { this.#disabled_accessor_storage = value; }
        #type_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _type_initializers, void 0));
        /**
         * The type of the rendered chip.
         * @attribute
         *
         * @see https://m3.material.io/components/chips/guidelines
         */
        get type() { return this.#type_accessor_storage; }
        set type(value) { this.#type_accessor_storage = value; }
        #elevated_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _elevated_initializers, void 0));
        /**
         * Whether the chip should be rendered as elevated.
         * @attribute
         */
        get elevated() { return this.#elevated_accessor_storage; }
        set elevated(value) { this.#elevated_accessor_storage = value; }
        #removable_accessor_storage = (__runInitializers(this, _elevated_extraInitializers), __runInitializers(this, _removable_initializers, void 0));
        /**
         * Whether the chip renders the "close" icon at the end.
         * @attribute
         */
        get removable() { return this.#removable_accessor_storage; }
        set removable(value) { this.#removable_accessor_storage = value; }
        #checked_accessor_storage = (__runInitializers(this, _removable_extraInitializers), __runInitializers(this, _checked_initializers, void 0));
        /**
         * Whether the chip is currently checked.
         * Note, this controls the presentation layer only. It has no meaning when it comes to forms and inputs.
         * @attribute
         */
        get checked() { return this.#checked_accessor_storage; }
        set checked(value) { this.#checked_accessor_storage = value; }
        #list_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _list_initializers, void 0));
        /**
         * When set, the chip will render a trailing icon that indicates that the chip is associated
         * with a list. It does not do anything.
         *
         * @attribute
         */
        get list() { return this.#list_accessor_storage; }
        set list(value) { this.#list_accessor_storage = value; }
        #ripple_accessor_storage = (__runInitializers(this, _list_extraInitializers), __runInitializers(this, _ripple_initializers, void 0));
        get ripple() { return this.#ripple_accessor_storage; }
        set ripple(value) { this.#ripple_accessor_storage = value; }
        #hasIcon_accessor_storage = (__runInitializers(this, _ripple_extraInitializers), __runInitializers(this, _hasIcon_initializers, void 0));
        /**
         * Determines when the element has an icon in the "icon" slot.
         */
        get hasIcon() { return this.#hasIcon_accessor_storage; }
        set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
        #hasAvatar_accessor_storage = (__runInitializers(this, _hasIcon_extraInitializers), __runInitializers(this, _hasAvatar_initializers, void 0));
        /**
         * Determines when the element has an image in the "avatar" slot.
         */
        get hasAvatar() { return this.#hasAvatar_accessor_storage; }
        set hasAvatar(value) { this.#hasAvatar_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _hasAvatar_extraInitializers);
            this.disabled = false;
            this.type = ChipType.assist;
            this.hasIcon = false;
            this.hasAvatar = false;
            this.actionController.cancelKeyboardEvents = true;
            this.addEventListener('keydown', this.handleKeyDown.bind(this));
            this.addEventListener('keyup', this.handleKeyUp.bind(this));
            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('focus', this.handleFocus.bind(this));
            this.addEventListener('blur', this.handleBlur.bind(this));
        }
        connectedCallback() {
            super.connectedCallback();
            if (!this.hasAttribute('role')) {
                this.setAttribute('role', 'button');
            }
            if (!this.hasAttribute('tabindex') && !this.disabled) {
                this.setAttribute('tabindex', '0');
            }
        }
        willUpdate(cp) {
            if (cp.has('disabled')) {
                setDisabled(this, cp.get('disabled'));
            }
        }
        beginPress(options) {
            super.beginPress(options);
            this.classList.add('pressed');
            this.ripple?.beginPress(options.positionEvent);
        }
        async handleKeyDown(e) {
            super.handleKeyDown(e);
            if (this.removable && e.code === 'Backspace') {
                e.preventDefault();
                this.removeAction();
            }
        }
        async handleFocus() {
            this.ripple?.beginFocus();
        }
        async handleBlur() {
            this.ripple?.endFocus();
        }
        endPress(info) {
            super.endPress(info);
            this.classList.remove('pressed');
            this.ripple?.endPress();
            const { cancelled, reason } = info;
            if (cancelled) {
                return;
            }
            if (reason === 'enter' || reason === 'space') {
                this.click();
            }
        }
        handleClick(e) {
            super.handleClick(e);
            if (this.type === ChipType.filter) {
                this.toggleChecked();
            }
        }
        handlePointerEnter(e) {
            super.handlePointerEnter(e);
            this.ripple?.beginHover(e);
        }
        handlePointerLeave(e) {
            super.handlePointerLeave(e);
            this.ripple?.endHover();
        }
        /**
         * Toggles the "filter" type of the chip.
         */
        toggleChecked() {
            this.checked = !this.checked;
            this.dispatchEvent(new Event('select'));
        }
        /**
         * Sets the `hasIcon` state property when the "icon" slot change event is dispatched.
         */
        handleIconSlotChange(e) {
            const slot = e.target;
            this.hasIcon = !!slot.assignedNodes().length;
        }
        /**
         * Sets the `_hasAvatar` state property when the "avatar" slot change event is dispatched.
         */
        handleAvatarSlotChange(e) {
            const slot = e.target;
            this.hasAvatar = !!slot.assignedNodes().length;
        }
        handleClose(e) {
            e.preventDefault();
            e.stopPropagation();
            this.removeAction();
        }
        async removeAction() {
            this.dispatchEvent(new Event('remove'));
        }
        render() {
            const containerClasses = classMap({
                'surface': true,
                'has-icon': this.hasIcon,
                'has-avatar': this.hasAvatar,
                'has-trailing-icon': this.hasTrailingIcon,
            });
            return html `
      ${this.renderRipple()}
      <div class="${containerClasses}">
        ${this.renderLeadingIcon()} ${this.renderAvatar()}
        <slot></slot>
        ${this.renderTrailingIcon()}
      </div>
    `;
        }
        renderRipple() {
            return html `<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`;
        }
        renderLeadingIcon() {
            const { type } = this;
            if (type === ChipType.suggestion) {
                return nothing;
            }
            if (type === ChipType.filter) {
                const iconClasses = classMap({
                    'leading-icon': true,
                    'check-mark': true,
                    'checked': !!this.checked,
                });
                return html `<span class="${iconClasses}" role="presentation">${check}</span>`;
            }
            return html `<slot class="leading-icon" name="icon" @slotchange="${this.handleIconSlotChange}"></slot>`;
        }
        renderAvatar() {
            return html `<slot name="avatar" @slotchange="${this.handleAvatarSlotChange}"></slot>`;
        }
        renderTrailingIcon() {
            const { removable = false, list, type } = this;
            if (type === ChipType.filter && list) {
                return html `<span class="trailing-icon" role="presentation">${arrowDropDown}</span>`;
            }
            if (type === ChipType.input && removable) {
                return html `<span
        class="trailing-icon"
        @click="${this.handleClose}"
        @keypress="${cancelEvent}"
        role="button"
        aria-label="Activate to close or disabled this chip."
        >${close}</span
      >`;
            }
            return nothing;
        }
        get hasTrailingIcon() {
            const { removable = false, list, type } = this;
            if (type === ChipType.filter && list) {
                return true;
            }
            if (type === ChipType.input && removable) {
                return true;
            }
            return false;
        }
    };
})();
/**
 * @slot The content of the chip.
 * @slot icon - The leading icon, sized 18x18 px
 * @slot avatar - The leading image, sized 24x24 px
 * @fires select - When the checked state changed through a user interaction. This only related to
 *                 `filter` chips. Note, `select` is dispatched just before the `click` event.
 * @fires remove - When the user clicks the "remove" icon on the chip.
 */
export default UiChip;
//# sourceMappingURL=Chip.js.map