// #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 { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Slottable } from '../../../Behaviors/Slottable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { TabPanelAlignment } from '../../../Types/TabPanelAlignment';
import { TabStripPlacement } from '../../../Types/TabStripPlacement';
import { CustomElement } from '../../Abstracts/CustomElement';
import { ButtonElement } from '../../Buttons/Button/ButtonElement';
import { tabPanelElementTemplate } from './TabPanelElementTemplate';
import { tabPanelElementJoyStyle } from './Themes/TabPanelElement.Joy';
import { tabPanelElementMemphisStyle } from './Themes/TabPanelElement.Memphis';
import { tabPanelElementCosmopolitanStyle } from './Themes/TabPanelElement.Cosmopolitan';
import { Themeable } from '../../../Behaviors/Themeable';
import { Property } from '../../../Decorators/PropertyDecorator';
// #endregion
/**
 * Tab Panel - A scrollable container for tab strip items with optional navigation buttons.
 *
 * @description
 * The Tab Panel component serves as a container for the tab strip, providing horizontal scrolling
 * when the total width of tab items exceeds the available space. It automatically detects scrollable
 * content and displays navigation buttons (start/end) to allow users to scroll through tabs that
 * extend beyond the visible area. The component supports different alignments and placements,
 * integrates with the parent tab's indicator settings, and can enable swipe gestures for touch
 * devices.
 *
 * @name Tab Panel
 * @element mosaik-tab-panel
 * @category Selectors
 *
 * @slot - The default slot for the tab strip element
 *
 * @csspart startScrollButton - The navigation button for scrolling to start
 * @csspart content - The scrollable content container
 * @csspart endScrollButton - The navigation button for scrolling to end
 *
 * @cssprop {String} --tab-panel-background-color - The background fill color of the panel
 *
 * @dependency {ButtonElement} - Navigation button components for scrolling
 *
 * @fires connected {ConnectedEvent} - Fired when connected to the DOM
 * @fires changed {PropertyChangedEvent} - Fired when properties change
 *
 * @example
 * Tab panel with scrollable content:
 * ```html
 * <mosaik-tab-panel>
 *   <mosaik-tab-strip>
 *     <mosaik-tab-strip-item label="Tab 1"></mosaik-tab-strip-item>
 *     <mosaik-tab-strip-item label="Tab 2"></mosaik-tab-strip-item>
 *     <!-- Many more tabs... -->
 *   </mosaik-tab-strip>
 * </mosaik-tab-panel>
 * ```
 *
 * @example
 * Tab panel with alignment:
 * ```html
 * <mosaik-tab-panel alignment="center" placement="bottom">
 *   <mosaik-tab-strip>
 *     <mosaik-tab-strip-item label="Overview"></mosaik-tab-strip-item>
 *     <mosaik-tab-strip-item label="Details"></mosaik-tab-strip-item>
 *   </mosaik-tab-strip>
 * </mosaik-tab-panel>
 * ```
 *
 * @public
 */
let TabPanelElement = class TabPanelElement extends Themeable(Slottable(Appearanceable(CustomElement))) {
    // #region Fields
    _containerElement;
    _hasScrollableContent;
    _canScrollToStart;
    _canScrollToEnd;
    _alignment;
    _placement;
    _hasIndicator;
    _enableGestures;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._alignment = TabPanelAlignment.Start;
        this._placement = TabStripPlacement.Top;
        this._hasScrollableContent = false;
        this._canScrollToStart = true;
        this._canScrollToEnd = false;
        this._hasIndicator = true;
        this._enableGestures = false;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `{@link is}` property.
     * The `{@link is}` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-tab-panel';
    }
    /**
     * Gets or sets the `alignment` property.
     *
     * @public
     * @attr
     */
    get alignment() {
        return this._alignment;
    }
    set alignment(value) {
        if (this._alignment !== value) {
            this._alignment = value;
            this.requestUpdate('alignment');
        }
    }
    /**
     * Gets or sets the `placement` property.
     *
     * @public
     * @attr
     */
    get placement() {
        return this._placement;
    }
    set placement(value) {
        if (this._placement !== value) {
            this._placement = value;
            this.requestUpdate('placement');
        }
    }
    /**
     * Gets or sets the `hasIndicator` property.
     *
     * @public
     * @attr
     */
    get hasIndicator() {
        return this._hasIndicator;
    }
    set hasIndicator(value) {
        this._hasIndicator = value;
    }
    /**
     * Gets or sets the `enableGestures` property.
     *
     * @public
     * @attr
     */
    get enableGestures() {
        return this._enableGestures;
    }
    set enableGestures(value) {
        this._enableGestures = value;
    }
    /**
     * Gets the `hasScrollableContent` property.
     *
     * @public
     * @readonly
     */
    get hasScrollableContent() {
        return this._hasScrollableContent;
    }
    set hasScrollableContent(value) {
        if (this._hasScrollableContent !== value) {
            this._hasScrollableContent = value;
            this.requestUpdate('hasScrollableContent');
        }
    }
    /**
     * Gets the `canScrollToStart` property.
     *
     * @public
     * @readonly
     */
    get canScrollToStart() {
        return this._canScrollToStart;
    }
    set canScrollToStart(value) {
        if (this._canScrollToStart !== value) {
            this._canScrollToStart = value;
            this.requestUpdate('canScrollToStart');
        }
    }
    /**
     * Gets or sets the `canScrollToEnd` property.
     *
     * @public
     * @readonly
     */
    get canScrollToEnd() {
        return this._canScrollToEnd;
    }
    set canScrollToEnd(value) {
        if (this._canScrollToEnd !== value) {
            this._canScrollToEnd = value;
            this.requestUpdate('canScrollToEnd');
        }
    }
    // #endregion
    // #region Methods
    render() {
        return tabPanelElementTemplate(this);
    }
    /**
     * @protected
     * @override
     */
    onApplyTemplate() {
        super.onApplyTemplate();
        this._containerElement = this.getTemplatePart('content');
        this.hasScrollableContent = this._containerElement.scrollWidth > this._containerElement.clientWidth;
    }
    /**
     * @private
     * @template
     */
    scrollByTabOffset(direction) {
        // this.scrollToDirection(direction);
        // if (this._container?.selectedItem) {
        //     this.alignToElement(this._container.selectedItem);
        // }
    }
    /**
     * @private
     * @template
     */
    onScroll(e) {
        const el = e.target;
        this.canScrollToEnd = !(el.scrollWidth <= Math.abs(this._containerElement.scrollLeft) + this._containerElement.offsetWidth);
        this.canScrollToStart = this._containerElement.scrollLeft !== 0;
    }
};
__decorate([
    Attribute({ type: TabPanelAlignment }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], TabPanelElement.prototype, "alignment", null);
__decorate([
    Attribute({ type: TabStripPlacement }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], TabPanelElement.prototype, "placement", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], TabPanelElement.prototype, "hasIndicator", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], TabPanelElement.prototype, "enableGestures", null);
__decorate([
    Property({ type: Boolean,
        useDefault: true }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], TabPanelElement.prototype, "hasScrollableContent", null);
__decorate([
    Property({ type: Boolean,
        useDefault: true }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], TabPanelElement.prototype, "canScrollToStart", null);
__decorate([
    Property({ type: Boolean,
        useDefault: true }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], TabPanelElement.prototype, "canScrollToEnd", null);
TabPanelElement = __decorate([
    Component({
        selector: 'mosaik-tab-panel',
        template: tabPanelElementTemplate,
        themes: {
            joy: tabPanelElementJoyStyle,
            memphis: tabPanelElementMemphisStyle,
            cosmopolitan: tabPanelElementCosmopolitanStyle
        },
        options: {
            mode: 'open',
            delegatesFocus: true
        },
        imports: [
            ButtonElement
        ]
    }),
    __metadata("design:paramtypes", [])
], TabPanelElement);
export { TabPanelElement };
//# sourceMappingURL=TabPanelElement.js.map