/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty } from '@tylertech/forge-core';
import { IconComponent, IconRegistry } from '../../icon';
import { IconButtonComponent } from '../../icon-button';
import { BaseComponent } from '../../core/base/base-component';
import { TabComponent } from '../tab/tab';
import { TabBarAdapter } from './tab-bar-adapter';
import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
import { TabBarFoundation } from './tab-bar-foundation';
import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
const template = '<template><div class=\"forge-tab-bar\" part=\"container\"><div role=\"tablist\" class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
const styles = ':host{position:relative;display:block}:host([hidden]){display:none}.forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, space-between);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 1);--_tab-bar-divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_tab-bar-divider-thickness:var(--forge-tab-bar-divider-thickness, 1px)}.forge-tab-bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;-webkit-box-align:center;align-items:center;border-bottom:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}.scroll-container{position:relative;display:-webkit-box;display:flex;-webkit-box-pack:var(--_tab-bar-justify);justify-content:var(--_tab-bar-justify);-webkit-box-align:end;align-items:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){-webkit-box-flex:var(--_tab-bar-stretch);flex:var(--_tab-bar-stretch)}::slotted([selected]){z-index:1}forge-icon-button{--forge-icon-button-shape-squared:0px}:host([vertical]) .forge-tab-bar{grid-template-columns:none;grid-template-rows:auto 1fr auto;-webkit-box-align:initial;align-items:initial;border-bottom:none;border-right:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color);height:100%}:host([vertical]) .scroll-container{display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:stretch;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .forge-tab-bar{border-bottom:none;border-top:variale(divider-thickness) solid var(--_tab-bar-divider-color)}:host([inverted][vertical]) .forge-tab-bar{border-bottom:none;border-top:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}:host([clustered]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 0)}:host([clustered=start]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start)}:host([clustered=center]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, center)}:host([clustered=end]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-end)}';
/**
 * @tag forge-tab-bar
 *
 * @summary Tabs organize content across different screens and views.
 *
 * @description
 * Use tabs to group content into helpful categories. Tabs are typically placed
 * above the content they relate to. Tabs can be used to navigate between screens,
 * or to group related content within a screen.
 *
 * @property {boolean} disabled - The disabled state of the tab bar.
 * @property {number} activeTab - The index of the active tab.
 * @property {boolean} vertical - Controls whether the tab bar is vertical or horizontal.
 * @property {boolean} clustered - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
 * @property {boolean} stacked - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
 * @property {boolean} secondary - Controls whether the tabs are styled as secondary tab navigation.
 * @property {boolean} inverted - Controls whether the tabs are rendered inverted (tab indicator at top instead of bottom).
 * @property {boolean} autoActivate - Controls whether the tabs are automatically activated when receiving focus.
 * @property {boolean} scrollButtons - Controls whether scroll buttons are displayed when the tabs overflow their container.
 *
 * @attribute disabled - The disabled state of the tab bar.
 * @attribute active-tab - The index of the active tab.
 * @attribute vertical - Controls whether the tab bar is vertical or horizontal.
 * @attribute clustered - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.
 * @attribute stacked - Controls whether the tabs are taller to allow for slotted leading/trailing elements.
 * @attribute secondary - Controls whether the tabs are styled as secondary tab navigation.
 * @attribute auto-activate - Controls whether the tabs are automatically activated when receiving focus.
 * @attribute scroll-buttons - Controls whether scroll buttons are displayed when the tabs overflow their container.
 *
 * @event forge-tab-bar-change {CustomEvent<ITabBarChangeEventData>} - Dispatches when the active tab changes.
 *
 * @cssproperty --forge-tab-bar-justify - The `justify-content` value for the tab bar flex container.
 * @cssproperty --forge-tab-bar-stretch - The `flex` value for the child `<forge-tab>` elements.
 * @cssproperty --forge-tab-bar-divider-color - The color of the divider.
 * @cssproperty --forge-tab-bar-divider-thickness - The thickness of the divider.
 *
 * @csspart container - The container element.
 * @csspart scroll-container - The scroll container element.
 */
let TabBarComponent = class TabBarComponent extends BaseComponent {
    static get observedAttributes() {
        return [
            TAB_BAR_CONSTANTS.attributes.DISABLED,
            TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB,
            TAB_BAR_CONSTANTS.attributes.VERTICAL,
            TAB_BAR_CONSTANTS.attributes.CLUSTERED,
            TAB_BAR_CONSTANTS.attributes.STACKED,
            TAB_BAR_CONSTANTS.attributes.SECONDARY,
            TAB_BAR_CONSTANTS.attributes.INVERTED,
            TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE,
            TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS
        ];
    }
    constructor() {
        super();
        IconRegistry.define([
            tylIconKeyboardArrowLeft,
            tylIconKeyboardArrowRight,
            tylIconKeyboardArrowUp,
            tylIconKeyboardArrowDown
        ]);
        attachShadowTemplate(this, template, styles);
        this._foundation = new TabBarFoundation(new TabBarAdapter(this));
    }
    connectedCallback() {
        this._foundation.initialize();
    }
    disconnectedCallback() {
        this._foundation.destroy();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case TAB_BAR_CONSTANTS.attributes.DISABLED:
                this.disabled = coerceBoolean(newValue);
                break;
            case TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB:
                this.activeTab = newValue ? coerceNumber(newValue) : undefined;
                break;
            case TAB_BAR_CONSTANTS.attributes.VERTICAL:
                this.vertical = coerceBoolean(newValue);
                break;
            case TAB_BAR_CONSTANTS.attributes.CLUSTERED:
                this.clustered = coerceBoolean(newValue);
                break;
            case TAB_BAR_CONSTANTS.attributes.STACKED:
                this.stacked = coerceBoolean(newValue);
                break;
            case TAB_BAR_CONSTANTS.attributes.SECONDARY:
                this.secondary = coerceBoolean(newValue);
                break;
            case TAB_BAR_CONSTANTS.attributes.INVERTED:
                this.inverted = coerceBoolean(newValue);
                break;
            case TAB_BAR_CONSTANTS.attributes.AUTO_ACTIVATE:
                this.autoActivate = coerceBoolean(newValue);
                break;
            case TAB_BAR_CONSTANTS.attributes.SCROLL_BUTTONS:
                this.scrollButtons = coerceBoolean(newValue);
                break;
        }
    }
};
__decorate([
    FoundationProperty()
], TabBarComponent.prototype, "disabled", void 0);
__decorate([
    FoundationProperty()
], TabBarComponent.prototype, "activeTab", void 0);
__decorate([
    FoundationProperty()
], TabBarComponent.prototype, "vertical", void 0);
__decorate([
    FoundationProperty()
], TabBarComponent.prototype, "clustered", void 0);
__decorate([
    FoundationProperty()
], TabBarComponent.prototype, "stacked", void 0);
__decorate([
    FoundationProperty()
], TabBarComponent.prototype, "secondary", void 0);
__decorate([
    FoundationProperty()
], TabBarComponent.prototype, "inverted", void 0);
__decorate([
    FoundationProperty()
], TabBarComponent.prototype, "autoActivate", void 0);
__decorate([
    FoundationProperty()
], TabBarComponent.prototype, "scrollButtons", void 0);
TabBarComponent = __decorate([
    CustomElement({
        name: TAB_BAR_CONSTANTS.elementName,
        dependencies: [
            TabComponent,
            IconButtonComponent,
            IconComponent
        ]
    })
], TabBarComponent);
export { TabBarComponent };
