/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { CustomElement, attachShadowTemplate, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
import { TabAdapter } from './tab-adapter';
import { TabFoundation } from './tab-foundation';
import { TAB_CONSTANTS } from './tab-constants';
import { BaseComponent } from '../../core/base/base-component';
import { FocusIndicatorComponent } from '../../focus-indicator/focus-indicator';
import { StateLayerComponent } from '../../state-layer/state-layer';
const template = '<template><div class=\"forge-tab\" part=\"container\"><span class=\"content\" part=\"content\"><slot name=\"leading\"></slot><span class=\"label\" part=\"label\"><slot></slot></span><slot name=\"trailing\"></slot><span class=\"indicator\" part=\"indicator\"></span></span><forge-state-layer exportparts=\"surface:state-layer\" target=\":host\"></forge-state-layer><forge-focus-indicator part=\"focus-indicator\" target=\":host\" inward></forge-focus-indicator></div></template>';
const styles = ':host{display:-webkit-inline-box;display:inline-flex;outline:0;-webkit-tap-highlight-color:transparent;vertical-align:middle}:host([hidden]){display:none}.forge-tab{--_tab-active-color:var(--forge-tab-active-color, var(--forge-theme-primary, #3f51b5));--_tab-inactive-color:var(--forge-tab-inactive-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));--_tab-height:var(--forge-tab-height, 48px);--_tab-stacked-height:var(--forge-tab-stacked-height, 64px);--_tab-disabled-opacity:var(--forge-tab-disabled-opacity, 0.38);--_tab-indicator-color:var(--forge-tab-indicator-color, var(--_tab-active-color));--_tab-indicator-height:var(--forge-tab-indicator-height, 3px);--_tab-indicator-shape:var(--forge-tab-indicator-shape, 3px 3px 0 0);--_tab-vertical-indicator-shape:var(--forge-tab-vertical-indicator-shape, 3px 0 0 3px);--_tab-secondary-indicator-height:var(--forge-tab-secondary-indicator-height, 2px);--_tab-secondary-indicator-shape:var(--forge-tab-secondary-indicator-shape, 0);--_tab-inverted-indicator-shape:var(--forge-tab-inverted-indicator-shape, 0 0 3px 3px);--_tab-vertical-inverted-indicator-shape:var(--forge-tab-vertical-inverted-indicator-shape, 0 3px 3px 0);--_tab-container-color:var(--forge-tab-container-color, transparent);--_tab-container-height:var(--forge-tab-container-height, var(--_tab-height));--_tab-container-shape:var(--forge-tab-container-shape, 0);--_tab-content-height:var(--forge-tab-content-height, var(--_tab-height));--_tab-content-padding:var(--forge-tab-content-padding, var(--forge-spacing-xxsmall, 4px));--_tab-active-focus-icon-color:var(--forge-tab-active-focus-icon-color, var(--_tab-active-color));--_tab-active-hover-icon-color:var(--forge-tab-active-hover-icon-color, var(--_tab-active-color));--_tab-active-icon-color:var(--forge-tab-active-icon-color, var(--_tab-active-color));--_tab-active-pressed-icon-color:var(--forge-tab-active-pressed-icon-color, var(--_tab-active-color));--_tab-icon-size:var(--forge-tab-icon-size, 24px);--_tab-focus-icon-color:var(--forge-tab-focus-icon-color, var(--_tab-inactive-color));--_tab-hover-icon-color:var(--forge-tab-hover-icon-color, var(--_tab-inactive-color));--_tab-icon-color:var(--forge-tab-icon-color, var(--_tab-inactive-color));--_tab-pressed-icon-color:var(--forge-tab-pressed-icon-color, var(--_tab-inactive-color));--_tab-active-focus-label-text-color:var(--forge-tab-active-focus-label-text-color, var(--_tab-active-color));--_tab-active-hover-label-text-color:var(--forge-tab-active-hover-label-text-color, var(--_tab-active-color));--_tab-active-label-text-color:var(--forge-tab-active-label-text-color, var(--_tab-active-color));--_tab-active-pressed-label-text-color:var(--forge-tab-active-pressed-label-text-color, var(--_tab-active-color));--_tab-focus-label-text-color:var(--forge-tab-focus-label-text-color, var(--_tab-inactive-color));--_tab-hover-label-text-color:var(--forge-tab-hover-label-text-color, var(--_tab-inactive-color));--_tab-label-text-color:var(--forge-tab-label-text-color, var(--_tab-inactive-color));--_tab-pressed-label-text-color:var(--forge-tab-pressed-label-text-color, var(--_tab-inactive-color))}.forge-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, .875)));font-weight:var(--forge-typography-button-font-weight,500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, .0714285714em);text-transform:var(--forge-typography-button-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-button-text-decoration,inherit);text-decoration:var(--forge-typography-button-text-decoration,inherit);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:0 0;text-decoration:none;width:100%;position:relative;padding:0;margin:0;z-index:0;background-color:var(--_tab-container-color);color:var(--_tab-label-text-color);min-height:var(--_tab-container-height)}.forge-tab::-moz-focus-inner{padding:0;border:0}.forge-tab ::slotted([slot=leading]),.forge-tab ::slotted([slot=trailing]){display:-webkit-inline-box;display:inline-flex;position:relative;-webkit-writing-mode:horizontal-tb;-ms-writing-mode:lr-tb;writing-mode:horizontal-tb;fill:currentColor;color:var(--_tab-icon-color);font-size:var(--_tab-icon-size);width:var(--_tab-icon-size);height:var(--_tab-icon-size)}.forge-tab:hover{color:var(--_tab-hover-label-text-color);cursor:pointer}.forge-tab:hover ::slotted([slot=leading]),.forge-tab:hover ::slotted([slot=trailing]){color:var(--_tab-hover-icon-color)}.forge-tab .content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;white-space:nowrap;-webkit-transition:150ms color linear;transition:150ms color linear;max-height:calc(var(--_tab-content-height) + 2 * var(--_tab-content-padding));min-height:var(--_tab-content-height);padding:var(--_tab-content-padding) calc(2 * var(--_tab-content-padding));gap:var(--_tab-content-padding)}.forge-tab .content .label{display:inline-block;line-height:1}.forge-tab .indicator{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:-1;-webkit-transform-origin:bottom left;transform-origin:bottom left;background:var(--_tab-indicator-color);border-radius:var(--_tab-indicator-shape);height:var(--_tab-indicator-height);inset:auto 0 0;opacity:0}::slotted(*),:host{white-space:nowrap}forge-focus-indicator{--forge-focus-indicator-color:var(--_tab-active-color);--forge-focus-indicator-shape:8px}forge-state-layer{--forge-state-layer-color:var(--_tab-inactive-color)}:host(:focus) .forge-tab{color:var(--_tab-focus-label-text-color)}:host(:focus) .forge-tab ::slotted([slot=leading]),:host(:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-focus-icon-color)}:host(:active) .forge-tab{color:var(--_tab-pressed-label-text-color);outline:0}:host(:active) .forge-tab ::slotted([slot=leading]),:host(:active) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-pressed-icon-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .forge-tab{opacity:var(--_tab-disabled-opacity);pointer-events:none}:host([selected]) .forge-tab{color:var(--_tab-active-label-text-color)}:host([selected]) .forge-tab ::slotted([slot=leading]),:host([selected]) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-icon-color)}:host([selected]) .forge-tab:hover{color:var(--_tab-active-hover-label-text-color)}:host([selected]) .forge-tab:hover ::slotted([slot=leading]),:host([selected]) .forge-tab:hover ::slotted([slot=trailing]){color:var(--_tab-active-hover-icon-color)}:host([selected]) .forge-tab .indicator{opacity:1}:host([selected]) forge-state-layer{--forge-state-layer-color:var(--_tab-active-color)}:host([selected]:not([vertical])) forge-focus-indicator{--forge-focus-indicator-offset-block:0 calc(var(--_tab-indicator-height) + 1px)}:host([selected]:focus) .forge-tab{color:var(--_tab-active-focus-label-text-color)}:host([selected]:focus) .forge-tab ::slotted([slot=leading]),:host([selected]:focus) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-focus-icon-color)}:host([selected]:active) .forge-tab{color:var(--_tab-active-pressed-label-text-color)}:host([selected]:active) .forge-tab ::slotted([slot=leading]),:host([selected]:active) .forge-tab ::slotted([slot=trailing]){color:var(--_tab-active-pressed-icon-color)}:host([stacked]) .forge-tab{--_tab-height:var(--_tab-stacked-height)}:host([stacked]) .forge-tab .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}:host([secondary]) .forge-tab{--_tab-indicator-height:var(--_tab-secondary-indicator-height);--_tab-indicator-shape:var(--_tab-secondary-indicator-shape)}:host([secondary]) .content{width:100%}:host([secondary]) .indicator{min-width:100%}:host([vertical]) .forge-tab{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;border-bottom:none}:host([vertical]) .forge-tab .content{width:100%}:host([vertical]) .forge-tab .indicator{height:100%;min-width:var(--_tab-indicator-height);inset:0 0 0 auto}:host([vertical]) forge-focus-indicator{--forge-focus-indicator-offset-inline:0 calc(var(--_tab-indicator-height) + 1px)}:host([vertical][secondary]) .content{min-height:100%}:host([vertical]:not([secondary])) .forge-tab{--_tab-indicator-shape:var(--_tab-vertical-indicator-shape)}:host([inverted]) .forge-tab{--_tab-indicator-shape:var(--_tab-inverted-indicator-shape)}:host([inverted]) .indicator{inset:0 0 auto;-webkit-transform-origin:top left;transform-origin:top left}:host([inverted][vertical]) .forge-tab{--_tab-indicator-shape:var(--_tab-vertical-inverted-indicator-shape)}:host([inverted][vertical]) .indicator{inset:0 auto 0 0}';
/**
 * @tag forge-tab
 *
 * @property {boolean} disabled - The disabled state of the tab.
 * @property {boolean} selected - The selected state of the tab.
 * @property {boolean} vertical - Controls whether the tab is vertical or horizontal.
 * @property {boolean} stacked - Controls whether the tab is taller to allow for slotted leading/trailing elements.
 * @property {boolean} secondary - Controls whether the tab is styled as secondary tab navigation.
 * @property {boolean} inverted - Controls whether the tab indicator is rendered on the opposite side of the tab.
 *
 * @attribute disabled - The disabled state of the tab.
 * @attribute selected - The selected state of the tab.
 * @attribute vertical - Controls whether the tab is vertical or horizontal.
 * @attribute stacked - Controls whether the tab is taller to allow for slotted leading/trailing elements.
 * @attribute secondary - Controls whether the tab is styled as secondary tab navigation.
 *
 * @event forge-tab-select - Dispatched when the tab is selected.
 *
 * @cssproperty --forge-tab-indicator-color - The color of the tab indicator. Defaults to the primary theme.
 * @cssproperty --forge-tab-indicator-height - The height of the tab indicator.
 * @cssproperty --forge-tab-indicator-shape - The shape of the tab indicator.
 * @cssproperty --forge-tab-container-color - The color of the tab container. Defaults to the surface theme.
 * @cssproperty --forge-tab-height - The height of the tab.
 * @cssproperty --forge-tab-shape - The shape of the tab.
 * @cssproperty --forge-tab-disabled-opacity - The opacity of the tab when disabled.
 * @cssproperty --forge-tab-active-focus-icon-color - The color of the icon when the tab is active and focused. Defaults to the primary theme.
 * @cssproperty --forge-tab-active-hover-icon-color - The color of the icon when the tab is active and hovered. Defaults to the primary theme.
 * @cssproperty --forge-tab-active-icon-color - The color of the icon when the tab is active. Defaults to the primary theme.
 * @cssproperty --forge-tab-active-pressed-icon-color - The color of the icon when the tab is active and pressed. Defaults to the primary theme.
 * @cssproperty --forge-tab-icon-size - The size of the icon.
 * @cssproperty --forge-tab-focus-icon-color - The color of the icon when the tab is focused. Defaults to the text-on-background theme.
 * @cssproperty --forge-tab-hover-icon-color - The color of the icon when the tab is hovered. Defaults to the text-on-background theme.
 * @cssproperty --forge-tab-icon-color - The color of the icon. Defaults to the text-on-background theme.
 * @cssproperty --forge-tab-pressed-icon-color - The color of the icon when the tab is pressed. Defaults to the text-on-background theme.
 * @cssproperty --forge-tab-active-focus-label-text-color - The color of the label text when the tab is active and focused. Defaults to the primary theme.
 * @cssproperty --forge-tab-active-hover-label-text-color - The color of the label text when the tab is active and hovered. Defaults to the primary theme.
 * @cssproperty --forge-tab-active-label-text-color - The color of the label text when the tab is active. Defaults to the primary theme.
 * @cssproperty --forge-tab-active-pressed-label-text-color - The color of the label text when the tab is active and pressed. Defaults to the primary theme.
 * @cssproperty --forge-tab-focus-label-text-color - The color of the label text when the tab is focused. Defaults to the text-on-background theme.
 * @cssproperty --forge-tab-hover-label-text-color - The color of the label text when the tab is hovered. Defaults to the text-on-background theme.
 * @cssproperty --forge-tab-label-text-color - The color of the label text. Defaults to the text-on-background theme.
 * @cssproperty --forge-tab-pressed-label-text-color - The color of the label text when the tab is pressed. Defaults to the text-on-background theme.
 *
 * @csspart container - The tab container.
 * @csspart content - The tab content container.
 * @csspart label - The tab label container.
 * @csspart indicator - The tab active indicator.
 */
let TabComponent = class TabComponent extends BaseComponent {
    static get observedAttributes() {
        return [
            TAB_CONSTANTS.attributes.DISABLED,
            TAB_CONSTANTS.attributes.SELECTED,
            TAB_CONSTANTS.attributes.VERTICAL,
            TAB_CONSTANTS.attributes.STACKED,
            TAB_CONSTANTS.attributes.SECONDARY,
            TAB_CONSTANTS.attributes.INVERTED
        ];
    }
    constructor() {
        super();
        attachShadowTemplate(this, template, styles);
        this._foundation = new TabFoundation(new TabAdapter(this));
    }
    connectedCallback() {
        this._foundation.initialize();
    }
    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case TAB_CONSTANTS.attributes.DISABLED:
                this.disabled = coerceBoolean(newValue);
                break;
            case TAB_CONSTANTS.attributes.SELECTED:
                this.selected = coerceBoolean(newValue);
                break;
            case TAB_CONSTANTS.attributes.VERTICAL:
                this.vertical = coerceBoolean(newValue);
                break;
            case TAB_CONSTANTS.attributes.STACKED:
                this.stacked = coerceBoolean(newValue);
                break;
            case TAB_CONSTANTS.attributes.SECONDARY:
                this.secondary = coerceBoolean(newValue);
                break;
            case TAB_CONSTANTS.attributes.INVERTED:
                this.inverted = coerceBoolean(newValue);
                break;
        }
    }
};
__decorate([
    FoundationProperty()
], TabComponent.prototype, "disabled", void 0);
__decorate([
    FoundationProperty()
], TabComponent.prototype, "selected", void 0);
__decorate([
    FoundationProperty()
], TabComponent.prototype, "vertical", void 0);
__decorate([
    FoundationProperty()
], TabComponent.prototype, "stacked", void 0);
__decorate([
    FoundationProperty()
], TabComponent.prototype, "secondary", void 0);
__decorate([
    FoundationProperty()
], TabComponent.prototype, "inverted", void 0);
TabComponent = __decorate([
    CustomElement({
        name: TAB_CONSTANTS.elementName,
        dependencies: [
            FocusIndicatorComponent,
            StateLayerComponent
        ]
    })
], TabComponent);
export { TabComponent };
