import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-ae373651.js';
import { S as SyncWithStore } from './p-070aa695.js';
import { e as defaultIconPack, i as useLanguage } from './p-5b3a7f00.js';
import './p-a83ccdbd.js';
import { d as defineCustomElement$2 } from './p-85587a5c.js';
import { d as defineCustomElement$1 } from './p-3e0452c4.js';

const rtkSidebarUiCss = ":host {\n  line-height: initial;\n  font-family: var(--rtk-font-family, sans-serif);\n\n  font-feature-settings: normal;\n  font-variation-settings: normal;\n}\n\np {\n  margin: var(--rtk-space-0, 0px);\n  padding: var(--rtk-space-0, 0px);\n}\n\n\n:host {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  font-family: var(--rtk-font-family, sans-serif);\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n\n  container-type: size;\n  container-name: sidebarui;\n}\n\n@container sidebarui (height < 370px) {\n  .main-header {\n    height: var(--rtk-space-8, 32px) !important;\n  }\n  .close {\n    top: var(--rtk-space-0\\.5, 2px) !important;\n    left: var(--rtk-space-0, 0px) !important;\n    color: rgba(var(--rtk-colors-danger, 255 45 45) / 0.6);\n  }\n}\n\n:host([view='sidebar']) {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));\n}\n\n:host([view='full-screen']) {\n  position: absolute;\n  top: var(--rtk-space-0, 0px);\n  right: var(--rtk-space-0, 0px);\n  bottom: var(--rtk-space-0, 0px);\n  left: var(--rtk-space-0, 0px);\n  max-width: 100%;\n  border: none;\n}\n\n::slotted(*) {\n  flex-grow: 1;\n}\n\n.close {\n  position: absolute;\n  top: var(--rtk-space-2, 8px);\n  left: var(--rtk-space-2, 8px);\n  z-index: 10;\n}\n\n.main-header {\n  position: relative;\n  display: flex;\n  height: var(--rtk-space-12, 48px);\n  place-items: center;\n  justify-content: center;\n}\n\n.main-header, \n.mobile-tabs {\n  flex-shrink: 0;\n}\n\n.mobile-tabs {\n  display: flex;\n  place-items: center;\n  justify-content: space-evenly;\n  border-bottom: 1px solid rgb(var(--rtk-colors-background-700, 44 44 44));\n}\n\n.mobile-tabs button {\n  margin: var(--rtk-space-0, 0px);\n  border-width: var(--rtk-border-width-none, 0);\n  border-style: none;\n  background-color: transparent;\n  padding: var(--rtk-space-0, 0px);\n  color: rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));\n  height: var(--rtk-space-10, 40px);\n  cursor: pointer;\n  padding-left: var(--rtk-space-4, 16px);\n  padding-right: var(--rtk-space-4, 16px);\n  font-weight: 500;\n  border-bottom: 1px solid transparent;\n}\n\n.mobile-tabs button.active {\n  --tw-border-opacity: 1;\n  border-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));\n  --tw-text-opacity: 1;\n  color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-text-opacity));\n}\n\nheader h3 {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n@media only screen and (max-device-height: 480px) and (orientation: landscape) {\n  .main-header {\n    display: none !important;\n  }\n}\n\n.tab-participant-count-badge {\n  display: inline-block;\n  padding: 2px 5px;\n  border-radius: 9999px;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));\n  font-size: 12px;\n  color: rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));\n}\n\n.tab-participant-count-badge:not(.selected-tab) {\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));\n}\n\n.tab-participant-count-badge.requests-pending{\n  background-color: rgba(var(--rtk-colors-danger));\n}\n";
const RtkSidebarUiStyle0 = rtkSidebarUiCss;

var __decorate = (undefined && undefined.__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;
};
const RtkSidebarUi = /*@__PURE__*/ proxyCustomElement(class RtkSidebarUi extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.tabChange = createEvent(this, "tabChange", 7);
        this.sidebarClose = createEvent(this, "sidebarClose", 7);
        /** View */
        this.view = 'sidebar';
        /** Tabs */
        this.tabs = [];
        /** Hide Main Header */
        this.hideHeader = false;
        /** Hide Close Action */
        this.hideCloseAction = false;
        /** Icon Pack */
        this.iconPack = defaultIconPack;
        /** Option to focus close button when opened */
        this.focusCloseButton = true;
        /** Language */
        this.t = useLanguage();
        this.onClose = () => {
            var _a;
            this.sidebarClose.emit();
            /**
             * NOTE(ravindra-cloudflare):
             * If the sidebar was opened from a RealtimeKit component, apply a blur (remove focus/active class).
             * This helps remove the active border from RTK toggles, such as rtk-polls-toggle, rtk-chat-toggle, etc.
             */
            if (document.activeElement instanceof H &&
                ((_a = document.activeElement.tagName) === null || _a === void 0 ? void 0 : _a.includes('RTK-')) &&
                document.activeElement.blur instanceof Function) {
                document.activeElement.blur();
            }
        };
    }
    componentDidLoad() {
        this.keydownListener = (e) => {
            if (e.key === 'Escape') {
                this.onClose();
            }
        };
        this.hostEl.addEventListener('keydown', this.keydownListener);
        this.handleFocusCloseButton();
    }
    handleFocusCloseButton() {
        if (this.currentTab !== 'chat' && !this.hideCloseAction) {
            this.closeButton.focus();
        }
    }
    disconnectedCallback() {
        this.hostEl.removeEventListener('keydown', this.keydownListener);
    }
    render() {
        const isFullScreen = this.view === 'full-screen';
        const activeTab = this.tabs.find((tab) => tab.id === this.currentTab);
        return (h(Host, { key: '239f279ceccceeaa57181d4a71f3e04ede4132ce', ref: (el) => (this.hostEl = el), class: this.view }, !this.hideCloseAction && (h("rtk-button", { key: '921847fd946de305dce6f1fc7fe8a9ff175e38ee', ref: (el) => (this.closeButton = el), variant: "ghost", kind: "icon", class: "close", onClick: this.onClose, "aria-label": this.t('close') }, h("rtk-icon", { key: '1de9f1edf8ecce2d0390b7b8a1253de02affd9d1', icon: this.iconPack.dismiss }))), activeTab && !this.hideHeader && (h("header", { key: '4cd288feeb658e62d3ad1efd47aea237119918e1', class: "main-header" }, h("h3", { key: 'd6c4129537b4e090f3c429c66057be9a1072a864' }, activeTab.name), h("slot", { key: 'dfb1ea30cfa476b515a3a4b628c036083f1fe0a5', name: "pinned-state" }))), isFullScreen && (h("header", { key: '7dafb426628960ba26718530417854a533de3664', class: "mobile-tabs" }, this.tabs.map((tab) => (h("button", { onClick: () => {
                this.tabChange.emit(tab.id);
            }, class: {
                active: this.currentTab === tab.id,
            } }, tab.name))))), h("slot", { key: '2696ccd9fcad418ad7738164cd5a9e6305320899', name: this.currentTab })));
    }
    static get watchers() { return {
        "currentTab": ["handleFocusCloseButton"]
    }; }
    static get style() { return RtkSidebarUiStyle0; }
}, [1, "rtk-sidebar-ui", {
        "view": [513],
        "tabs": [16],
        "hideHeader": [4, "hide-header"],
        "hideCloseAction": [4, "hide-close-action"],
        "currentTab": [1, "current-tab"],
        "iconPack": [16],
        "focusCloseButton": [4, "focus-close-button"],
        "t": [16]
    }, undefined, {
        "currentTab": ["handleFocusCloseButton"]
    }]);
__decorate([
    SyncWithStore()
], RtkSidebarUi.prototype, "t", void 0);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-sidebar-ui", "rtk-button", "rtk-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-sidebar-ui":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkSidebarUi);
            }
            break;
        case "rtk-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { RtkSidebarUi as R, defineCustomElement as d };
