@design.estate/dees-catalog 3.71.1 → 3.72.0

package/dist_watch/bundle.js

@@ -192573,7 +192573,7 @@ var stepperDemo = /* @__PURE__ */ __name(() => b2`
 init_dist_ts30();
 init_dist_ts29();
 init_theme();
-var _activeFormValid_dec, _activeForm_dec, _stepperZIndex_dec, _overlay_dec, _selectedStep_dec, _steps_dec, _a81, _DeesStepper_decorators, _init82, _steps, _selectedStep, _overlay, _stepperZIndex, _activeForm, _activeFormValid;
+var _activeFormValid_dec, _activeForm_dec, _stepperZIndex_dec, _cancelable_dec, _overlay_dec, _selectedStep_dec, _steps_dec, _a81, _DeesStepper_decorators, _init82, _steps, _selectedStep, _overlay, _cancelable, _stepperZIndex, _activeForm, _activeFormValid;
 _DeesStepper_decorators = [customElement("dees-stepper")];
 var _DeesStepper = class _DeesStepper extends (_a81 = DeesElement, _steps_dec = [n5({
   type: Array
@@ -192582,31 +192582,43 @@ var _DeesStepper = class _DeesStepper extends (_a81 = DeesElement, _steps_dec =
 })], _overlay_dec = [n5({
   type: Boolean,
   reflect: true
+})], _cancelable_dec = [n5({
+  type: Boolean,
+  reflect: true
 })], _stepperZIndex_dec = [n5({ type: Number, attribute: false })], _activeForm_dec = [n5({ type: Object, attribute: false })], _activeFormValid_dec = [n5({ type: Boolean, attribute: false })], _a81) {
   constructor() {
     super();
     __privateAdd(this, _steps, __runInitializers(_init82, 8, this, [])), __runInitializers(_init82, 11, this);
     __privateAdd(this, _selectedStep, __runInitializers(_init82, 12, this)), __runInitializers(_init82, 15, this);
     __privateAdd(this, _overlay, __runInitializers(_init82, 16, this, false)), __runInitializers(_init82, 19, this);
-    __privateAdd(this, _stepperZIndex, __runInitializers(_init82, 20, this, 1e3)), __runInitializers(_init82, 23, this);
-    __privateAdd(this, _activeForm, __runInitializers(_init82, 24, this, null)), __runInitializers(_init82, 27, this);
-    __privateAdd(this, _activeFormValid, __runInitializers(_init82, 28, this, true)), __runInitializers(_init82, 31, this);
+    __privateAdd(this, _cancelable, __runInitializers(_init82, 20, this, true)), __runInitializers(_init82, 23, this);
+    __privateAdd(this, _stepperZIndex, __runInitializers(_init82, 24, this, 1e3)), __runInitializers(_init82, 27, this);
+    __privateAdd(this, _activeForm, __runInitializers(_init82, 28, this, null)), __runInitializers(_init82, 31, this);
+    __privateAdd(this, _activeFormValid, __runInitializers(_init82, 32, this, true)), __runInitializers(_init82, 35, this);
     __publicField(this, "activeFormSubscription");
     __publicField(this, "windowLayer");
     __publicField(this, "getIndexOfStep", /* @__PURE__ */ __name((stepArg) => {
       return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
     }, "getIndexOfStep"));
     __publicField(this, "scroller");
+    /**
+     * Currently-open confirmation modal (if any). Prevents double-stacking when
+     * the user clicks the backdrop or the Cancel button while a confirm modal
+     * is already visible. The reference may become stale (point to a destroyed
+     * modal) if the user dismisses the confirm modal by clicking its own
+     * backdrop — so handleCancelRequest() uses isConnected to detect that.
+     */
+    __publicField(this, "cancelConfirmModal");
   }
   static async createAndShow(optionsArg) {
     const body3 = document.body;
     const stepper = new _DeesStepper();
     stepper.steps = optionsArg.steps;
     stepper.overlay = true;
+    if (optionsArg.cancelable !== void 0) {
+      stepper.cancelable = optionsArg.cancelable;
+    }
     stepper.windowLayer = await DeesWindowLayer.createAndShow({ blur: true });
-    stepper.windowLayer.addEventListener("click", async () => {
-      await stepper.destroy();
-    });
     body3.append(stepper.windowLayer);
     body3.append(stepper);
     stepper.stepperZIndex = zIndexRegistry.getNextZIndex();
@@ -192618,6 +192630,7 @@ var _DeesStepper = class _DeesStepper extends (_a81 = DeesElement, _steps_dec =
       <div
         class="stepperContainer ${this.overlay ? "overlay" : ""}"
         style=${this.overlay ? `z-index: ${this.stepperZIndex};` : ""}
+        @click=${this.handleOutsideClick}
       >
         ${this.steps.map((stepArg, stepIndex) => {
       const isSelected = stepArg === this.selectedStep;
@@ -192638,19 +192651,23 @@ var _DeesStepper = class _DeesStepper extends (_a81 = DeesElement, _steps_dec =
               <div class="title">${stepArg.title}</div>
               <div class="content">${stepArg.content}</div>
             </div>
-            ${stepArg.menuOptions && stepArg.menuOptions.length > 0 ? b2`<div slot="footer" class="bottomButtons">
-                  ${isSelected && this.activeForm !== null && !this.activeFormValid ? b2`<div class="stepHint">Complete form to continue</div>` : ""}
-                  ${stepArg.menuOptions.map((actionArg, actionIndex) => {
+            <div slot="footer" class="bottomButtons">
+              ${isSelected && this.activeForm !== null && !this.activeFormValid ? b2`<div class="stepHint">Complete form to continue</div>` : ""}
+              ${this.cancelable ? b2`<div
+                    class="bottomButton"
+                    @click=${() => this.handleCancelRequest()}
+                  >Cancel</div>` : ""}
+              ${stepArg.menuOptions?.map((actionArg, actionIndex) => {
         const isPrimary = actionIndex === stepArg.menuOptions.length - 1;
         const isDisabled = isPrimary && this.activeForm !== null && !this.activeFormValid;
         return b2`
-                      <div
-                        class="bottomButton ${isPrimary ? "primary" : ""} ${isDisabled ? "disabled" : ""}"
-                        @click=${() => this.handleMenuOptionClick(actionArg, isPrimary)}
-                      >${actionArg.name}</div>
-                    `;
-      })}
-                </div>` : ""}
+                  <div
+                    class="bottomButton ${isPrimary ? "primary" : ""} ${isDisabled ? "disabled" : ""}"
+                    @click=${() => this.handleMenuOptionClick(actionArg, isPrimary)}
+                  >${actionArg.name}</div>
+                `;
+      }) ?? ""}
+            </div>
           </dees-tile>`;
     })}
       </div>
@@ -192792,6 +192809,65 @@ var _DeesStepper = class _DeesStepper extends (_a81 = DeesElement, _steps_dec =
     }
     await optionArg.action(this);
   }
+  /**
+   * Click handler on .stepperContainer. Mirrors dees-modal.handleOutsideClick:
+   * when the user clicks the empty backdrop area (target === stepperContainer,
+   * not any descendant tile), trigger the cancel confirmation flow. Clicks
+   * that originate inside a step tile have a different event.target and are
+   * ignored here.
+   */
+  handleOutsideClick(eventArg) {
+    if (!this.overlay) return;
+    if (!this.cancelable) return;
+    eventArg.stopPropagation();
+    const stepperContainer = this.shadowRoot.querySelector(".stepperContainer");
+    if (eventArg.target === stepperContainer) {
+      this.handleCancelRequest();
+    }
+  }
+  /**
+   * Shown by both the backdrop click and the Cancel button in the footer.
+   * Presents a dees-modal asking the user to confirm cancellation. If they
+   * confirm, the stepper and window layer are destroyed; otherwise the
+   * confirm modal is dismissed and the stepper stays open.
+   *
+   * The isConnected check on the cached reference handles the case where the
+   * user dismissed the previous confirm modal by clicking ITS OWN backdrop —
+   * dees-modal.handleOutsideClick calls destroy() directly, bypassing our
+   * action callbacks, so our cached reference would be stale without this
+   * fallback check.
+   */
+  async handleCancelRequest() {
+    if (!this.cancelable) return;
+    if (this.cancelConfirmModal && this.cancelConfirmModal.isConnected) return;
+    this.cancelConfirmModal = void 0;
+    this.cancelConfirmModal = await DeesModal.createAndShow({
+      heading: "Cancel setup?",
+      width: "small",
+      content: b2`
+        <p style="margin: 0;">
+          Are you sure you want to cancel? Any progress on the current step will be lost.
+        </p>
+      `,
+      menuOptions: [
+        {
+          name: "Continue setup",
+          action: /* @__PURE__ */ __name(async (modal) => {
+            this.cancelConfirmModal = void 0;
+            await modal.destroy();
+          }, "action")
+        },
+        {
+          name: "Yes, cancel",
+          action: /* @__PURE__ */ __name(async (modal) => {
+            this.cancelConfirmModal = void 0;
+            await modal.destroy();
+            await this.destroy();
+          }, "action")
+        }
+      ]
+    });
+  }
   async destroy() {
     const domtools19 = await this.domtoolsPromise;
     const container = this.shadowRoot.querySelector(".stepperContainer");
@@ -192813,12 +192889,14 @@ _init82 = __decoratorStart(_a81);
 _steps = new WeakMap();
 _selectedStep = new WeakMap();
 _overlay = new WeakMap();
+_cancelable = new WeakMap();
 _stepperZIndex = new WeakMap();
 _activeForm = new WeakMap();
 _activeFormValid = new WeakMap();
 __decorateElement(_init82, 4, "steps", _steps_dec, _DeesStepper, _steps);
 __decorateElement(_init82, 4, "selectedStep", _selectedStep_dec, _DeesStepper, _selectedStep);
 __decorateElement(_init82, 4, "overlay", _overlay_dec, _DeesStepper, _overlay);
+__decorateElement(_init82, 4, "cancelable", _cancelable_dec, _DeesStepper, _cancelable);
 __decorateElement(_init82, 4, "stepperZIndex", _stepperZIndex_dec, _DeesStepper, _stepperZIndex);
 __decorateElement(_init82, 4, "activeForm", _activeForm_dec, _DeesStepper, _activeForm);
 __decorateElement(_init82, 4, "activeFormValid", _activeFormValid_dec, _DeesStepper, _activeFormValid);
@@ -193009,15 +193087,17 @@ __publicField(_DeesStepper, "styles", [
         transition: all 0.15s ease;
         background: transparent;
         border: none;
-        border-left: 1px solid var(--dees-color-border-subtle);
         color: var(--dees-color-text-muted);
         white-space: nowrap;
         display: flex;
         align-items: center;
       }
 
-      .bottomButtons .bottomButton:first-child {
-        border-left: none;
+      /* Border-left separator on every button EXCEPT the first one.
+         Uses general sibling so the stepHint (if rendered on the left) does
+         not shift which button counts as "first" and create a phantom border. */
+      .bottomButtons .bottomButton ~ .bottomButton {
+        border-left: 1px solid var(--dees-color-border-subtle);
       }
 
       .bottomButtons .bottomButton:hover {