"use strict";
var __webpack_require__ = {};
(()=>{
    __webpack_require__.d = (exports1, definition)=>{
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
(()=>{
    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
    __webpack_require__.r = (exports1)=>{
        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
    AtomicTabBar: ()=>AtomicTabBar
});
const external_lit_namespaceObject = require("lit");
const decorators_js_namespaceObject = require("lit/decorators.js");
const external_button_cjs_namespaceObject = require("../button.cjs");
const error_guard_cjs_namespaceObject = require("../../../decorators/error-guard.cjs");
const with_tailwind_styles_cjs_namespaceObject = require("../../../decorators/with-tailwind-styles.cjs");
require("../atomic-tab-popover/atomic-tab-popover.cjs");
function _ts_decorate(decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) 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;
}
function _ts_metadata(k, v) {
    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
}
class AtomicTabBar extends external_lit_namespaceObject.LitElement {
    get tabsFromSlot() {
        const isTab = (tagName)=>/atomic-.+-tab$/i.test(tagName) || /tab-button$/i.test(tagName);
        return Array.from(this.querySelectorAll('*')).filter((element)=>isTab(element.tagName));
    }
    get selectedTab() {
        return this.tabsFromSlot.find((tab)=>tab.active);
    }
    get slotContentWidth() {
        return this.tabsFromSlot.reduce((total, el)=>total + parseFloat(window.getComputedStyle(el).getPropertyValue('width')), 0);
    }
    get containerWidth() {
        return parseFloat(window.getComputedStyle(this).getPropertyValue('width'));
    }
    get isOverflow() {
        return this.slotContentWidth > this.containerWidth;
    }
    get tabPopover() {
        return this.shadowRoot?.querySelector('atomic-tab-popover');
    }
    get popoverWidth() {
        return this.tabPopover ? this.getElementWidth(this.tabPopover) : 0;
    }
    get overflowingTabs() {
        const containerRelativeRightPosition = this.getBoundingClientRect().right;
        const selectedTabRelativeRightPosition = this.selectedTab?.getBoundingClientRect().right;
        return this.tabsFromSlot.filter((element)=>{
            const isBeforeSelectedTab = selectedTabRelativeRightPosition ? selectedTabRelativeRightPosition > element.getBoundingClientRect().right : false;
            const minimumWidthNeeded = isBeforeSelectedTab ? this.popoverWidth + this.getElementWidth(this.selectedTab) : this.popoverWidth;
            const rightPositionLimit = this.isOverflow ? containerRelativeRightPosition - minimumWidthNeeded : containerRelativeRightPosition;
            return element.getBoundingClientRect().right > rightPositionLimit && !element.active;
        });
    }
    get displayedTabs() {
        return this.tabsFromSlot.filter((el)=>!this.overflowingTabs.includes(el));
    }
    get lastDisplayedTab() {
        const displayedTabs = this.displayedTabs;
        return displayedTabs[displayedTabs.length - 1];
    }
    get lastDisplayedTabRightPosition() {
        return this.lastDisplayedTab.getBoundingClientRect().right - this.getBoundingClientRect().left;
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('atomic/tabRendered', this.handleTabRendered);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.resizeObserver?.disconnect();
        this.removeEventListener('atomic/tabRendered', this.handleTabRendered);
    }
    firstUpdated() {
        this.resizeObserver = new ResizeObserver(()=>{
            this.updateTabsDisplay();
        });
        this.resizeObserver.observe(this);
    }
    willUpdate() {
        this.updateTabsDisplay();
    }
    render() {
        return (0, external_lit_namespaceObject.html)`
      <slot></slot>
      <atomic-tab-popover
        exportparts="popover-button, value-label, arrow-icon, backdrop overflow-tabs"
      >
        ${this.popoverTabs}
      </atomic-tab-popover>
    `;
    }
    updatePopoverPosition() {
        this.tabPopover?.style.setProperty('left', `${this.displayedTabs.length ? this.lastDisplayedTabRightPosition : 0}px`);
    }
    constructor(...args){
        super(...args), this.popoverTabs = [], this.handleTabRendered = (event)=>{
            event.stopPropagation();
            this.updatePopoverTabs();
        }, this.getElementWidth = (element)=>element ? parseFloat(window.getComputedStyle(element).getPropertyValue('width')) : 0, this.hideElement = (el)=>{
            el.style.visibility = 'hidden';
            el.ariaHidden = 'true';
        }, this.showElement = (el)=>{
            el.style.visibility = 'visible';
            el.ariaHidden = 'false';
        }, this.updateTabVisibility = (tabs, isVisible)=>{
            const tabCount = this.tabsFromSlot.length;
            tabs.forEach((tab, index)=>{
                tab.style.setProperty('order', String(isVisible ? index + 1 : tabCount - tabs.length + index + 1));
                if (isVisible) this.showElement(tab);
                else this.hideElement(tab);
            });
        }, this.updatePopoverTabs = ()=>{
            this.popoverTabs = this.overflowingTabs.map((tab)=>(0, external_lit_namespaceObject.html)`
        <li>
          ${(0, external_button_cjs_namespaceObject.renderButton)({
                    props: {
                        part: 'popover-tab',
                        style: 'text-transparent',
                        class: 'w-full truncate rounded px-4 py-2 text-left font-semibold',
                        ariaLabel: tab.label,
                        title: tab.label,
                        onClick: ()=>{
                            tab.select();
                            this.updatePopoverTabs();
                            this.tabPopover?.toggle();
                        }
                    }
                })((0, external_lit_namespaceObject.html)`${tab.label}`)}
        </li>
      `);
        }, this.setTabButtonMaxWidth = ()=>{
            this.displayedTabs.forEach((tab)=>{
                tab.style.setProperty('max-width', `calc(100% - ${this.popoverWidth}px)`);
            });
        }, this.updateTabsDisplay = ()=>{
            this.updateTabVisibility(this.overflowingTabs, false);
            this.updateTabVisibility(this.displayedTabs, true);
            this.setTabButtonMaxWidth();
            this.updatePopoverPosition();
            this.updatePopoverTabs();
            this.tabPopover?.setButtonVisibility(!!this.overflowingTabs.length);
        };
    }
}
AtomicTabBar.styles = (0, external_lit_namespaceObject.css)`
    @reference '../../../utils/tailwind.global.tw.css';

    :host {
      white-space: nowrap;
      width: 100%;
      overflow-x: visible;
      display: flex;
      position: relative;
    }
  `;
_ts_decorate([
    (0, decorators_js_namespaceObject.state)(),
    _ts_metadata("design:type", Array)
], AtomicTabBar.prototype, "popoverTabs", void 0);
_ts_decorate([
    (0, error_guard_cjs_namespaceObject.errorGuard)(),
    _ts_metadata("design:type", Function),
    _ts_metadata("design:paramtypes", []),
    _ts_metadata("design:returntype", void 0)
], AtomicTabBar.prototype, "render", null);
AtomicTabBar = _ts_decorate([
    (0, decorators_js_namespaceObject.customElement)('atomic-tab-bar'),
    with_tailwind_styles_cjs_namespaceObject.withTailwindStyles
], AtomicTabBar);
exports.AtomicTabBar = __webpack_exports__.AtomicTabBar;
for(var __rspack_i in __webpack_exports__)if (-1 === [
    "AtomicTabBar"
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
Object.defineProperty(exports, '__esModule', {
    value: true
});
