aw-wizard-forms 4.2.0 → 4.3.0

package/dist/wizard-form.min.js

@@ -537,7 +537,7 @@
     display: flex;
     align-items: center;
     gap: var(--wf-spacing-3);
-    min-height: var(--wf-input-min-height);
+    height: var(--wf-input-min-height);
     background: var(--wf-glass-bg);
     backdrop-filter: blur(var(--wf-glass-blur));
     -webkit-backdrop-filter: blur(var(--wf-glass-blur));
@@ -545,6 +545,7 @@
     border-radius: var(--wf-radius-md);
     box-shadow: var(--wf-glass-shadow);
     padding-left: var(--wf-spacing-3);
+    padding-right: var(--wf-spacing-2);
     transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
   }
 
@@ -575,38 +576,46 @@
   .wf-other-actions {
     display: flex;
     align-items: center;
-    justify-content: stretch;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+
+  /* Show button when input has value */
+  .wf-other-input-wrapper.has-value .wf-other-actions {
+    opacity: 1;
+    visibility: visible;
   }
 
-  /* Ensure slotted button fills the action column */
+  /* Button inside input box should not stretch */
   .wf-other-actions ::slotted(*) {
-    width: 100%;
+    width: auto;
   }
-`;var Ht=Object.defineProperty,Vt=Object.getOwnPropertyDescriptor,Ut=(t,e,s,r)=>{for(var i,o=r>1?void 0:r?Vt(e,s):e,a=t.length-1;a>=0;a--)(i=t[a])&&(o=(r?i(e,s,o):i(o))||o);return r&&o&&Ht(e,s,o),o};t.WfOther=class extends ct{constructor(){super(...arguments),this.label="Others, please specify:",this.placeholder="",this.parentValue="Others",this.required=!1,this.disabled=!1,this.shortcut="",this._value="",this._handleInput=t=>{const e=t.target;this._value=e.value,this._notifyChange()}}get value(){return this._value}set value(t){this._value=t}clear(){this._value="",this._notifyChange()}focusInput(){const t=this.shadowRoot?.querySelector(".wf-other-input");t?.focus()}_notifyChange(){this.dispatchEvent(new CustomEvent("wf-other-change",{detail:{value:this._value,name:this.name},bubbles:!0,composed:!0}))}render(){return K`
+`;var Ht=Object.defineProperty,Vt=Object.getOwnPropertyDescriptor,Ut=(t,e,s,r)=>{for(var i,o=r>1?void 0:r?Vt(e,s):e,a=t.length-1;a>=0;a--)(i=t[a])&&(o=(r?i(e,s,o):i(o))||o);return r&&o&&Ht(e,s,o),o};t.WfOther=class extends ct{constructor(){super(...arguments),this.label="Others, please specify:",this.placeholder="",this.parentValue="Others",this.required=!1,this.disabled=!1,this.shortcut="",this._value="",this._handleInput=t=>{const e=t.target;this._value=e.value,this._notifyChange()}}get value(){return this._value}set value(t){this._value=t}clear(){this._value="",this._notifyChange()}focusInput(){const t=this.shadowRoot?.querySelector(".wf-other-input");t?.focus()}_notifyChange(){this.dispatchEvent(new CustomEvent("wf-other-change",{detail:{value:this._value,name:this.name},bubbles:!0,composed:!0}))}render(){const t=this._value.trim().length>0;return K`
       <div class="wf-other-container" data-testid="wf-other">
         <label class="wf-other-label">
           ${this.label}
           ${this.labelHint?K`<span>${this.labelHint}</span>`:J}
         </label>
-        <wf-layout mode="grid" columns="4" gap="md">
-          <div class="wf-other-input-wrapper" data-span="3">
-            ${this.shortcut?K`<wf-badge shortcut="${this.shortcut}"></wf-badge>`:J}
-            <input
-              type="text"
-              class="wf-other-input"
-              placeholder="${this.placeholder}"
-              .value="${this._value}"
-              ?disabled="${this.disabled}"
-              ?required="${this.required}"
-              @input="${this._handleInput}"
-              data-testid="wf-other-input"
-            />
-          </div>
-          <!-- Slot for action buttons (like wf-next-btn) -->
+        <div class="wf-other-input-wrapper ${t?"has-value":""}">
+          ${this.shortcut?K`<wf-badge shortcut="${this.shortcut}"></wf-badge>`:J}
+          <input
+            type="text"
+            class="wf-other-input"
+            placeholder="${this.placeholder}"
+            .value="${this._value}"
+            ?disabled="${this.disabled}"
+            ?required="${this.required}"
+            @input="${this._handleInput}"
+            data-testid="wf-other-input"
+          />
+          <!-- Slot for action buttons (like wf-next-btn) inside input -->
           <div class="wf-other-actions">
             <slot></slot>
           </div>
-        </wf-layout>
+        </div>
       </div>
     `}},t.WfOther.styles=qt,Ut([mt({type:String})],t.WfOther.prototype,"label",2),Ut([mt({type:String,attribute:"label-hint"})],t.WfOther.prototype,"labelHint",2),Ut([mt({type:String})],t.WfOther.prototype,"placeholder",2),Ut([mt({type:String})],t.WfOther.prototype,"name",2),Ut([mt({type:String,attribute:"parent-value"})],t.WfOther.prototype,"parentValue",2),Ut([mt({type:Boolean})],t.WfOther.prototype,"required",2),Ut([mt({type:Boolean})],t.WfOther.prototype,"disabled",2),Ut([mt({type:String})],t.WfOther.prototype,"shortcut",2),Ut([wt()],t.WfOther.prototype,"_value",2),t.WfOther=Ut([ut("wf-other")],t.WfOther);var Rt=Object.defineProperty,Yt=Object.getOwnPropertyDescriptor,Kt=(t,e,s,r)=>{for(var i,o=r>1?void 0:r?Yt(e,s):e,a=t.length-1;a>=0;a--)(i=t[a])&&(o=(r?i(e,s,o):i(o))||o);return r&&o&&Rt(e,s,o),o};t.WfOptions=class extends t.WfLayout{constructor(){super(...arguments),this.mode="grid",this.gap="md",this.name="",this.multi=!1,this.required=!1,this.min=0,this.max=0,this.columns="2",this._selected=new Set,this._otherValue="",this._errorMessage="",this._validationActivated=!1,this._options=[],this._shortcutMap=new Map,this._composableOther=null,this._handleComposableOtherChange=t=>{t.stopPropagation(),this._otherValue=t.detail.value,this._otherValue.trim()&&this._selected.size>0&&(this._selected.clear(),this._updateOptionStates()),this._dispatchChange()},this._handleOptionSelect=t=>{if(t.detail.forwarded)return;t.stopPropagation();const{value:e}=t.detail;this._selectValue(e),this.multi||this.dispatchEvent(new CustomEvent("wf-option-select",{detail:{...t.detail,forwarded:!0},bubbles:!0,composed:!0}))},this._handleKeydown=t=>{const e=this.closest("wf-step");if(!e||!e.hasAttribute("active"))return;const s=t.composedPath()[0];if("INPUT"===s?.tagName||"TEXTAREA"===s?.tagName)return;const r=t.key.toUpperCase();if(1===r.length&&r>="A"&&r<="Z"){if(this._composableOther&&r===this._composableOther.shortcut)return t.preventDefault(),void this._composableOther.focusInput();const e=this._shortcutMap.get(r);e&&!e.disabled&&(t.preventDefault(),e.triggerSelect())}}}connectedCallback(){super.connectedCallback(),this._errorMessage="",this._validationActivated=!1,this.addEventListener("wf-option-select",this._handleOptionSelect),this.addEventListener("wf-other-change",this._handleComposableOtherChange),document.addEventListener("keydown",this._handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("wf-option-select",this._handleOptionSelect),this.removeEventListener("wf-other-change",this._handleComposableOtherChange),document.removeEventListener("keydown",this._handleKeydown)}firstUpdated(t){super.firstUpdated(t);const e=(this._defaultSlot?.assignedElements({flatten:!0})||[]).find(t=>"wf-other"===t.tagName.toLowerCase());this._composableOther=e||null,this._discoverOptions(),this.requestUpdate()}_hasComposableOther(){return null!==this._composableOther}updated(t){super.updated(t),(t.has("multi")||t.has("max"))&&this._updateOptionStates()}render(){return super.updated(new Map),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable",this.multi+""),this.setAttribute("aria-required",this.required+""),K`
       <slot @slotchange="${this._handleSlotChange}"></slot>
@@ -1000,20 +1009,22 @@
 
     .wf-progress {
       display: flex;
-      gap: var(--wf-spacing-2);
+      gap: 16px;
+      align-items: center;
+      justify-content: center;
     }
 
     .wf-progress-segment {
-      width: 100%;
-      height: var(--wf-progress-height);
-      background-color: var(--wf-color-progress-inactive);
-      border-radius: var(--wf-radius-full);
+      width: 32px;
+      height: 8px;
+      background-color: white;
+      border-radius: 100vw;
       transition: background-color 300ms ease;
     }
 
     .wf-progress-segment.completed,
     .wf-progress-segment.active {
-      background-color: var(--wf-color-progress-active);
+      background-color: rgb(136 66 240);
     }
   `];var ye=Object.defineProperty,Se=Object.getOwnPropertyDescriptor,xe=(t,e,s,r)=>{for(var i,o=r>1?void 0:r?Se(e,s):e,a=t.length-1;a>=0;a--)(i=t[a])&&(o=(r?i(e,s,o):i(o))||o);return r&&o&&ye(e,s,o),o};t.WfProgress=class extends ct{constructor(){super(...arguments),this.for="",this._currentStep=1,this._totalSteps=1,this._isComplete=!1,this._wizard=null,this._boundHandleStepChange=this._handleStepChange.bind(this),this._boundHandleSuccess=this._handleSuccess.bind(this),this._boundHandleStepsDiscovered=this._handleStepsDiscovered.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("wf:steps-discovered",this._boundHandleStepsDiscovered),requestAnimationFrame(()=>{this._connectToWizard()})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("wf:steps-discovered",this._boundHandleStepsDiscovered),this._disconnectFromWizard()}_connectToWizard(){this.for?this._wizard=document.getElementById(this.for):this._wizard=this.closest("wizard-form"),this._wizard&&(this._currentStep=this._wizard.currentStep||1,this._totalSteps=this._wizard.totalSteps||1,this._isComplete=this._wizard.isSubmitted||!1,this._wizard.addEventListener("wf:step-change",this._boundHandleStepChange),this._wizard.addEventListener("wf:success",this._boundHandleSuccess))}_disconnectFromWizard(){this._wizard&&(this._wizard.removeEventListener("wf:step-change",this._boundHandleStepChange),this._wizard.removeEventListener("wf:success",this._boundHandleSuccess),this._wizard=null)}_handleStepChange(t){this._currentStep=t.detail.to,this._wizard&&(this._totalSteps=this._wizard.totalSteps)}_handleStepsDiscovered(t){const{wizard:e,wizardId:s,totalSteps:r,currentStep:i}=t.detail;if(this.for){if(s!==this.for)return}else{const t=this.closest("wizard-form");if(!t||t!==e)return}!this._wizard&&e&&(this._wizard=e,e.addEventListener("wf:step-change",this._boundHandleStepChange),e.addEventListener("wf:success",this._boundHandleSuccess)),this._totalSteps=r,this._currentStep=i}_handleSuccess(){this._isComplete=!0}render(){if(this._isComplete)return null;const t=[];for(let e=1;e<=this._totalSteps;e++){const s=e<this._currentStep,r=e===this._currentStep;t.push(K`
         <div
@@ -1073,9 +1084,12 @@
     }
 
     :host([inline]) .wf-btn {
-      min-height: var(--wf-input-min-height);
+      min-height: 16px;
       width: auto;
-      padding: var(--wf-spacing-3) var(--wf-spacing-5);
+      padding-top: 8px;
+      padding-bottom: 8px;
+      padding-left: 12px;
+      padding-right: 8px;
     }
   `];var Ce=Object.defineProperty,Oe=Object.getOwnPropertyDescriptor,We=(t,e,s,r)=>{for(var i,o=r>1?void 0:r?Oe(e,s):e,a=t.length-1;a>=0;a--)(i=t[a])&&(o=(r?i(e,s,o):i(o))||o);return r&&o&&Ce(e,s,o),o};t.WfNextBtn=class extends ke{constructor(){super(...arguments),this.showShortcut=!0,this.inline=!1,this.disabled=!1,this._handleClick=()=>{this.disabled||this._isSubmitting||this._dispatchNavEvent()}}_getEventName(){return"wf:nav-next"}_getButtonLabel(){return this.label?this.label:!this.inline&&("submit"===this.action||"next"!==this.action&&this._isLastStep)?"Submit":"Continue"}_isSubmitAction(){return!this.inline&&("submit"===this.action||"next"!==this.action&&this._isLastStep)}render(){const t=this._getButtonLabel(),e=this.disabled||this._isSubmitting;return K`
       <button