import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { boolean } from '../../internal/boolean.mjs';
import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
import { isStringFull } from '../../internal/type-checks.mjs';
import { watch } from '../../internal/watch.mjs';
import styles from './stepper-panel.styles.mjs';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let id = 0;
class FlowUiStepperPanel extends FlowRdfElement {
  constructor() {
    super(...arguments);
    this.attrId = ++id;
    this.componentId = `flow-ui-stepper-panel-${this.attrId}`;
    this.name = "";
    this.subTitle = "";
    this.active = false;
    this.complete = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.active = boolean(this.active, true);
    this.complete = boolean(this.complete, true);
    this.id = isStringFull(this.id) ? this.id : this.componentId;
    this.setAttribute("role", "tabpanel");
  }
  handleStateChange() {
    this.setAttribute("aria-hidden", this.active ? "false" : "true");
  }
  render() {
    return html`
      <slot
        part="base"
        class=${classMap({
      "stepper-panel": true,
      "stepper-panel--active": this.active,
      "stepper-panel--complete": this.complete
    })}
      ></slot>
    `;
  }
}
FlowUiStepperPanel.styles = styles;
__decorateClass([
  property({ reflect: true })
], FlowUiStepperPanel.prototype, "name", 2);
__decorateClass([
  property({ attribute: "sub-title", reflect: true })
], FlowUiStepperPanel.prototype, "subTitle", 2);
__decorateClass([
  property({ reflect: true, type: Boolean })
], FlowUiStepperPanel.prototype, "active", 2);
__decorateClass([
  property({ reflect: true, type: Boolean })
], FlowUiStepperPanel.prototype, "complete", 2);
__decorateClass([
  watch("state")
], FlowUiStepperPanel.prototype, "handleStateChange", 1);

export { FlowUiStepperPanel as default };
