import { Z, a as T, b as TailwindStyledElement, x } from '../../chunks/index-5X9ujrWL.js';
import { n } from '../../chunks/property-DfumgIL6.js';
import { e, i, t as t$1 } from '../../chunks/directive-BKuZRRPO.js';
import { c as ce } from '../../chunks/index-B9iart53.js';
import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';

/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const {I:t}=Z,r=()=>document.createComment(""),s=(o,i,n)=>{const e=o._$AA.parentNode,l=void 0===i?o._$AB:i._$AA;if(void 0===n){const i=e.insertBefore(r(),l),d=e.insertBefore(r(),l);n=new t(i,d,o,o.options);}else {const t=n._$AB.nextSibling,i=n._$AM,d=i!==o;if(d){let t;n._$AQ?.(o),n._$AM=o,void 0!==n._$AP&&(t=o._$AU)!==i._$AU&&n._$AP(t);}if(t!==l||d){let o=n._$AA;for(;o!==t;){const t=o.nextSibling;e.insertBefore(o,l),o=t;}}}return n},v=(o,t,i=o)=>(o._$AI(t,i),o),u$1={},m=(o,t=u$1)=>o._$AH=t,p=o=>o._$AH,M=o=>{o._$AR(),o._$AA.remove();};

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=e(class extends i{constructor(e){if(super(e),e.type!==t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s$1,[t,r,c]){const d=p(s$1),{values:p$1,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p$1;const h=this.ut??=[],v$1=[];let m$1,y,x=0,j=d.length-1,k=0,w=p$1.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p$1[k]),x++,k++;else if(h[j]===a[w])v$1[w]=v(d[j],p$1[w]),j--,w--;else if(h[x]===a[w])v$1[w]=v(d[x],p$1[w]),s(s$1,v$1[w+1],d[x]),x++,w--;else if(h[j]===a[k])v$1[k]=v(d[j],p$1[k]),s(s$1,d[x],d[j]),j--,k++;else if(void 0===m$1&&(m$1=u(a,k,w),y=u(h,x,j)),m$1.has(h[x]))if(m$1.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=s(s$1,d[x]);v(e,p$1[k]),v$1[k]=e;}else v$1[k]=v(t,p$1[k]),s(s$1,d[x],t),d[e]=null;k++;}else M(d[j]),j--;else M(d[x]),x++;for(;k<=w;){const e=s(s$1,v$1[w+1]);v(e,p$1[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&M(e);}return this.ut=a,m(s$1,v$1),T}});

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;
};
let LuksoWizard = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.steps = "";
    this.activeStep = 1;
    this.size = "medium";
    this.stepStyles = ce({
      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 x`<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 x`
      <ul class="flex justify-center" data-testid="wizard">
        ${c(
      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([
  n({ type: String })
], LuksoWizard.prototype, "steps", 2);
__decorateClass([
  n({ type: Number, attribute: "active-step" })
], LuksoWizard.prototype, "activeStep", 2);
__decorateClass([
  n({ type: String })
], LuksoWizard.prototype, "size", 2);
LuksoWizard = __decorateClass([
  safeCustomElement("lukso-wizard")
], LuksoWizard);

export { LuksoWizard };
