import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { isDisabled, setDisabled } from '../../../lib/disabled.js';
import { UiElement } from '../../UiElement.js';
import { Easing } from '../../motion/animation.js';
import '../../ripple/ui-ripple.js';
let UiTab = (() => {
    let _classSuper = UiElement;
    let _instanceExtraInitializers = [];
    let _set_disabled_decorators;
    let _selected_decorators;
    let _selected_initializers = [];
    let _selected_extraInitializers = [];
    let _priority_decorators;
    let _priority_initializers = [];
    let _priority_extraInitializers = [];
    let _indicated_decorators;
    let _indicated_initializers = [];
    let _indicated_extraInitializers = [];
    let _hasIcon_decorators;
    let _hasIcon_initializers = [];
    let _hasIcon_extraInitializers = [];
    let _iconOnly_decorators;
    let _iconOnly_initializers = [];
    let _iconOnly_extraInitializers = [];
    let _ripple_decorators;
    let _ripple_initializers = [];
    let _ripple_extraInitializers = [];
    return class UiTab extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
            _selected_decorators = [property({ reflect: true, type: Boolean })];
            _priority_decorators = [property({ reflect: true, type: String })];
            _indicated_decorators = [property({ reflect: true, type: Boolean })];
            _hasIcon_decorators = [state()];
            _iconOnly_decorators = [state()];
            _ripple_decorators = [query('ui-ripple')];
            __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
            __esDecorate(this, null, _priority_decorators, { kind: "accessor", name: "priority", static: false, private: false, access: { has: obj => "priority" in obj, get: obj => obj.priority, set: (obj, value) => { obj.priority = value; } }, metadata: _metadata }, _priority_initializers, _priority_extraInitializers);
            __esDecorate(this, null, _indicated_decorators, { kind: "accessor", name: "indicated", static: false, private: false, access: { has: obj => "indicated" in obj, get: obj => obj.indicated, set: (obj, value) => { obj.indicated = value; } }, metadata: _metadata }, _indicated_initializers, _indicated_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, _iconOnly_decorators, { kind: "accessor", name: "iconOnly", static: false, private: false, access: { has: obj => "iconOnly" in obj, get: obj => obj.iconOnly, set: (obj, value) => { obj.iconOnly = value; } }, metadata: _metadata }, _iconOnly_initializers, _iconOnly_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);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        get disabled() {
            return isDisabled(this);
        }
        /**
         * When set, the button is a disabled state.
         * @attribute
         */
        set disabled(value) {
            const old = isDisabled(this);
            setDisabled(this, value);
            this.requestUpdate('disabled', old);
        }
        #selected_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selected_initializers, void 0));
        /**
         * Whether the tab is selected. Note, this does not correspond to the `selected` state
         * in the `ui-tabs`. This is only to render the tab in the selected state.
         * @attribute
         */
        get selected() { return this.#selected_accessor_storage; }
        set selected(value) { this.#selected_accessor_storage = value; }
        #priority_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _priority_initializers, void 0));
        /**
         * @attribute
         */
        get priority() { return this.#priority_accessor_storage; }
        set priority(value) { this.#priority_accessor_storage = value; }
        #indicated_accessor_storage = (__runInitializers(this, _priority_extraInitializers), __runInitializers(this, _indicated_initializers, void 0));
        /**
         * @attribute
         */
        get indicated() { return this.#indicated_accessor_storage; }
        set indicated(value) { this.#indicated_accessor_storage = value; }
        #hasIcon_accessor_storage = (__runInitializers(this, _indicated_extraInitializers), __runInitializers(this, _hasIcon_initializers, void 0));
        /**
         * Indicates whether the tab has an icon.
         * This is set automatically when the "icon" slot is populated.
         */
        get hasIcon() { return this.#hasIcon_accessor_storage; }
        set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
        #iconOnly_accessor_storage = (__runInitializers(this, _hasIcon_extraInitializers), __runInitializers(this, _iconOnly_initializers, void 0));
        /**
         * Indicates whether the tab only has an icon and no text.
         * This is set automatically when the default slot is populated with only an icon.
         */
        get iconOnly() { return this.#iconOnly_accessor_storage; }
        set iconOnly(value) { this.#iconOnly_accessor_storage = value; }
        #ripple_accessor_storage = (__runInitializers(this, _iconOnly_extraInitializers), __runInitializers(this, _ripple_initializers, void 0));
        get ripple() { return this.#ripple_accessor_storage; }
        set ripple(value) { this.#ripple_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _ripple_extraInitializers);
            this.priority = 'primary';
            this.selected = false;
            this.indicated = false;
            this.hasIcon = false;
            this.iconOnly = true;
            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));
        }
        connectedCallback() {
            super.connectedCallback();
            if (!this.hasAttribute('role')) {
                this.setAttribute('role', 'tab');
            }
            if (!this.hasAttribute('aria-selected')) {
                this.setAttribute('aria-selected', 'false');
            }
        }
        willUpdate(cp) {
            super.willUpdate(cp);
            if (cp.has('selected')) {
                this.setAttribute('aria-selected', String(this.selected));
            }
        }
        beginPress(options) {
            super.beginPress(options);
            this.classList.add('pressed');
            this.ripple?.beginPress(options.positionEvent);
        }
        endPress(config) {
            super.endPress(config);
            this.classList.remove('pressed');
            this.ripple?.endPress();
            const { cancelled, reason } = config;
            if (cancelled) {
                return;
            }
            if (reason === 'enter' || reason === 'space') {
                this.click();
            }
        }
        handleClick(e) {
            super.handleClick(e);
            if (this.disabled) {
                e.preventDefault();
                e.stopPropagation();
                return;
            }
            this.endPress({ cancelled: false, actionData: { event: e } });
        }
        handlePointerEnter(e) {
            super.handlePointerEnter(e);
            if (this.ripple) {
                this.ripple.beginHover(e);
            }
        }
        handlePointerLeave(e) {
            super.handlePointerLeave(e);
            if (this.ripple) {
                this.ripple.endHover();
            }
        }
        handleKeyUp(e) {
            super.handleKeyUp(e);
            if (this.disabled) {
                e.preventDefault();
                e.stopPropagation();
                return;
            }
        }
        /**
         * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
         */
        handleIconSlotChange(e) {
            const slot = e.target;
            this.hasIcon = !!slot.assignedNodes().length;
        }
        handleSlotChange(e) {
            const slot = e.target;
            // Check if there's any label text or elements. If not, then there is only
            // an icon.
            for (const node of slot.assignedNodes()) {
                const hasTextContent = node.nodeType === Node.TEXT_NODE && !!node.wholeText.match(/\S/);
                if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {
                    this.iconOnly = false;
                    return;
                }
            }
            this.iconOnly = true;
        }
        getIndicatorSizing() {
            const element = this.priority === 'primary' ? this.shadowRoot?.querySelector('.tab-content') : this;
            if (!element) {
                return { width: 0, left: 0 };
            }
            const rect = element.getBoundingClientRect();
            return {
                width: rect.width,
                left: rect.left,
            };
        }
        /**
         * When `indicated` is `true` it animates the indicator to highlight the position of the tab.
         */
        highlight() {
            if (!this.indicated) {
                return;
            }
            const pointer = this.shadowRoot?.querySelector('.pointer');
            if (!pointer) {
                return;
            }
            const frames = [
                {
                    width: `40px`,
                },
                {
                    width: `80px`,
                },
                {
                    width: `40px`,
                },
            ];
            pointer.animate(frames, {
                duration: 360,
                iterations: 1,
                easing: Easing.STANDARD,
            });
        }
        render() {
            const isPrimary = this.priority === 'primary';
            const containerClasses = classMap({
                'surface': true,
                'has-icon': this.hasIcon,
                'has-label': !this.iconOnly,
                'stacked': isPrimary,
            });
            return html `
      ${this.renderFocusRing()} ${this.renderRipple()}
      <div class="${containerClasses}">
        <div class="tab-content">
          ${this.renderIcon()}
          <slot @slotchange="${this.handleSlotChange}"></slot>
        </div>
        ${isPrimary ? this.renderIndicator() : nothing}
      </div>
      ${!isPrimary ? this.renderIndicator() : nothing}
    `;
        }
        renderFocusRing() {
            return html `<md-focus-ring
      part="focus-ring"
      class="focus-ring"
      inward
      .control="${this}"
    ></md-focus-ring>`;
        }
        renderRipple() {
            return html `<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`;
        }
        renderIcon() {
            return html ` <slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot> `;
        }
        renderIndicator() {
            const { indicated, priority } = this;
            if (!indicated) {
                return nothing;
            }
            const classes = {
                indicator: true,
                primary: priority === 'primary',
            };
            return html `<div class="${classMap(classes)}"></div>`;
        }
    };
})();
export default UiTab;
//# sourceMappingURL=Tab.js.map