'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const lit = require('lit');
const decorators_js = require('lit/decorators.js');
const repeat_js = require('lit/directives/repeat.js');
const tailwindVariants = require('tailwind-variants');
const index = require('../../chunks/index-BBPgtFEP.js');

const style = ".lukso-wizard-circle::after {\n  width: 0;\n}\n.lukso-wizard-circle.completed::after {\n  width: calc(100% - 16px);\n}\n.lukso-wizard-circle.current::after {\n  width: 0;\n}\n.lukso-wizard-circle.current.animated-step::after {\n  width: calc(100% - 16px);\n}";

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;
};
exports.LuksoWizard = class LuksoWizard extends index.TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.steps = "";
    this.activeStep = 1;
    this.size = "medium";
    this.stepStyles = tailwindVariants.tv({
      slots: {
        base: `inline-flex flex-col items-center justify-end first:-ml-12 last:-mr-12 relative
    [&>.lukso-wizard-circle]:after:last:hidden [&>.lukso-wizard-circle]:before:last:hidden`,
        circle: `lukso-wizard-circle bg-neutral-90 w-4 h-4 rounded-full shadow-wizard-step mt-2 flex items-center
    border-[1px] border-solid border-[rgba(255,255,255,0.8)]
    after:block after:absolute after:bottom-[7px] after:ml-[15px] after:h-[2px]
    after:content:'' after:bg-transparent after:transition-width after:duration-300
    before:block before:absolute before:bottom-[7px] before:ml-[15px] before:h-[2px]
    before:content:'' before:bg-neutral-90 before:shadow-wizard-line before:w-[calc(100%-16px)]`,
        innerCircle: "lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px]"
      },
      variants: {
        size: {
          small: {
            base: "w-[92px]"
          },
          medium: {
            base: "w-[121px]"
          },
          large: {
            base: "w-[180px]"
          },
          ["full-width"]: {
            base: "w-full"
          }
        },
        completed: {
          true: {
            base: `[&>.lukso-wizard-circle]:after:bg-purple-51
          [&_.lukso-wizard-circle-inner]:bg-gradient-to-t
          [&_.lukso-wizard-circle-inner]:from-gradient-3-start
          [&_.lukso-wizard-circle-inner]:to-gradient-3-end`,
            circle: "completed"
          }
        },
        current: {
          true: {
            circle: "current"
          }
        },
        active: {
          true: {
            base: `[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51`,
            innerCircle: "[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51"
          }
        }
      }
    });
  }
  stepTemplate(step, index) {
    const { base, circle, innerCircle } = this.stepStyles({
      completed: index + 1 < this.activeStep,
      active: index + 1 === this.activeStep,
      current: index === this.activeStep - 2,
      size: this.size
    });
    return lit.html`<li class="${base()}">
      <div
        class="text-purple-51 nav-inter-8-medium-uppercase whitespace-pre-line flex text-center break-words uppercase"
      >
        ${step.label}
      </div>
      <div class="${circle()}">
        <div class="${innerCircle()}"></div>
      </div>
    </li>`;
  }
  render() {
    const steps = JSON.parse(this.steps);
    return lit.html`
      <ul class="flex justify-center" data-testid="wizard">
        ${repeat_js.repeat(
      steps || [],
      (step) => steps.indexOf(step),
      (step, index) => this.stepTemplate(step, index)
    )}
      </ul>
    `;
  }
  updated() {
    setTimeout(() => {
      const currentStep = this.shadowRoot.querySelectorAll(".current");
      currentStep[0]?.classList.add("animated-step");
    }, 10);
  }
};
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoWizard.prototype, "steps", 2);
__decorateClass([
  decorators_js.property({ type: Number, attribute: "active-step" })
], exports.LuksoWizard.prototype, "activeStep", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoWizard.prototype, "size", 2);
exports.LuksoWizard = __decorateClass([
  index.safeCustomElement("lukso-wizard")
], exports.LuksoWizard);
