/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import "../../../globals/settings.js";
import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import "../../button/index.js";
import "../defs.js";
import "../tabs.js";
import { LitElement, html } from "lit";
import { property, state } from "lit/decorators.js";
//#region src/components/tabs/stories/tabs-wrapper.ts
/**
* Copyright IBM Corp. 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Wrapper component for dismissable tabs story with state management
*/
var DismissableTabsWrapper = class extends LitElement {
	constructor(..._args) {
		super(..._args);
		this._defaultTabs = [
			{
				id: "all",
				label: "Dashboard",
				value: "all"
			},
			{
				id: "cloudFoundry",
				label: "Monitoring",
				value: "cloudFoundry"
			},
			{
				id: "staging",
				label: "Activity",
				value: "staging"
			},
			{
				id: "dea",
				label: "Settings",
				value: "dea",
				disabled: true
			}
		];
		this._tabs = this._defaultTabs;
		this.disabled = false;
		this.contained = false;
		this.dismissable = true;
		this.selectionMode = "automatic";
		this.selectedIndex = 0;
	}
	/**
	* Handle tab dismissed event
	*/
	_handleDismissed(event) {
		const { index } = event.detail;
		this._tabs = this._tabs.filter((_, i) => i !== index);
	}
	/**
	* Handle before selected event
	*/
	_handleBeforeSelected(event) {
		if (this.disabled) event.preventDefault();
	}
	resetTabs() {
		this._tabs = [...this._defaultTabs];
	}
	render() {
		const { resetTabs } = this;
		return html`
      <cds-custom-button style="margin-bottom: 3rem" @click="${resetTabs}">
        Reset
      </cds-custom-button>
      <cds-custom-tabs
        ?disabled="${this.disabled}"
        selection-mode="${this.selectionMode}"
        selected-index="${this.selectedIndex}"
        type="${this.contained ? "contained" : ""}"
        ?dismissable="${this.dismissable}"
        value="all"
        @cds-custom-tab-closed="${this._handleDismissed}"
        @cds-custom-tabs-beingselected="${this._handleBeforeSelected}">
        ${this._tabs.map((tab) => html`
            <cds-custom-tab
              id="tab-${tab.id}"
              target="panel-${tab.id}"
              value="${tab.value}"
              ?disabled="${tab.disabled}">
              ${tab.label}
            </cds-custom-tab>
          `)}
      </cds-custom-tabs>
      <div class="${"cds-custom"}-ce-demo-devenv--tab-panels">
        ${this._tabs.map((tab) => html`
            <div
              id="panel-${tab.id}"
              role="tabpanel"
              aria-labelledby="tab-${tab.id}"
              hidden>
              ${tab.label}
            </div>
          `)}
      </div>
    `;
	}
	/**
	* Disable shadow DOM to inherit styles from parent
	*/
	createRenderRoot() {
		return this;
	}
};
__decorate([state()], DismissableTabsWrapper.prototype, "_tabs", void 0);
__decorate([property({ type: Boolean })], DismissableTabsWrapper.prototype, "disabled", void 0);
__decorate([property({ type: Boolean })], DismissableTabsWrapper.prototype, "contained", void 0);
__decorate([property({ type: Boolean })], DismissableTabsWrapper.prototype, "dismissable", void 0);
__decorate([property({ attribute: "selection-mode" })], DismissableTabsWrapper.prototype, "selectionMode", void 0);
__decorate([property({ attribute: "selected-index" })], DismissableTabsWrapper.prototype, "selectedIndex", void 0);
customElements.define("tabs-story-wrapper", DismissableTabsWrapper);
//#endregion
export { DismissableTabsWrapper };

//# sourceMappingURL=tabs-wrapper.js.map