import { j, b as T, T as TailwindStyledElement, x } from '../../index-2f5488b6.js';
import { n, e as e$1 } from '../../query-assigned-elements-5d94572f.js';
import { e, i, t } from '../../directive-2bb7789e.js';
import { c as customClassMap } from '../../index-5e194caf.js';

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

/**
 * @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.CHILD)throw Error("repeat() can only be used in text expressions")}ct(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.ct(e,s,t).values}update(s,[t,r,c]){var d;const a$1=m(s),{values:p$1,keys:v}=this.ct(t,r,c);if(!Array.isArray(a$1))return this.ut=v,p$1;const h=null!==(d=this.ut)&&void 0!==d?d:this.ut=[],m$1=[];let y,x,j=0,k=a$1.length-1,w=0,A=p$1.length-1;for(;j<=k&&w<=A;)if(null===a$1[j])j++;else if(null===a$1[k])k--;else if(h[j]===v[w])m$1[w]=f(a$1[j],p$1[w]),j++,w++;else if(h[k]===v[A])m$1[A]=f(a$1[k],p$1[A]),k--,A--;else if(h[j]===v[A])m$1[A]=f(a$1[j],p$1[A]),c$1(s,m$1[A+1],a$1[j]),j++,A--;else if(h[k]===v[w])m$1[w]=f(a$1[k],p$1[w]),c$1(s,a$1[j],a$1[k]),k--,w++;else if(void 0===y&&(y=u(v,w,A),x=u(h,j,k)),y.has(h[j]))if(y.has(h[k])){const e=x.get(v[w]),t=void 0!==e?a$1[e]:null;if(null===t){const e=c$1(s,a$1[j]);f(e,p$1[w]),m$1[w]=e;}else m$1[w]=f(t,p$1[w]),c$1(s,a$1[j],t),a$1[e]=null;w++;}else p(a$1[k]),k--;else p(a$1[j]),j++;for(;w<=A;){const e=c$1(s,m$1[A+1]);f(e,p$1[w]),m$1[w++]=e;}for(;j<=k;){const e=a$1[j++];null!==e&&p(e);}return this.ut=v,a(s,m$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.isFullWidth = false;
    this.activeStepStyles = `[&_.lukso-wizard-circle-inner]:border-2 [&_.lukso-wizard-circle-inner]:border-purple-51`;
    this.completedStepStyles = `[&>.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`;
  }
  stepTemplate(step, index) {
    return x`<li
      class="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 ${customClassMap(
      {
        [this.completedStepStyles]: index + 1 < this.activeStep,
        [this.activeStepStyles]: index + 1 === this.activeStep,
        ["w-full"]: this.isFullWidth,
        ["w-[121px]"]: !this.isFullWidth
      }
    )}"
    >
      <div
        class="text-purple-51 nav-apax-8-medium-uppercase whitespace-pre-line flex text-center break-words uppercase"
      >
        ${step.label}
      </div>
      <div
        class="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)]
          ${customClassMap({
      ["completed"]: index + 1 < this.activeStep,
      ["current"]: index === this.activeStep - 2
    })}"
      >
        <div
          class="lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px] ${customClassMap(
      {
        [this.activeStepStyles]: index + 1 === this.activeStep
      }
    )}"
        ></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: Boolean, attribute: "is-full-width" })
], LuksoWizard.prototype, "isFullWidth", 2);
LuksoWizard = __decorateClass([
  e$1("lukso-wizard")
], LuksoWizard);

export { LuksoWizard };
