@lukso/web-components 1.6.2 → 1.7.3

package/dist/components/lukso-wizard/index.cjs

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared_tailwindElement_index = require('../../index-4aafbf5c.cjs');
+const directive = require('../../directive-db00f5fb.cjs');
+const index = require('../../index-7dc05ee5.cjs');
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const {I:l}=shared_tailwindElement_index.L,c$1=()=>document.createComment(""),r=(o,t,i)=>{var n;const d=o._$AA.parentNode,v=void 0===t?o._$AB:t._$AA;if(void 0===i){const t=d.insertBefore(c$1(),v),n=d.insertBefore(c$1(),v);i=new l(t,n,o,o.options);}else {const l=i._$AB.nextSibling,t=i._$AM,e=t!==o;if(e){let l;null===(n=i._$AQ)||void 0===n||n.call(i,o),i._$AM=o,void 0!==i._$AP&&(l=o._$AU)!==t._$AU&&i._$AP(l);}if(l!==v||e){let o=i._$AA;for(;o!==l;){const l=o.nextSibling;d.insertBefore(o,v),o=l;}}}return i},u$1=(o,l,t=o)=>(o._$AI(l,t),o),f={},s=(o,l=f)=>o._$AH=l,m=o=>o._$AH,p=o=>{var l;null===(l=o._$AP)||void 0===l||l.call(o,!1,!0);let t=o._$AA;const i=o._$AB.nextSibling;for(;t!==i;){const o=t.nextSibling;t.remove(),t=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=directive.e$2(class extends directive.i{constructor(e){if(super(e),e.type!==directive.t.CHILD)throw Error("repeat() can only be used in text expressions")}ht(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.ht(e,s,t).values}update(s$1,[t,r$1,c]){var d;const a=m(s$1),{values:p$1,keys:v}=this.ht(t,r$1,c);if(!Array.isArray(a))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.length-1,w=0,A=p$1.length-1;for(;j<=k&&w<=A;)if(null===a[j])j++;else if(null===a[k])k--;else if(h[j]===v[w])m$1[w]=u$1(a[j],p$1[w]),j++,w++;else if(h[k]===v[A])m$1[A]=u$1(a[k],p$1[A]),k--,A--;else if(h[j]===v[A])m$1[A]=u$1(a[j],p$1[A]),r(s$1,m$1[A+1],a[j]),j++,A--;else if(h[k]===v[w])m$1[w]=u$1(a[k],p$1[w]),r(s$1,a[j],a[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[e]:null;if(null===t){const e=r(s$1,a[j]);u$1(e,p$1[w]),m$1[w]=e;}else m$1[w]=u$1(t,p$1[w]),r(s$1,a[j],t),a[e]=null;w++;}else p(a[k]),k--;else p(a[j]),j++;for(;w<=A;){const e=r(s$1,m$1[A+1]);u$1(e,p$1[w]),m$1[w++]=e;}for(;j<=k;){const e=a[j++];null!==e&&p(e);}return this.ut=v,s(s$1,m$1),shared_tailwindElement_index.x}});
+
+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 shared_tailwindElement_index.TailwindElement {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.activeStep = 1;
+    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$1) {
+    return shared_tailwindElement_index.y`<li
+      class="inline-flex flex-col items-center justify-end w-[121px] first:-ml-12 last:-mr-12 relative
+      [&>.lukso-wizard-circle]:after:last:hidden ${index.customClassMap({
+      [this.completedStepStyles]: index$1 + 1 < this.activeStep,
+      [this.activeStepStyles]: index$1 + 1 === this.activeStep
+    })}"
+    >
+      <div
+        class="text-purple-51 heading-h5-medium-uppercase-apax whitespace-pre-line flex text-center break-words uppercase"
+      >
+        ${step.label}
+      </div>
+      <div
+        class="lukso-wizard-circle bg-pink-95 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:w-[calc(100%-16px)] after:ml-[15px] after:h-[2px]
+          after:content:'' after:bg-pink-95 after:shadow-wizard-line"
+      >
+        <div
+          class="lukso-wizard-circle-inner rounded-full w-[10px] h-[10px] ml-[2px] ${index.customClassMap(
+      {
+        [this.activeStepStyles]: index$1 + 1 === this.activeStep
+      }
+    )}"
+        ></div>
+      </div>
+    </li>`;
+  }
+  render() {
+    return shared_tailwindElement_index.y`
+      <ul class="flex justify-center" data-testid="wizard">
+        ${c(
+      this.steps || [],
+      (step) => this.steps.indexOf(step),
+      (step, index) => this.stepTemplate(step, index)
+    )}
+      </ul>
+    `;
+  }
+};
+__decorateClass([
+  directive.e({ type: Array })
+], exports.LuksoWizard.prototype, "steps", 2);
+__decorateClass([
+  directive.e({ type: Number, attribute: "active-step" })
+], exports.LuksoWizard.prototype, "activeStep", 2);
+exports.LuksoWizard = __decorateClass([
+  directive.e$1("lukso-wizard")
+], exports.LuksoWizard);